How To Create Twitter Style - Remaining Character Count

Submitted by alpha_luna on Monday, April 18, 2016 - 11:38.
Are you familiar with this program? If you have an account on Twitter, you will know how it works this program. In this article, we are going to learn on How To Create Twitter Style - Remaining Character Count. This program calculates the remaining character count in Textarea by entering of the user with the use of jQuery script. Note: The max length of our character is 200. You can edit after downloading the source code below. Textarea - HTML This HTML source code it contains Textarea for calculating the remaining character count.
  2. <div style="width:600px; margin:50px; background:beige; padding:30px; border:red 1px solid; border-radius:13px;">
  3. <textarea id="text_container" cols="80" rows="4" autofocus="autofocus" onKeyup="count_remaining_character()"></textarea>
  4. <div id="character-count" align="right">200</div>
  5. </div>
jQuery Script This script will help us to calculate the number of characters entering by the user in the Textarea. It will update the user if he/she exceed to the max length and it will show in the negative number color red.
  1. <script src="js/code_js.js" type="text/javascript"></script>
  2.  
  3. <script>
  4. function count_remaining_character() {
  5.     var max_length = 200;
  6.     var character_entered = $('#text_container').val().length;
  7.         var character_remaining = max_length - character_entered;
  8.         $('#character-count').html(character_remaining);
  9.         if(max_length < character_entered) {
  10.         $('#character-count').css('color','#FF0000');
  11.         } else {
  12.         $('#character-count').css('color','#d0d0d0');
  13.         }
  14. }
  15. </script>
And, this is the style.
  1. <style type="text/css">
  2. #text_container {
  3.         padding:10px;
  4.         border:red 1px solid;
  5.         border-radius:4px;
  6.         background-color:#FFF;
  7.         cursor:pointer;
  8.         font-size:18px;
  9.         width:500px;
  10. }
  11. #text_container:focus {
  12.         outline: 0;
  13. }
  14. #character-count {
  15.         color: #A0A0A0;
  16.         padding: 15px 0px;
  17. }
  18. </style>
This is the result. Result So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you very much.
Tags
TWITTER
Character
Character Count
count characters

Add new comment

About text formats
  • 66 views