Word and Character Counter using HTML CSS and JavaScript

0 0 3 minutes read

In this article, we will see Word and Character Counter web applications using HTML, CSS, and JavaScript.

In this text box, the user can write anything the user wants and this application shows how many words are added by the user and how many characters are added in the text area.

Approach:

Create one container in which all the elements are present.
Add 1 Textarea field in which the user writes texts.
Add JavaScript logic which counts the word and character in the textbox and prints the result in one p element.
In the paragraph element, we provide 2 span elements for word counters and another for the character counters.

Example: This example illustrates the basic Word and Character Counter using HTML, CSS, and JavaScript.

HTML File:

Create one container class in which all the elements are present adding one Textarea for the user entry.
We provide 2 spans one for word counters and another for the character counters.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <title>Word and Character Counter</title>     
</head> 
<body> 
    <div class="container"> 
       <div class="heading"> 
        <h1 style="color:green">zambiatek</h1> 
        <h3><b>Word and Character count<b></h3> 
       </div> 
        <textarea id="area" 
                  placeholder="Enter your Text Here"> 
        </textarea> 
        <p class="result"> 
          <span id="word">0</span> Words and 
            <span id="char">0</span> Characters 
        </p> 
    </div> 
</body> 
</html>

CSS File:

Remove default margin and padding from the body.
Set display flex in the container and align all the items in the center by flex properties.
The rest of the elements are designed according to the developer’s needs.

CSS

* { 
    margin: 0; 
    padding: 0; 
    font-family: Verdana, Geneva, Tahoma, sans-serif; 
} 
  
.container { 
    width: 100%; 
    height: 100vh; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
} 
  
.container h1 { 
    font-size: 25px; 
} 
.container h3 { 
    font-size: 20px; 
} 
  
.heading { 
    border: 2px solid green; 
    padding: 5px; 
    font-weight: 700; 
    text-align: center; 
    width: 400px; 
} 
  
#area { 
    height: 200px; 
    width: 400px; 
    resize: none; 
    font-size: 15px; 
    font-weight: 700; 
    padding: 5px; 
    margin-top: 15px; 
    color: green; 
    outline: none; 
    border: 2px solid green; 
} 
  
#area:focus { 
    border: 2px solid green; 
    outline: none; 
} 
  
.result { 
    color: green; 
    font-size: 20px; 
    width: 401px; 
    text-align: center; 
    font-weight: 700; 
    padding: 5px; 
    border: 2px solid green; 
    margin-top: 10px; 
} 
  
#word, 
#char { 
    font-size: 25px; 
    font-weight: bold; 
    text-decoration: underline; 
}

JavaScript File:

We get character and word by document.getElementById() method.
We add an event on input and take the length of all the input content in JavaScript and the size of this content will be characters.
Use the trim and split functions for count words and lastly use a filter method that removes empty spaces between words.

Javascript

let area = document.getElementById('area'); 
let char = document.getElementById('char'); 
let word = document.getElementById('word'); 
  
area.addEventListener('input', function () { 
    // count characters  
    let content = this.value; 
    char.textContent = content.length; 
  
    // remove empty spaces from start and end  
    content.trim(); 
    console.log(content); 
  
    let wordList = content.split(/\s/); 
  
    // Remove spaces from between words  
    let words = wordList.filter(function (element) { 
        return element != ""; 
    }); 
  
    // count words  
    word.textContent = words.length; 
});

Final Code: The following is the combination of all the above.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <title>Word and Character Counter</title> 
  
    <style> 
        * { 
            margin: 0; 
            padding: 0; 
            font-family: Verdana, Geneva, Tahoma, sans-serif; 
        } 
  
        .container { 
            width: 100%; 
            height: 100vh; 
            display: flex; 
            flex-direction: column; 
            justify-content: center; 
            align-items: center; 
        } 
  
        .container h1 { 
            font-size: 25px; 
        } 
  
        .container h3 { 
            font-size: 20px; 
        } 
  
        .heading { 
            border: 2px solid green; 
            padding: 5px; 
            font-weight: 700; 
            text-align: center; 
            width: 400px; 
        } 
  
        #area { 
            height: 200px; 
            width: 400px; 
            resize: none; 
            font-size: 15px; 
            font-weight: 700; 
            padding: 5px; 
            margin-top: 15px; 
            color: green; 
            outline: none; 
            border: 2px solid green; 
        } 
  
        #area:focus { 
            border: 2px solid green; 
            outline: none; 
  
        } 
  
        .result { 
            color: green; 
            font-size: 20px; 
            width: 401px; 
            text-align: center; 
            font-weight: 700; 
            padding: 5px; 
            border: 2px solid green; 
            margin-top: 10px; 
        } 
  
        #word, 
        #char { 
            font-size: 25px; 
            font-weight: bold; 
            text-decoration: underline; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container"> 
        <div class="heading"> 
            <h1 style="color:green">zambiatek</h1> 
            <h3><b>Word and Character count<b></h3> 
        </div> 
        <textarea id="area" 
                  placeholder="Enter your Text Here"> 
        </textarea> 
        <p class="result"> 
          <span id="word">0</span> Words and 
            <span id="char">0</span> Characters 
        </p> 
    </div> 
    <script> 
        let area = document.getElementById('area'); 
        let char = document.getElementById('char'); 
        let word = document.getElementById('word'); 
  
        area.addEventListener('input', function () { 
            // count characters  
            let content = this.value; 
            char.textContent = content.length; 
  
            // remove empty spaces from start and end  
            content.trim(); 
            console.log(content); 
  
            let wordList = content.split(/\s/); 
  
            // Remove spaces from between words  
            let words = wordList.filter(function (element) { 
                return element != ""; 
            }); 
  
            // count words  
            word.textContent = words.length; 
        }); 
    </script> 
</body> 
  
</html>