Created
September 18, 2012 16:57
-
-
Save norcross/3744288 to your computer and use it in GitHub Desktop.
Word Count JS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background-color: #FFFFFF; | |
| color: #111; | |
| font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; | |
| font-size: 14px; | |
| line-height: 20px; | |
| margin: 0; | |
| } | |
| #wrapper { | |
| width: 500px; | |
| margin: 0 auto; | |
| } | |
| h1 { | |
| font-size: 24px; | |
| line-height: 32px; | |
| font-weight: 700; | |
| text-align: center; | |
| } | |
| #counter-text { | |
| font-family: sans-serif; | |
| width: 500px; | |
| height: 100px; | |
| margin: 0 auto; | |
| } | |
| input.counter-clear { | |
| background: none repeat scroll 0 0 #333333; | |
| border: 1px solid #CCCCCC; | |
| border-radius: 3px 3px 3px 3px; | |
| color: #FFFFFF; | |
| font-size: 0.875em; | |
| font-weight: 300; | |
| padding: 5px 7px; | |
| text-decoration: none; | |
| cursor: pointer; | |
| margin: 0 auto; | |
| display: block; | |
| } | |
| span.counter-notice { | |
| background: none repeat scroll 0 0 #FFC8C8; | |
| border: 1px solid #FF3232; | |
| border-radius: 3px 3px 3px 3px; | |
| color: #FF0000; | |
| font-size: 0.875em; | |
| font-weight: 300; | |
| padding: 5px 7px; | |
| text-decoration: none; | |
| cursor: pointer; | |
| margin: 20px auto; | |
| display: block; | |
| width: 150px; | |
| text-align: center; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Counter Test</title> | |
| <link media="all" type="text/css" href="counter.css" rel="stylesheet"> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> | |
| <script src="counter.js" type="text/javascript"></script> | |
| </head> | |
| <body> | |
| <div id="wrapper"> | |
| <h1>Word Counting</h1> | |
| <textarea id="counter-text"></textarea> | |
| <div class="counter-data"> | |
| <ul> | |
| <li>Total Words: <span id="counter-words">0</span></li> | |
| <li>Total Characters: <span id="counter-chars">0</span></li> | |
| </ul> | |
| </div> | |
| <input class="counter-clear" type="button" value="Clear Text"> | |
| <span class="counter-notice" style="display:none;">Cleared!</span> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //******************************************************** | |
| // function call for word count | |
| //******************************************************** | |
| counter = function() { | |
| var value = $('textarea#counter-text').val(); | |
| if (value.length === 0) { | |
| $('span#counter-words').html(0); | |
| $('span#counter-chars').html(0); | |
| return; | |
| } | |
| var regex = /\s+/gi; | |
| var wordCount = value.trim().replace(regex, ' ').split(' ').length; | |
| var totalChars = value.length; | |
| $('span#counter-words').html(wordCount); | |
| $('span#counter-chars').html(totalChars); | |
| }; | |
| jQuery(document).ready(function($) { | |
| //******************************************************** | |
| // loading word count function on user input | |
| //******************************************************** | |
| $('textarea#counter-text').val(''); | |
| $('textarea#counter-text').change(counter); | |
| $('textarea#counter-text').keydown(counter); | |
| $('textarea#counter-text').keypress(counter); | |
| $('textarea#counter-text').keyup(counter); | |
| $('textarea#counter-text').blur(counter); | |
| $('textarea#counter-text').focus(counter); | |
| //******************************************************** | |
| // clear count on button | |
| //******************************************************** | |
| $('input.counter-clear').click( function() { | |
| $('textarea#counter-text').val(''); | |
| $('span#counter-words').html(0); | |
| $('span#counter-chars').html(0); | |
| // display notification | |
| $('span.counter-notice').fadeIn(1200).delay(500).fadeOut(1200); | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you for your code.
But I have a problem.
I just copy your code and paste in my app.
When I arrive at the page, it does not work.
It works only after page is refreshed.
If you don't mind, please help me.
Thanks in advance.