You will learn how to create word counters with the help of JavaScript. You will see that there are many websites on the internet that are much more popular for counting words or characters. I will try to explain in this tutorial a basic structure of how these designs work.
A simple word counter depending on the general JavaScript programming code. First of all, I have made a box (Textarea) here. When you write something in that box, every character you write in that box will be a live count. The counted results can be seen in the box below.
Simple Word Counter with JavaScript
Basically, this design will count the number of characters, each character you write in this box will count with space. I used a small amount of HTML and CSS code to create the box and design the background.
Here all the work is handled by JavaScript, that is, everything shown in the box that counts these words is handled by JavaScript. If you want to know better how this word (character) counter works then you can see the demo below.
See the Pen word counter by Foolish Developer (@fghty) on CodePen.
As you can see, I made a rectangular box here. When you type something in that box, it will count live. The counted results can be seen through a small box below.
In the background of this box, I have used white color and added a blue border all around to enhance the beauty. Follow the tutorial below to make this design. In this case, first of all, let me say that I have used the bootstrap CDN link. Be sure to add a link to these two in the head section of your HTML file.
Step 1: Design the background of the word counter
First of all, you create HTML and CSS files. Then copy the following HTML structure and add it to your HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* CSS Code */
</style>
</head>
<body>
<div class="column">
</div>
<script>
// Javascript code
</script>
</body>
</html>
Using the CSS code below I basically designed this word counter in the background.
* {
box-sizing: border-box;
}
body {
font: 1rem/1.5 Helvetica, sans-serif;
padding: 4.3em 0;
background-color: rgb(197, 197, 197);
}
.column {
margin: 0 auto;
max-width: 28.625rem;
width: 100%;
}
Step 2: Create word input space and count box
The following HTML code is used to create a word typing box. First of all, I have created a box here using Textarea in which you can add or type text. There is also a box to count the characters and a button to submit.
<form method="POST" action="#">
<textarea id="countfield" data-count-limit="140" rows="3"></textarea>
<p id="countlabel" class="label right countunder"><span id="countnumber">0</span> characters</p>
<input type="submit" value="Submit">
</form>
CSS code basically helps to design all the HTML codes added above. First of all, I have given a certain size of this Textarea. Its height is 200 px and I have used a blue border of 4 px.
I used the background of the submit button # 3B94D9 and used font-size: 1.125rem. If you watch the demo, you will understand that I have made a small box to show the counted words. I used a 2px border around it and kept the background white.
textarea {
border: 4px solid #3B94D9;
display: block;
font-size: 1rem;
margin: 0 0 0.694em;
padding: 0.781rem;
width: 100%;
height: 200px;
}
input[type="submit"] {
background: #3B94D9;
border: none;
cursor: pointer;
font-size: 1.125rem;
opacity: 1;
padding: 0.694rem 2.074rem;
text-transform: uppercase;
border-radius: 4px;
box-shadow: none;
color: white;
transition: opacity 0.2s linear;
}
input[type="submit"]:hover {
opacity: 0.8;
}
.label {
margin: 0 0 1.44rem;
width: 50%;
}
.label.left {
float: left;
}
.label.right {
float: right;
text-align: right;
}
.countunder {
width: 150px;
border: 2px solid rgb(21, 122, 238);
background: white;
color: #1e78bd;
padding: 10px;
font-size: 19px;
}
Step 3: Implement the word counter system using JavaScript code
So far we have only designed it using HTML and CSS code. Now we will implement it. We can write words in the designs we have made so far but they will not count. The following JavaScript helped to count.
(function(){
var countField = document.getElementById('countfield');
var countLabel = document.getElementById('countlabel');
var countNum = document.getElementById('countnumber');
function _handleKeyUp(e){
var limit = Number(this.getAttribute('data-count-limit'));
var text = this.value;
countNum.textContent = text.length;
}
countField.addEventListener('keyup', _handleKeyUp, false);
}());
I hope you have learned from this tutorial how I created this word counter with the help of JavaScript. If you have difficulty understanding, you can definitely let me know in the comments. You must let us know how you like this design by commenting on your opinion.
