Character Count Using JavaScript

Hey Guys , In Today’s Blog We are going to see How to create an Character count Using Java Script. For that the respective sources codes were given below along with the respective preview of output section. So you can make use of that.

Now The Project is going to create and for that we are first adding an HTML Code.

HTML CODE :

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-sm-offset-3">
      <h1 class="page-header">Count characters in textarea</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-sm-offset-3">
      <form action="#" class="form-horizontal">
        <div class="form-group">
          <label for="extextarea">Example Textarea</label>
          <textarea name="extextarea" id="charcount" cols="30" rows="5" class="form-control" placeholder="Example Textarea"></textarea>
          <p class="lead"><span class="label label-info" id="charNum">500 characters left</span></p>
        </div>
      </form>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-sm-offset-3">
      <p class="text-muted text-center"><a href="http://tanjuyildiz.com">Tanju Yıldız</a></p>
    </div>
  </div>
</div>

In this HTML code , We first begin with adding div class with a name container and then we creating additional to more classes with different set of names. Now the heading is added with H1 tag and then we closed the first set of div class.

In second part , Again We created an div class with row as name and then a form tag is implemented to work with text area. Now the actual text area in which the paragraphs are entered for word count is added with text area tag , id , rows and columns , placeholder etc…

Then lastly we create a separate div class in which the the word count will be displayed and the div class which were opened is closed now.

So that’s of for HTML , We skipped the CSS part here has it contains some Bootstrap values which automatically aligns contents and colors for it. Now we are jumping into Java Script for making the paragraph to count the words entered.

Javascript Code:

$(document).ready(function(){
  $('#charcount').keyup(function () {
    var max = 500;
    var len = $(this).val().length;
    if (len >= max) {
      $('#charNum').text(' you have reached the limit');
    } else {
      var char = max - len;
      $('#charNum').text(char + ' characters left');
    }
  });
});

Now the JS code is added. In this code , First we calling out an function and inside of function we declaring the values to run. Now we calling out the text area ID and declaring the following sets to store the value and printing the length.

5+ HTML CSS project With Source Code

$(document).ready(function(){
  $('#charcount').keyup(function () {
    var max = 500;
    var len = $(this).val().length;

Second , Here we declared the paragraph word count to default value which is 500. Then Comparing it with if else loop and printing if the value entered by user is greater than the default value then it might print ” You have reached the limit” , Else the characters might me reduced from the fixed default values. The code of reducing count is given down.

if (len >= max) {
      $('#charNum').text(' you have reached the limit');
    } else {
      var char = max - len;
      $('#charNum').text(char + ' characters left');
    }
  });
});

So that’s of for JS , Now We have completed adding the source codes for the project and hence we can make a preview of our project in the given output section.

FINAL-OUTPUT:

Now We have Successfully created our Character Count Using JavaScript. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

Portfolio Website Using HTML ,CSS and Javascript Source Code

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

REFER CODE – Tanju

WRITTEN BY – Ragunathan S