Simple Word Counter in Javascript with HTML & CSS

In this article, we will discuss how to create a small application that counts the number of words in the given input text. Such an application is useful when a person is asked to write something with a word limit. And the word-counter can keep a track of the same.
Here we will be using simple HTML, CSS and JavaScript to build a word counter application.

HTML

Let’s begin with the basic HTML file. Create a file named index.html in your folder and paste the code given below.

 <div class="ui-input-container">  
  <h2>Word Count</h2>  
  <label class="ui-form-input-container">  
   <textarea class="ui-form-input" id="word-count-input"></textarea>  
   <span class="form-input-label">Message</span>  
  </label>  
  <p aria-live="polite"><strong><span id="word-count">0</span> words</strong> | <strong><span id="character-count">0</span> characters</strong>.</p>  
 </div>  

CSS

Once the HTML part is done , let’s move to the CSS part. Copy paste the code given below in a new file named style.css And make sure to link this file in your HTML file.

 * {  
  padding: 0;  
  margin: 0;  
  box-sizing: border-box;  
  font-family: sans-serif;  
 }  
 .ui-input-container {  
  background-color: #fff;  
  padding: 3rem;  
  border-radius: 4px;  
  width: 50%;  
  margin: 0 auto;  
 }  
 .ui-input-container h2 {  
  font-family: sans-serif;  
  margin-bottom: 20px;  
  font-weight: 700;  
  text-transform: capitalize;  
 }  
 .ui-form-input-container {  
  position: relative;  
  font-size: 1rem;  
  margin-bottom: 15px;  
  display: block;  
 }  
 .ui-form-input {  
  padding: 13px 15px;  
  border-radius: 8px;  
  border: 2px solid #1a73e8;  
  outline: 0;  
  width: 100%;  
 }  
 .form-input-label {  
  position: absolute;  
  top: -7px;  
  left: 10px;  
  color: #1a73e8;  
  font-size: 0.85rem;  
  padding-right: 0.33rem;  
  padding-left: 0.33rem;  
  background: #fff;  
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);  
  font-family: sans-serif;  
  text-transform: capitalize;  
 }  
 .ui-form-btn {  
  padding: 13px 15px;  
  border-radius: 8px;  
  background: #1a73e8;  
  outline: 0;  
  width: 100%;  
  border: none;  
  cursor: pointer;  
  font-size: 1rem;  
  color: white;  
  font-weight: 500;  
 }  
 .error .ui-form-input,  
 .error .form-input-label {  
  border-color: #d50000;  
  color: #d50000;  
 }  
 textarea {  
  min-height: 6em;  
  max-height: 50vh;  
  width: 100%;  
 }  

JavaScript

Now comes the major part of the application. Create a file called script.js and link it in the HTML file at the bottom of the .

The challenge of the application is to count the number of words given in the text area by the user. We use .spilt() to split up the words and then count the number of words. The method purely relies on the number of spaces present in the input string, which helps us count the total number of words.

Copy paste the code given below in your script file and try to understand the logic used in the code.

<script>
 var countTarget = document.querySelector("#word-count-input");  
 var wordCount = document.querySelector("#word-count");  
 var characterCount = document.querySelector("#character-count");  
 var count = function () {  
  var characters = countTarget.value;  
  var characterLength = characters.length;  
  var words = characters.split(/[\n\r\s]+/g).filter(function (word) {  
   return word.length > 0;  
  });  
  wordCount.innerHTML = words.length;  
  characterCount.innerHTML = characterLength;  
 };  
 count();  
 window.addEventListener(  
  "input",  
  function (event) {  
   if (event.target.matches("#word-count-input")) {  
    count();  
   }  
  },  
  false  
 );  
</script>

Run the file and check if your application is working or not.

Output

Yes! It’s working perfectly.

Hope the tutorial was insightful and informative. Stay tuned for more such tutorials.