Words Counter using JavaScript
Hello Guys! In this blog, I'm going to explain to you how to make a words counter using javascript. This will be a step-by-step guide including HTML and CSS. Let's get started 🚀.
Let's cover the HTML part
HTML is a markup language. We use HTML to make the skeleton of a website.
Now let's import the font awesome CDN in our HTML head tag. fontawesome is a library that is used for icons in a website.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous" />Now let's import the fonts using Google Fonts API. Below is the code for Poppins Font. Paste the below code in head tag.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">The following HTML code adds the basic structure and simple information of Word Counter Counter.
First, there is the textarea with the id 'message' to enter the text. Next, there is a <p> tag to display the word counter and character count.
<div class="container">
<h1>Word Counter</h1>
<textarea name="message" class="message" id="message" cols="50" rows="5" placeholder="Enter a message"
oninput="updateCount()"></textarea>
<p>
<span id="word-count">0</span> words |
<span id="character-count">0</span> characters
</p>
</div>Here is the Final HTML Code
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous" />
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<title>Word Counter using Javascript - @code.scientist</title>
</head>
<body>
<div class="container">
<h1>Word Counter</h1>
<textarea name="message" class="message" id="message" cols="50" rows="5" placeholder="Enter a message"
oninput="updateCount()"></textarea>
<p>
<span id="word-count">0</span> words |
<span id="character-count">0</span> characters
</p>
</div>
</body>
</html>Output Till Now
Let's understand CSS Part
In the below CSS code,
- We declare a * selectors to set the font Poppins that we have imported in our head tag.
- We have a container with a deep sky blue border and border-radius to look better.
- Next, we have a message that also has a deep sky blue border & border-radius CSS property to enhance UI.
* {
font-family: 'Poppins', sans-serif;
}
body {
background-color: #111827;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
border: 2px solid deepskyblue;
padding: 40px;
border-radius: 20px;
width: 30rem;
}
.message {
border: 2px solid deepskyblue;
border-radius: 7px;
padding: 8px;
margin-top: 4px;
outline: none;
}Output Till Now
Finally a JavaScript Part
In the below javascript code, we have the calculateLoan() arrow function.
In the below javascript code, we have the updateCount() arrow function which invokes whenever a user enters text/input in the textarea.
In the updateCount() function we have declared the message variable and grabbed the message div element and get the value. Then we declared the wordCount variable and calculate and store the length of the message using .length() function. Next, we set the values in the result section using DOM manipulation.
const updateCount = () => {
let message = document.getElementById("message").value;
let wordCount = (message).split(' ').length
document.getElementById("word-count").innerText = wordCount;
document.getElementById("character-count").innerText = message.length;
};