How to Create a Word Counter in JavaScript

#javascript #webdev #beginners #html

This is a simple JavaScript project that will count your input words and characters. JavaScript Word Counter is a common web element that we see in various websites.

One of the best examples of this is Twitter. You can count the words in a box using javascript word count textarea. We have made this design in many more advanced ways.

Here you can count the characters with the word. When you input something into taxtarea, you can see how many characters and how many words it contains.

Word Counter in JavaScript

There are many tutorials on this topic on the internet but most of them are designed in a very complex way. If you want to create a Word Counter app using pure JavaScript then this article will help you.

Simple there is a box and there is a display. The word and character information of the input text in that input box can be seen in the display. Watch its live demo to learn how it works.

If you are a beginner and are wondering how to make it then there is no reason to worry. Because I'm here. I will give you all the code and step by step tutorial to make this JavaScript Word Counter.

HTML Code

The following html code adds the basic structure and simple information of Word Counter or Character Counter.

First there is the display for viewing the results and then there is the input box.

<!-- Basic area of the project -->
<div class="wrapper">
<!--Result box-->
 <div class="count">
<!--Word count results-->
   <div>
     <h5 id="word-count">0</h5>
     <p>Words</p>
   </div>
<!--character count results-->
   <div>
     <h5 id="charac-count">0</h5>
     <p>Characters</p>
   </div>

 </div>

<!--A place to input content-->
 <div class="container">

  <textarea id="input-textarea" rows="12" placeholder="Start Typing here..."></textarea>

 </div>

</div>

CSS Code

Now you have to design this Word and Character counter with some css.

The first webpage has been designed and a color has been added in the background.
Then the result view box has been designed and the text in it has been designed. Border-radius: 5px 5px 0px 0px is used for the beauty of the display.
Then the input box is designed. Here textarea is used to create the input box.

/*Basic design of webpage*/
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}

body {
background-color: #8bc1f7;
}
/*Basic Area Design*/
.wrapper {
position: absolute;
width: 75vmin;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
/*Design of the place to see the result*/
.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;
}
/*The text of the result*/
.count p {
color: #ceced7;
}
.count h5 {
color: #ffffff;
font-size: 22px;
}
/*input place design*/
.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);
}

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);
}

JavaScript Code

Now you need to activate this project (How to Create a Word Counter) using very little JavaScript.

The global constants of some id functions have been determined using the first code line.
Then the character counter is activated. The amount of input character is counted by 'inputTextArea.value.length'. Then with the help of "textContent" it is arranged to show in the webpage.
Then Word Count is activated using txt.split method.

//refer div
let inputTextArea = document.getElementById("input-textarea");
let characCount = document.getElementById("charac-count");
let wordCount = document.getElementById("word-count");

 inputTextArea.addEventListener("input", () => {
//value-length command specifies the maximum value length in bytes
//textContent sets or returns the text content of the specified node
   characCount.textContent = inputTextArea.value.length;
//trim() method removes whitespace from both ends of a string
   let txt = inputTextArea.value.trim();
//txt.split(/\s+/) code will split the full classname of an element into an array containing every class
   wordCount.textContent = txt.split(/\s+/).filter((item) => item).length;
 });