Live Words Counter Tool Using JavaScript and HTML

Hi friends, If you are a blogger and you are looking for a tool that can help you to count the number of words in your blog post.

Here is the demo of the tool - Demo

If you also want to make your own live word counter tool then this tutorial will help you to build your own live word counter tool using JavaScript and HTML. Read this tutorial from start to end.


First, we will create an HTML page so that we can get the input from the user to count the number of words.

HTML Code:

       
<div>


<textarea></textarea>
<br><br>
<span></span>

</div>
 

CSS Code: 

       
textarea{
  width: 900px;
  border: 1vh solid blue;
  height: 50vh;
}
div{
  text-align: center;
  margin-top: 10vh;
}

JavaScript Code:

       
function countWords(text) {
 return text.match(/\w+/g).length;
}

let ta = document.querySelector('textarea');
let span = document.querySelector('span');
ta.addEventListener('input', () => {
  span.innerText = 'Total Words:' + countWords(ta.value);
});