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 HTML Part
We use HTML to make the skeleton of a website. HTML is a markup language.
Let's import the fonts using Google Fonts API. Below is the code for the Poppins Font. Paste the below code in the <head> tag.
<!-- 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">
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 <p> tag to display 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 for the font Poppins that we have imported in our head tag.
- We have a container with a deepskyblue border and border-radius to look better.
- Next, we have a message that also have a deepskyblue 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;
}
Finally a JavaScript part
In the below javascript code, we have updateCount() arrow function which invokes whenever a user enters text/input in the textarea.
In updateCount() function we have declared message variable and grab the message div element and get the value. Then we have declared wordCount variable and calculate and store the length of 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;
};
Top comments (0)