Open In App

Word and Character Counter using HTML CSS and JavaScript

Improve
Improve
Like Article
Like
Save
Share
Report

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">GeeksforGeeks</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">GeeksforGeeks</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>


Output:

Word and character Counter



Last Updated : 19 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads