In this post you’ll learn how to create a live word counter using HTML, CSS and JavaScript. This guide will walk you through creating a word counter that dynamically tracks the number of words. We'll explore how it works on both keypress (on input) and button clicks, providing a live update.
Video Tutorial of Live Word Counter Using JavaScript.
Word Counter.
File structure:
- Create one folder.
- Open it in your code editor.
- Create two files within the folder with name index.html and index.css
I’ve integrated JavaScript within the HTML file.
Let’s create a live word counter using HTML CSS and JavaScript, step by step.
Step 1: Create a simple design.
Create a simple design for word counter using HTML and CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Word Counter | Maketechstuff.com</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="output">
<span>Words: </span>
<span class="counter">0</span>
</div>
<div class="textarea_box">
<textarea id="textarea" cols="30" rows="10"></textarea>
</div>
<button type="button" class="button">Count</button>
</div>
</body>
</html>
CSS
*{
padding: 0px;
margin: 0px;
}
body{
width: 100%;
height: 100vh;
background-color: #ef5350;
position: relative;
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
width: 400px;
background-color: #fff;
padding: 15px 30px;
border-radius: 10px;
text-align: center;
}
.output{
font-size: 30px;
margin-bottom: 10px;
}
.textarea_box{
width: 100%;
border: 2px solid #ef5350;
display: inline-flex;
}
textarea{
font-size: 25px;
padding: 10px;
border: none;
outline: none;
}
button{
width: 100%;
background-color: #ef5350;
color: #fff;
font-size: 25px;
font-weight: bold;
padding: 10px;
margin: 10px 0px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: 0.2s;
}
button:active{
transform: scale(0.95);
}
Output:
Step 2: Create a live word counter functionality using JavaScript.
We'll create a function to count the words, which will be called both when a button is clicked and when input is entered in the text area.
Within this function, we'll first split the input value, filter out any extra spaces, trim any leading or trailing whitespace, count the words by splitting the trimmed and filtered value, and finally store the word count within an HTML element.
1. Splitting the Textarea Value:
We begin by using the split() method to divide the text within the textarea into individual words, creating an array of these words.
2. Filtering and Combining Words:
We iterate through the array using a for loop. For each array element, we check its length. If the length is greater than zero (meaning it's not an empty), we concatenate it with a single space to the words variable (new variable).
This approach ensures consistent spacing between words, even if the user has entered multiple spaces.
Also read: Replace multiple spaces between words with single space using JavaScript.
3. Trimming and Counting Words:
After processing all array elements, the words variable may contain a trailing space due to the concatenation process.
To accurately count the words, we first use the trim() method to remove any leading or trailing spaces from the words variable.
Next, we apply the split() method again, this time using a space as the delimiter, to create a new array containing the individual words.
Finally, we determine the number of words by simply accessing the length property of this array.
This word count can then be displayed within the desired element using JavaScript.
JavaScript
let counter = document.querySelector(".counter");
let textarea = document.getElementById("textarea");
let button = document.querySelector(".button");
button.addEventListener("click", word_counter);
textarea.addEventListener("input", word_counter);
JavaScript
// Example 1
function word_counter() {
counter.innerHTML = 0;
let words = "";
let array = textarea.value.split(" ");
for (let i = 0; i < array.length; i++) {
const element = array[i];
if (element.length != 0) {
words += element + " ";
counter.innerHTML = words.trim().split(" ").length;
}
}
}
Output:
You can count word with more methods or techniques.
Example 2:
JavaScript
// Example 2
function word_counter() {
counter.innerHTML = 0;
let word_count = 0;
let array = textarea.value.trim().replace(/\s+/g, " ").split(" ");
console.log(array)
word_count = array.length;
if(array[0].length === 0){
word_count = 0;
}
counter.innerHTML= word_count;
}
Example 3:
JavaScript
// Example 3
function word_counter() {
let word_count = 0;
let array = textarea.value.trim().split(" ");
let new_array = array.filter(function(array){return array})
word_count = new_array.length;
counter.innerHTML = word_count
}
So that's how you can create a live word counter using HTML CSS and JavaScript. If you have any questions or suggestions you can write in the comment section.
You may like:
- How to create a character counter using JavaScript.
- How to create a increment and decrement counter using JavaScript.
- How to create a countdown timer with fade out animation using JavaScript.
- How to add and show the character limit inside a textarea using JavaScript.
- How to create a simple calculator using JavaScript.
- Create a tags input box using JavaScript.
Share your thoughts.