Word and Character Counter using HTML CSS and JavaScript

Last Updated : 25 Jul, 2024

Word and Character Counter is a web application used to count words and characters in a textarea field. HTML, CSS, and JavaScript is used to design the Word and Character Counter. In the textarea field, the user can write anything and this application shows how many words are added by the user and how many characters are added in the text area.

Approach

Create a 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 the paragraph element.
In the paragraph element, we provide two <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.

<!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>Word and Character count</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.

* {
    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.

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.

<!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 #010000;
            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: #f1fce1;
            outline: none;
            border: 2px solid #010000;
        }

        #area:focus {
            border: 2px solid #010000;
            outline: none;

        }

        .result {
            color: #010000;
            font-size: 20px;
            width: 401px;
            text-align: center;
            font-weight: 700;
            padding: 5px;
            border: 2px solid #010000;
            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:#010000">
                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>