Displaying The Character Count of TextArea                                       using JavaScript

 <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

CSS Code for Character Count

@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

JavaScript Code For Character Count

JQuery  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