Welcome to today’s tutorial on how you can display a live count of characters that are being typed in a text input field or a textarea. You have probably seen this type of counters while filling forms or input fields.
These counters are quite similar to character limiters. Character limiters are used for validating the input from user. On the other hand live count might be used by the user to self validate so they can keep a count of characters without exceeding characters more than need.
Now that you know the use case of these character counter. Let us get started with the actual tutorial. For this mini project, we will be using HTML, CSS & Javascript. If you are looking are project to get started with Javascript, this one would be a good choice.
Learn how to create Weather App Using Html,Css And Javascript
Video Tutorial:
If you like to code along, you can watch the video tutorial below. Also, you can check other tutorials on my Youtube channel.
HTML:
We start by creating a index.html file. Paste the code below in HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live Character Count</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<textarea id="my-text" rows="8" placeholder="Type something here..."></textarea>
<p id="count-result">Total characters: 0</p>
</div>
<!--Script-->
<script src="script.js"></script>
</body>
</html>
CSS:
Next create a stylesheet with name ‘style.css’. You need to copy the code below to the stylesheet. The CSS code is pretty much self explanatory.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins",sans-serif;
}
body{
background-color: #0a192f;
}
.container{
width: 400px;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
}
textarea{
width: 100%;
resize: none;
background-color: #172a46;
border: none;
font-size: 16px;
line-height: 30px;
padding: 15px;
border-radius: 3px;
color: #a8b2d1;
outline: none;
}
p{
color: #e5e5e5;
text-align: right;
margin-top: 20px;
}
Other Tutorials You Might Like:
- Limit Characters In Input Field
- Detect When User Switches Tab
- Detect Capslock
- Image Preview Before Upload
Javascript:
Lastly we need to write the javascript to add functionality to our code. For this, create an ‘script.js’ file. Copy the code to the javascript file.
let myText = document.getElementById("my-text");
myText.addEventListener("input", () => {
let count = (myText.value).length;
document.getElementById("count-result").textContent = `Total characters: ${count}`;
});
I hope you enjoyed the tutorial. Go ahead, and create your live character counter with these easy steps. You can even download the source code by simply clicking on the button below. If you have any suggestions or feedbacks please comment them below. I would love to hear from you. For more such tutorials stay tunned.
Please make a javascript quiz with next previous button and timer.
Please…..
New guy here
Nice content