Part A of the Unit 2 Project

Provide a feature in this page that counts the words input into the input box below

by Angela Baruth

HTML

<h4>5. Provide a feature in this page that counts the words input into the
        input box below - Unit 2 Project Part A Extra Credit (10 pts) </h4>
      The box below accepts text input from the keyboard or copy/paste.&nbsp;
      Your job is to add a feature to this page that provides an approximate
      word count for the user who's typing into the page.&nbsp; <br>
      <br>
      To do this successfully, you'll need to:<br>
      <ul>
        <li>Create your own Javascript file in the js directory of this project.
          Call it whatever you want. </li>
        <li>&nbsp;Add a <span style="font-family: monospace;">&lt;script&gt;</span>
          tag to the page at the bottom that loads your new js file.</li>
        <li>In your JS file:</li>
        <ul>
          <li>Use document.getElementById() to get the textarea element from the
            page. You'll need its ID, which you can find in the HTML of this
            page.</li>
          <li>Write an event handler function that runs every time someone types
            in the textarea. It will look something like this:<br>
            <span style="font-family: monospace;">myTextareaElement.onkeyup =
              function(){<br>
              &nbsp;&nbsp;&nbsp; // your code goes here<br>
              }<br>
            </span></li>
          <li>You'll want to access the .value property of the textarea to get
            the contents of the box as a String</li>
          <li>Use <span style=" font-family: monospace;">String.split()</span>
            to divide the string (at word boundaries) into an array of Strings<span
              style=" font-family: monospace;"></span></li>
          <li>Count the elements in the array. This will be (roughly) the number
            of words in the box</li>
          <li><span style="font-family: monospace;">Write that value</span> into
            the HTML element that looks like this: <span style="font-family: monospace;">&lt;span
             ...

JavaScript

/********************************************************************
  *
  * Fifth problem: Conuting Words
  *
  ********************************************************************/


  var wordCount = document.getElementById("myWordsToCount");
  
  wordCount.onkeyup = function(){

               // getting the actual contents of the textarea
               var words = wordCount.value;

               // to correctly count only the words
               // we'll create and tally all the blanks 
               // that'll be in our array
               var blanks = 0;

               // get rid of empty spaces at the front or end of name
               // seems superfluous
               words = words.trim();

               // use String split() function, passing " " space to delineate words
               var splitWords = words.split(" "); 
               
               // now our array has all the 'words' that are separated by a space
               // however, we need to account for, discount really, multi-space characters
               // that could be part of our array of words, so we loop through it
               for(var i=0; i<splitWords.length;i++){
                  // and if any of those 'words' are less that 1, i.e. ""
                  if(splitWords[i].length < 1){
                      // increment our flag 
                      blanks++;
                  } 
                }
               // subtracting all empty array values from the total length
               document.getElementById("wordcount").innerHTML = splitWords.length-blanks; 
               console.log(splitWords);
               
               
  }