Unit 2A Question 5
HTML
<p><textarea id="myWordsToCount" rows="5" cols="60"></textarea><br>
</p>
The wordcount is: <span id="wordCount">0</span><br>
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
/********************************************************************
*
* Fourth problem: Counting words and whitespace!
*
* Extra Credit: Excluding whitespaces
********************************************************************/
var myTextareaElement = document.getElementById("myWordsToCount");
myTextareaElement.onkeyup = function(){
var count = document.getElementById('myWordsToCount');
var words = document.getElementById('wordCount');
count.onkeyup = function(){
var value = trim(count.value);
//remove extra spaces and replace with one space
var strings = String(value).replace(/ +(?= )/g,'').split(' ');
words.innerhtml = strings.length;
}
}