Hello! Have you ever heard of something called a “Real-Time Character Counter”? It’s a special tool that helps you count the number of letters and spaces as you type! Lets learn more about it.
What’s Real-Time Character Counter?
A Real-Time Character Counter is like a little helper that tells you that how many letters and spaces are in the words you’re writing. It’s handy when you need to make sure writing isn’t too long for a messages or any assignment.
Why Do We Need It?
Imagine you’re writing a story for school, and you teacher says it can only be 150 words long. How do you know if you’ve written too much or too little? That’s where the Real-Time Character Counter comes in! It shows the number of letters and spaces you’ve used so for, so you can stay within the limit.
How Does It Work?
It’s easy! When you start typing, the Real-Time Character Counter starts counting the letters and spaces for you. You can watch the Total Character increase by one and Remaining Character decrease by one simultaneously as you type. If you need to delete something then the Total character increase by one and Remaining character decrease by one simultaneously.
Now first step, start with the HTML code as Structural part called index.html and it should be saved in specified file folder (or character counter) as you want.
<!DOCTYPE html> <!--which version of Html as this !Doctype-->
<html lang="en"> <!--Language of the page is en is called english-->
<head>
<meta charset="UTF-8"> <!--charset attributes which contais Characters and symbols and UTF-8 which recoment by HTML and it contains all latest character and symbols-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real-time Character Counter</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
</head>
<body>
<div class="container">
<h2>Real-time Character Counter</h2>
<textarea id="textarea"
class="textarea"
placeholder="Please write your text here..." maxLength="150"></textarea>
<div class="counter-container">
<p>Total Characters:
<span class="total-counter" id="total-counter">30</span>
</p>
<p>Remaining:
<span class="remaining-counter" id="remaining-counter">20</span>
</p>
</div>
</div>
<script src="index.js"></script>
</body>
</html>body{
margin: 0; display: flex; justify-content:center;
height: 100vh; align-items: center;
background-color: teal; font-family: 'Poppins', sans-serif;
}
.container{
background-color: bisque; width: 400px; padding: 20px;
letter-spacing: 0.5px; margin: 5px;
border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0, 40%);
}
.textarea{
resize: none; width: 100%; height: 100px;
padding: 10px; font-family: poppins; font-size: 18px;
box-sizing: border-box; border-radius: 5px;
background-color: lightcyan; border: solid 1px darkgreen;
}
.counter-container{
display: flex; justify-content: space-between;
padding: 0 10px;
}
.counter-container p{
color: grey; font-size: 15px;
}
.total-counter{
color: darkgreen; font-weight: bold;
}
.remaining-counter{
color: darkred; font-weight: bold;
}In second step, to design over the Structural part by using CSS as named as style.css and it should saved in same file folder (character counter)
const textareaE1 = document.getElementById("textarea");
const totalCounterE1 = document.getElementById("total-counter");
const totalRemainingE1=document.getElementById("remaining-counter")
textareaE1.addEventListener("keyup", ()=>{
//create a new function here as updateCounter()
updateCounter()
})
updateCounter();
function updateCounter(){
totalCounterE1.innerText = textareaE1.value.length
totalRemainingE1.innerText = textareaE1.getAttribute("maxLength") - textareaE1.value.length;
}