Word Counter For Text Area Using HTML & JavaScript

Hello everyone. Welcome to today’s tutorial on Codewithrandom. We’ll learn how to make a Word Counter For Text Area Using HTML & JavaScript which is basically a project in which there will be an indicator that counts the word written in the text area and shows the user.

In Today’s session, We will use HTML, CSS, and JavaScript to complete this Project. Here the HTML (Hypertext Markup Language) will help us to create the structure with the necessary elements & attributes.

Next comes the CSS (Cascading Stylesheet) which will help us to style and align the defined structure in the HTML code. And in last the JS (JavaScript) makes the project responsive and lets the user know that it’s working and add some logic to it.

I hope you have got an idea about the project.

HTML Code for Word Counter

<div id="content_wrapper" class="row">
  <div class="form-group col-md-6">
  <textarea class="form-control" name="comment" id="comment" cols="30" rows="5" placeholder="Post your comment here"></textarea>
    <span id="minimum_count" class="">Minimum of 150 characters</span>
  <span id="text_count" class="pull-right"></span>
    <div class="clearfix"></div>
    <button class="btn btn-success form-control col-md-6" id="submitBtn" type="Submit">Post Comment</button>
</div>
</div>

In this HTML Code, we have fully defined the structure for the text counter in which we have designed a textbox and a button. This is a basic and simple HTML code to set up the structure. Let us style the project using CSS code to align the defined elements in the HTML code.

50+ Html ,Css & Javascript Projects With Source Code

CSS Code for Word Counter

#content_wrapper {
  margin: 100px;
}
#submitBtn {
  border-radius: 0;
}

#text_count {
  float:right
}
#minimum_count {
  color: Red;
}

In this CSS code, we have just aligned the button, counter & minimum count section. With color, margin, radius, and a particular position for the text count. Let us code the JavaScript part to make it responsive from user side.

JavaScript Code for Word Counter (include jquery link form codepen)

let total_count = 200;
let text_count_content = $('#text_count').html('Text remaining' + ' ' + total_count);

$('#comment').keyup(function(){
  let length = $('#comment').val().length;
  let remaining = total_count - length;
  
  $('#text_count').html('Text remaining' + ' ' + remaining);
  
  if(length >= 150){
    $('#minimum_count').css('color', 'green');
  }else {
      $('#minimum_count').css('color', 'red');
  }
});

In this JavaScript code, we have set up a logic in which we have set a word count. And then defined it to indicate on the screen. Then we added a logic that if the word count is greater than 150 the count indicator will change its color. Let us see the final output of the project Word Counter For Text Area Using HTML & JavaScript.

Portfolio Website using HTML and CSS (Source Code)

Final Output

We have successfully created our  Word Counter For Text Area Using HTML & JavaScript. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

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

Thank you And Keep Learning!!!

Written By – Harsh Sawant

Code By – @harshh9