Displaying The Character Count of a Textarea | Character Count Javascript

Displaying The Character Count of a Textarea | Character Count Javascript

Displaying The Character Count of a Textarea | Character Count Javascript


Welcome🎉 to Code With Random blog. In this blog, we learn how we create a Character Count in Javascript. We use HTML, Css, and javascript for this Character Count Javascript. I hope you enjoy our blog so let's start with a basic HTML structure for the Character Count Javascript.

HTML Code

 <div class="wrapper">  
  <h1>Displaying The Character Count of a Textarea</h1>  
  <textarea name="the-textarea" id="the-textarea" maxlength="300" placeholder="Start Typin..."autofocus></textarea>  
  <div id="the-count">  
   <span id="current">0</span>  
   <span id="maximum">/ 300</span>  
  </div>  
 </div>  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>  
There is all the HTML code for the Character Count Javascript. Now, you can see an output with Character Count Javascript then we write javascript for the Character Count Javascript.
output
Displaying The Character Count of a Textarea | Character Count Javascript

CSS code

 @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,700,300italic);  
  *, *:before, *:after {  
       box-sizing: border-box;  
 }  
  html {  
       font-size: 100%;  
 }  
  body {  
       font-family: 'Open Sans', sans-serif;  
       font-size: 16px;  
       background: #d0e6ef;  
       color: #666;  
 }  
  .wrapper {  
       max-width: 75%;  
       margin: auto;  
 }  
  h1 {  
       color: #555;  
       margin: 3rem 0 1rem 0;  
       padding: 0;  
       font-size: 1.5rem;  
 }  
  textarea {  
       width: 100%;  
       min-height: 100px;  
       resize: none;  
       border-radius: 8px;  
       border: 1px solid #ddd;  
       padding: 0.5rem;  
       color: #666;  
       box-shadow: inset 0 0 0.25rem #ddd;  
 }  
  textarea:focus {  
       outline: none;  
       border: 1px solid #d0d0d0;  
       box-shadow: inset 0 0 0.5rem #d0d0d0;  
 }  
  textarea[placeholder] {  
       font-style: italic;  
       font-size: 0.875rem;  
 }  
  #the-count {  
       float: right;  
       padding: 0.1rem 0 0 0;  
       font-size: 0.875rem;  
 }  
Css Updated output

Displaying The Character Count of a Textarea | Character Count Javascript

Javascript code

Jquery Cdn Link
//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
 $('textarea').keyup(function() {  
  var characterCount = $(this).val().length,  
    current = $('#current'),  
    maximum = $('#maximum'),  
    theCount = $('#the-count');  
  current.text(characterCount);  
  /*This isn't entirely necessary, just playin around*/  
  if (characterCount < 70) {  
   current.css('color', '#666');  
  }  
  if (characterCount > 70 && characterCount < 90) {  
   current.css('color', '#6d5555');  
  }  
  if (characterCount > 90 && characterCount < 100) {  
   current.css('color', '#793535');  
  }  
  if (characterCount > 100 && characterCount < 120) {  
   current.css('color', '#841c1c');  
  }  
  if (characterCount > 120 && characterCount < 139) {  
   current.css('color', '#8f0001');  
  }  
  if (characterCount >= 140) {  
   maximum.css('color', '#8f0001');  
   current.css('color', '#8f0001');  
   theCount.css('font-weight','bold');  
  } else {  
   maximum.css('color','#666');  
   theCount.css('font-weight','normal');  
  }  
 });  
Final output
Displaying The Character Count of a Textarea | Character Count Javascript


Now that we have completed our javascript section,  Here is our updated output with javascriptHope you like the  Character Count Javascript. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create a  Character Count Javascript using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by - Code With Random/Anki 

Code by - Patrick W.

Post a Comment

Previous Post Next Post