In today’s tutorial, we will create a simple live word counter. This counter counts the number of words as you type them. To make things a little fun, we will also be counting the number of characters. If you are a javascript beginner looking for some vanilla javascript project to improve your skills, then this project is perfect for you. I also have a similar project – A live character counter. You can check it out here.
Video Tutorial:
If you would like to code along with me, I have a video tutorial on my youtube channel. You can check it out down below. Also, If you like the tutorial, please do subscribe to my youtube channel.
Folder Structure:
Before we move on to the actual coding, let us take a look at the folder structure. Create a project folder Word Counter. Next, add three files to this folder. These files are – First, the HTML file index.html. Second, The CSS file to add some style to our counter. This file is style.css Next, to add functionality to the javascript file script.js.
HTML:
We start with the HTML section. Copy-paste the code provided below into your HTML file.
The HTML code consists of a wrapper div. The wrapper div contains a container div and count div. Inside the container, we have a text area that has 12 rows. The count div consists of headings with id – word-count and charac-count.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="container">
<textarea
id="input-textarea"
rows="12"
placeholder="Start Typing here..."
></textarea>
</div>
<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>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
Â
CSS:
Now coming to the CSS Code, we do a basic CSS reset to remove the paddings and the margins. I am using the ‘Poppins’ font. You are free to use and font of your choice. The box-sizing is set to the border-box.
For the background color of the body, we use #8b5ceb.
We centre the wrapper using the absolute positioning and the translate method.
Other Tutorials You Might Like:
We add some style to the container by adding some paddings and a dark box shadow. We add a similar shadow to the count div.
For the text area, remove the borders and outlines. To avoid the resizing of the textarea we set the resize to none.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #8b5ceb;
}
.wrapper {
position: absolute;
width: 90vmin;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.container {
background-color: #ffffff;
padding: 50px 30px 80px 30px;
border-radius: 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;
color: #0e101a;
}
.count {
background-color: #000000;
width: 80%;
padding: 20px;
position: relative;
transform: translate(-50%, -50%);
left: 50%;
display: flex;
justify-content: space-around;
text-align: center;
border-radius: 5px;
box-shadow: 0 20px 40px rgba(30, 21, 49, 0.4);
}
.count p {
color: #a0a0c0;
}
.count h5 {
color: #ffffff;
font-size: 32px;
}
Â
Javascript:
To add functionality to this counter, we add some Javascript code. Copy the code below and paste it into your script.js file.
We get the text area, charac-count div and word-count div and assign them to variables. Next, we add an ‘input’ event listener to the inputTextArea.
The code below calculated the number of characters by calculating the length of the input string.
Create Responsive Hamburger Menu Using HTML,CSS and JavaScript
To count the number of words we first remove the whitespaces from both the sides of the string we use the trim(). We use the split() that splits the string at spaces and returns an array of substrings. To remove the empty strings from the array we use the filter method. And lastly, we calculate the length of this array. the length of this array is our word count.
let inputTextArea = document.getElementById("input-textarea");
let characCount = document.getElementById("charac-count");
let wordCount = document.getElementById("word-count");
inputTextArea.addEventListener("input", () => {
characCount.textContent = inputTextArea.value.length;
let txt = inputTextArea.value.trim();
wordCount.textContent = txt.split(/\s+/).filter((item) => item).length;
});
Â
We just have to change the text content of charac-count div and word-count div to these values. And we are done. The live word character counter is now ready. Wasn’t that easy. You can go ahead and customize the word counter the way you like.
If you liked the tutorial, do comment below. Also, all your suggestions and feedbacks are welcome.
How can I insert this code into Blogger? I am new to HTML, CSS, JSS.