Build a Live Word Counter in Textarea in Browser Using jQuery and Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a live word counter in textarea in browser using jquery and javascript . All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

 

index.html

 

 

<!DOCTYPE html>
<html>
  <head>
    <title>Currency Converter in Javascript</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
  </head>
  <body>
    <div style="text-align: center;">
        <textarea id="textcontent" style="width: 455px; height: 200px;"></textarea>
        <div id="countWord"></div>
     </div>

</body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
      function count_word( val ){
    var wom = val.match(/\S+/g);
    return {
        words : wom ? wom.length : 0
    };
}


var textContent = document.getElementById("textcontent");
var showWordCount   = document.getElementById("countWord");

textContent.addEventListener("input", function(){
  var v = count_word( this.value );
  showWordCount.innerHTML = (
      "<br>Words: "+ v.words
  );
}, false);
  </script>
</html>

 

See also  jQuery Camera Flash Light Plugin to Add Blinking Effect Animation to Image File in Browser Using HTML5 & Javascript Full Project For Beginners

 

 

Now if you open the index.html file inside the browser you will see the below screenshot

 

 

 

 

Leave a Reply