Creating a live character counter is a great beginner-friendly project that helps you understand how HTML, CSS, and JavaScript work together to create interactive web applications. In this blog post, we’ll walk through the code that powers a simple live character counter — a tool that updates the number of characters typed into a textarea in real time, with dynamic background color changes based on the character count.
HTML: Structuring the Page
The HTML portion sets up the structure of our character counter. Inside the <body>, we have a container <div> that holds everything. It includes a heading (<h2>), a <textarea> for users to input text, and a <p> tag with an embedded <span> to display the live character count. The textarea is set with a maxlength of 200 characters to limit the input. This HTML provides the basic scaffolding that CSS and JavaScript will style and animate.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Live Character Counter</title>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h2>Live Character Counter</h2>
<textarea
id="text-input"
placeholder="Type something..."
maxlength="200"
></textarea>
<p class="counter"><span id="char-count">0</span>/200 characters</p>
</div>
<script src="script.js"></script>
</body>
</html>
CSS: Styling the Layout
The CSS makes the application visually appealing. We begin by resetting default browser styles using the universal selector (*) and then style the body to be centered with a green background. The .container is styled with padding, a white background, rounded corners, and a shadow for a subtle 3D effect. The textarea is given a fixed height, some padding, and rounded borders for a clean look. Finally, the .counter text beneath the textarea is styled with smaller font size and a neutral color to make it readable without drawing too much attention.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: #00cc6a;
display: flex;
justify-content: center;
align-items: center;
font-family: "Poppins", sans-serif;
}
.container {
background: #fff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
max-width: 400px;
width: 90%;
text-align: center;
}
textarea {
width: 100%;
height: 100px;
padding: 10px;
font-size: 1em;
border: 2px solid #ccc;
border-radius: 8px;
resize: none;
}
.counter {
margin-top: 10px;
font-size: 0.9em;
color: #555;
}
JavaScript: Adding Interactivity
The JavaScript is what makes this application dynamic. First, it selects the textarea, character count span, and sets the maximum character limit to 200. An event listener on the textarea tracks user input in real-time. As users type, the character count updates instantly. Depending on the number of characters typed, the background color of the page changes: green under 170 characters, orange from 171 to 199, and red at the 200-character limit. This gives visual feedback to users, encouraging them to stay within the limit.
const textarea = document.getElementById("text-input");
const charCount = document.getElementById("char-count");
const counterText = document.querySelector(".counter");
const maxLength = 200;
textarea.addEventListener("input", () => {
const length = textarea.value.length;
charCount.textContent = length;
// Change background color based on character count
if (length > 170 && length < maxLength) {
document.body.style.backgroundColor = "#f39c12"; // Orange
} else if (length === maxLength) {
document.body.style.backgroundColor = "#e74c3c"; // Red
} else {
document.body.style.backgroundColor = "#26ff8f"; // Default green
}
});
Conclusion
This live character counter project is a compact example of how HTML, CSS, and JavaScript work hand-in-hand. HTML provides the structure, CSS handles the presentation, and JavaScript brings interactivity to life. Projects like this are perfect for beginners looking to gain confidence in frontend web development. Plus, they’re easily extendable — you can add word counts, warnings, or even animation effects to take it to the next level.
