Build a Word and Character Counter with JavaScript: A Step-by-Step Guide!
Hi, I am Prem Shinde a Full Stack Web developer and Technical Content Writer
Welcome, everyone! Today, we'll build a powerful Word and Character counter using JavaScript. Throughout this blog, we'll explore a variety of string operations, such as String.trim(), String.Split, and we'll learn how to effectively convert the user input into an array. So, buckle up and get ready to dive into the world of JavaScript!
Without wasting a second, let's code!!
To kick off our project, let's start with the HTML code. We'll begin by creating h1 tag, followed by three divs. The first div will be designated for the text area where users can input their text, while the other two divs will display the word count and character count, respectively. Together, these components will create a beautiful and functional user interface
<!DOCTYPE html>
<html lang="en">
<head>
<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>Words and Characters Counter</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="heading">LETS COUNT</h1>
<div class="main-div">
<textarea name="content" id="content" oninput="count()" placeholder='Enter the text here...'></textarea>
</div>
<div class="counter">
<div class="words-count">
<p id="words-count"></p>
<p>words count</p>
</div>
<div class="character-count">
<p id="character-count"></p>
<p>character count</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
We have linked Styles.css and script.js. There are three divs; one div is for the textarea, and the other two divs are for the counters that we will get while the user is entering input. The oninput event calls a function named counter() during user input, whenever the user will hit keys on keyboard that function will get triggered.
Now, the output is looking like this before CSS-->
I understand that the current appearance may not be visually appealing. To enhance the aesthetics, let's apply some CSS and make it look more beautiful and engaging ✨
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;1,300&family=Tilt+Neon&display=swap');
*{
padding: 0;
margin: 0;
}
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #dcedc2;
text-align: center;
flex-direction: column;
font-family: 'Poppins', sans-serif;
overflow: hidden;
}
.heading{
font-size: 3rem;
margin-bottom: 3rem;
}
#content{
height: 300px;
width: 90vw;
max-height: 300px;
min-height: 300px;
max-width: 600px;
min-width: 450px;
padding: 5px;
background-color: rgba(255,255,255,0.09);
border: 1px solid rgba(255,255,255,0.2);
}
#content::placeholder{
font-family: 'Poppins', sans-serif;
}
#content:focus{
outline: 1px solid rgba(255,255,255,0.5);
}
.counter{
display: flex;
display: flex;
justify-content: space-around;
align-items: center;
height: 4rem;
width: 450px;
}
.words-count{
display: flex;
justify-content: center;
flex-direction: column;
height: 4rem;
width: 200px;
background-color: black;
color: white;
}
.character-count{
display: flex;
justify-content: center;
flex-direction: column;
height: 4rem;
width: 200px;
background-color: black;
color: white;
}
p{
font-size: 1.14rem;
}
Now that we've applied our CSS styling, the end result is a stunning visual display. So, without further ado, let's take a look at the output and see how it all comes together!
The output is simply stunning!
Let's add the boss JavaScript now, which will enhance the output and make it more user-friendly!
The very first step will be creating a function, we will create a fat arrow function here using fat arrow(=>). Now that we've created two divs in our HTML code, we need to retrieve those elements using the following code: getElementById('Id'). This code allows us to access and manipulate those specific elements.
To get the user's input we will simply do textArea_Element.value; and now we got the value which is const text here.
Now, to count the words written by user we will first trim() the text, then replace the character that is not a word character, underscores, and white spaces using regular expression (/[^\w\s]|_/g, here g is indicating that all occurences should be matched. Now to convert it into an array we will use split() method which converts the string into an array, here we have to split the space we will use regular expression /\s+/ to split the words by the spaces between words. Finally we got the words array and now we just have to take the length of an array to count the number of words.
Counting a character is super easy, first to trim the spaces before and after the string, and replace the space present between the words by replace(/\s+/) a regular expression.
We got the words count and characters count, In that two divs words count and characters count there is an <p> tag in which we have to display the counting. Finally, upon loading the page, the current count will be displayed. To achieve this, we'll simply call the function count(). With this small but crucial step, our project will be complete and ready to use!
const count = ()=>{
const text = document.querySelector('#content').value;
const words = document.getElementById('words-count');
words_arr = text.trim().replace(/[^\w\s]|_/g, "").split(/\s+/);
words.innerHTML = words_arr.length;
const character = document.getElementById('character-count');
character.innerHTML = text.replace(/\s+/g,'').trim().length;
}
count()
Our project is now fully equipped and ready to use, and user-friendly design, it's sure to provide an amazing user experience. So, without further adolet's take a look at the output and appreciate the stunning results.
Our project has turned out to be truly stunning! I would be grateful if you could like this blog post and show your support. Also, don't forget to follow me on Twitter and LinkedIn to stay updated with my latest work. Thank you for your appreciation!!
