How to Create a Word Counter in JavaScript

How to Create a Word Counter in JavaScript (Free Code)

How to Create a Word Counter in JavaScript

Many times word count needs to be done between different projects. In all these cases, this type of JavaScript Word Counter will help you completely. In this tutorial, you will learn how to create Word Counter JavaScript. 

A lot of times we show character limits or word limits in different input boxes. For example, in the case of Twitter, there is a character limit.

Although I have shared a tutorial before where I have shown how to create a character limit input box. This tutorial will show you how to count words and characters. That means you will see both a project word and a character.

Word Counter JavaScript

Below is a preview that will help you to know how this Word Counter javascript works. Below you will find the required source code. 

To create this JavaScript Word Counter project I first created an input box using HTML and created a display. The input box is created using Textarea. 

Then I designed using CSS. After all, I have implemented this project (word counter HTML code) with the help of JavaScript.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

As you can see above, I used the background-color blue of a webpage. I made a box on top of it. At the top of the box is a display. This display is divided into two parts. 

In the first part, you can see the information of Word Counter. In the second part, the information of the character counter can be seen. These values ​​will change when I change something in the input box. 

How to Make a Word Counter in JavaScript

This JavaScript Word Counter is very easy to make. I created it with some amount of HTML and some amount of CSS. A little bit of JavaScript has been used to make this counter project work.

The background of this input area is white and the text color is black. A shadow has been used around the box to create a beautiful banner that will further highlight this Word Counter in JavaScript on the webpage.

1. Basic structure of Word Counter

The basic structure of this word counter has been created using the following code. The background color of the webpage is blue.

<div class=”wrapper”>
</div>
* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 font-family: “Poppins”, sans-serif;
}
body {
 background-color: #8bc1f7;
}
.wrapper {
 position: absolute;
 width: 75vmin;
 transform: translate(-50%, -50%);
 top: 50%;
 left: 50%;
}
Basic structure of Word Counter

2. Word Counter Result Box

Now I have created a display in which all the results can be seen. As I said before, this display is divided into two parts. To see the result of one-word count and to see the result of another character.

<div class=”count”>
  <div>
    <h5 id=”word-count”>0</h5>
    <p>Words</p>
  </div>
  <div>
    <h5 id=”charac-count”>0</h5>
    <p>Characters</p>
  </div>
</div>
.count {
 background-color: #0547ad;
 width: 100%;
 padding: 7px;
 position: relative;
 display: flex;
 font-family: sans-serif;
 justify-content: space-around;
 text-align: center;
 border-radius: 5px 5px 0px 0px;
}
.count p {
 color: #ceced7;
}
.count h5 {
 color: #ffffff;
 font-size: 22px;
}
Word Counter Result Box

3. Create an input box using Textarea

Now an input space has been created. This input space has been created using Textarea.

<div class=”container”>
  <textarea id=”input-textarea” rows=”12″ placeholder=”Start Typing here…”></textarea>
</div>

The box is designed with the following CSS in which the Textarea can be seen. The background color of the box is white and padding has been used to adjust its size.

.container {
 background-color: #ffffff;
 padding: 30px 20px 20px 20px;
 border-radius: 0px 0px 8px 8px;
 box-shadow: 0 30px 50px rgba(30, 21, 49, 0.3);
}
Create an input box using Textarea

The following code is designed for Textarea. Input box width: 100% used here. This allows us to input across almost all areas. Max-height: 280px of the input box is used here and a shadow is used all around.

textarea {
 width: 100%;
 border: none;
 resize: none;
 outline: none;
 font-size: 16px;
 line-height: 28px;
 padding: 10px;
 max-height: 280px;
 color: #0e101a;
 box-shadow: 0 20px 65px rgba(61, 139, 190, 0.33);
}
designed for Textarea

4. Activate Word Counter with JavaScript

Even if you design everything above, now you have to implement this Word Counter javascript. Only 3 lines of JavaScript have been used for this.

First I set the constants of some HTML elements one by one. Here the constant of the ID functions of input Textarea, word counter display, and character counter display is determined. Because we cannot use any HTML element directly in JavaScript.

let inputTextArea = document.getElementById(“input-textarea”);
let characCount = document.getElementById(“charac-count”);
let wordCount = document.getElementById(“word-count”);

The following has been arranged to display the value of textarea in the display using JavaScript.

inputTextArea.addEventListener(“input”, () => {
//Here the length of the value of the input box is calculated.
//Arrangements have been made to display that value in the webpage with the help of textContent
  characCount.textContent = inputTextArea.value.length;
//Now we have to count the words
//The trim() method removes whitespace from both ends of a string.
  let txt = inputTextArea.value.trim();
//split(/\s+/); That code will split the full classname of and element into an array containing every class
  wordCount.textContent = txt.split(/\s+/).filter((item) => item).length;
});
Activate Word Counter with JavaScript

JavaScript Word Counter (Source Code)

Hopefully, you didn’t have any trouble understanding the HTML, CSS, and JavaScript above. If you only want to get the source code of this project (Count Words in JavaScript) then you can use the following code section. 

In this code section, I have put all the code together. There are many beginners who cannot assemble all the codes together.

You copy the code here and you can use it in any of your own work. The most interesting thing here is that I have included HTML CSS JavaScript in a file. As a result, you do not need to create multiple files.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

We hope you enjoy the above tutorial on how to create this Word Counter javascript. Before I have shared with you many more types of character counters, tutorials of the limit character input box.

If you like this JavaScript Word Counter, you can see those designs. Please comment on how you like this Word Counter in JavaScript. 

If you want to know more, you can let me know by commenting on my Instagram. You can download the JavaScript Word Counter technology by clicking the source code below.