How to create a Word Counter Using JavaScript

In this tutorial, we will learn how to create a Word Counter using JavaScript. A word counter is a valuable tool for anyone who needs to keep track of the number of words in a given text, making it particularly useful for writers, bloggers, and students.
By the end of this tutorial, you will be able to count a word in your word counter.
Let’s get started!

---

Create a Word Counter Using JavaScript

Now let’s start with code and detailed explanation. The code below is your JavaScript file code.

let input = document.getElementById("input");
let button = document.getElementById("button");
let Result = document.getElementById("wordCount");

• Firstly, we declare three variables that store a reference to the HTML element with the ID ‘input’, ‘button’, and ‘wordCount’.
• ‘input’: A text input field where users can type their text.
• ‘button’: A button that, when clicked, triggers the word count calculation.
• ‘wordCount’: A container (like a span) displaying the word count result.

button.addEventListener("click", () => {
    // logic for word count
}

• We have to create an event listener for the ‘button’ element. The event listener listens for the ‘click’ event and triggers the provided callback function when the button is clicked.
• Now the rest of the code will be inside this event listener.

let str = input.value;

• This line retrieves the current value of the ‘input’ element (the text entered by the user) and stores it in the variable ‘str‘.

let wordsList = str.split(" ");

• Now this line splits the string ‘str’ into an array of words using a space (” “) as the delimiter. The resulting array is stored in ‘wordList’.

let count = wordsList.length;

• This line counts the number of words in ‘wordList’ by getting the length of the array and stores it in the variable ‘count’.

Result.innerHTML = count; 

• Additionally, this line updates the inner HTML of the ‘Result’ element to display the word count.

So this is your JavaScript code for creating a word counter.
Now let’s discuss our HTML and CSS code. In your HTML code, we have to declare one div with the id ‘container’. Inside this div create one textarea element with the id ‘input’ and add one button with the id ‘button’. In the last, we have to create another div to show word count, so inside this div create a span element with id ‘wordCount’. Here below I provide my HTML code for reference.
Also, do not forget to provide a link for the external JavaScript file. And in your CSS file, give style according to your choice.

<div class="container">
    <h1> Word Counter </h1>
    <p>
        Type in the textbox and click on the button to count the words
    </p>
    <textarea id="input" rows="10"></textarea>
    <button id="button">Count Words</button>
    <div class="result">
        Words: <span id="wordCount">0</span>
    </div>
</div>
<script src="WordCounter.js"></script>

Output:

Now let’s focus on output:

https://drive.google.com/file/d/1BDvqKg8ze9G7Ch8dk4uLrRiQh73qa9yr/view?usp=drive_link

In the above link, you can see the video of a word counter. Therefore, you can easily create a word counter using JavaScript by understanding this tutorial.