2A.5

by mtzara

HTML

<h4>5. Provide a feature in this page that counts the words input into the
        input box below</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
              id="wordcount"&gt;&lt;/span&gt;</span></li>
        </ul>
 ...

CSS

#studentname{
	border:1px solid darkgray;
	padding:.7em;
	background-color: gray;
	width:20%;
}

.namedata{
	color: maroon;
	font-weight:bold;
}

.degoutput{
	width:4em;
	border: 1px solid gray;
	padding: 1px;
}

#putAnX{
	width:600px;
	height:400px;
	border:1px solid black;
}
#theX{
	position:relative;
}
body {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
	line-height: 1.428571429;
	color: #333;
}
.container {
	width: 80%;
	margin: auto;
}

h4 {
	border-top: 1px solid black;
	padding-top: 1em;
	width: 95%;
}

.button {
    text-indent:0;
    border:1px solid #eda933;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:65px;
    line-height:65px;
    padding: .5 em;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #cd8a15;
    background-color:#f6b33d;
}

.hwbutton {
	-moz-box-shadow:inset 0px 1px 0px 0px #fed897;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fed897;
	box-shadow:inset 0px 1px 0px 0px #fed897;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f6b33d), color-stop(1, #d29105) );
	background:-moz-linear-gradient( center top, #f6b33d 5%, #d29105 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6b33d', endColorstr='#d29105');
	background-color:#f6b33d;
	-webkit-border-top-left-radius:20px;
	-moz-border-radius-topleft:20px;
	border-top-left-radius:20px;
	-webkit-border-top-right-radius:20px;
	-moz-border-radius-topright:20px;
	border-top-right-radius:20px;
	-webkit-border-bottom-right-radius:20px;
	-moz-border-radius-bottomright:20px;
	border-bottom-right-radius:20px;
	-webkit-border-bottom-left-radius:20px;
	-moz-border-radius-bottomleft:20px;
	border-bottom-left-radius:20px;
	text-indent:0;
	border:1px solid...

JavaScript

// Get a reference to the form value:
    var myWordsToCount = document.getElementById("myWordsToCount");
    var wordcount = document.getElementById("wordcount");

    myWordsToCount.onkeyup = function() {
        var value = myWordsToCount.value;
        var strings = String(value).replace(/ +(?= )/g,'').split(' ');
        wordcount.innerHTML = strings.length;
    }