Today, I’m super excited to share a small but incredibly practical project I created a Word Counter using JavaScript. It’s simple, functional, and, most importantly, useful for writers, students, and anyone who needs to keep track of their word and character counts. Let me walk you through how I made it and explain the code in an easy-to-understand way.
Word Counter and Why Did I Build One?
A word counter does exactly what it sounds like it counts the number of words and characters in a given text. Whether you’re crafting the perfect tweet, writing an essay with a word limit, or working on a blog post like this one, a word counter is a tool you didn’t know you needed until now!
As someone who loves experimenting with web development, I thought this project would be a great way to practice HTML, CSS, and JavaScript while creating something I’d actually use.
Features
Before we dive into the code, let me tell you about the features I added to make this Word Counter more functional and polished:
- Real-Time Word and Character Counting – Updates as you type.
- Clear Button – Quickly reset the text area.
- Reading Time Estimation – Estimates how long it’ll take to read the text.
- Dark Mode Toggle – Makes it easier on the eyes for nighttime use.
The Code
Here’s how I created this Word Counter:
HTML Structure
This is the skeleton of our project. It contains a text area for input, buttons for functionality, and placeholders for the word and character counts.
code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Word Counter</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Word Counter</h1>
<textarea id="textArea" placeholder="Type or paste your text here..."></textarea>
<div class="info">
<p>Word Count: <span id="wordCount">0</span></p>
<p>Character Count: <span id="charCount">0</span></p>
<p>Estimated Reading Time: <span id="readingTime">0</span> minutes</p>
</div>
<div class="buttons">
<button id="clearBtn">Clear</button>
<button id="darkModeToggle">Dark Mode</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS for Styling
I made it visually appealing with responsive design so it looks great on all devices.
code/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 50px auto;
text-align: center;
padding: 20px;
background: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
h1 {
margin-bottom: 20px;
font-size: 2rem;
}
textarea {
width: 100%;
height: 150px;
margin-bottom: 20px;
padding: 10px;
font-size: 1rem;
border: 1px solid #ddd;
border-radius: 4px;
resize: none;
}
.info p {
margin: 10px 0;
font-size: 1.1rem;
}
.buttons button {
margin: 5px;
padding: 10px 15px;
font-size: 1rem;
border: none;
border-radius: 4px;
cursor: pointer;
}
#clearBtn {
background-color: #f44336;
color: white;
}
#darkModeToggle {
background-color: #4caf50;
color: white;
}
.dark-mode {
background-color: #333;
color: white;
}
.dark-mode textarea {
background-color: #555;
color: white;
}
.dark-mode button {
color: white;
}
JavaScript for Functionality
This is where the magic happens! The JavaScript makes the word counter dynamic and interactive.
code// script.js
const textArea = document.getElementById('textArea');
const wordCount = document.getElementById('wordCount');
const charCount = document.getElementById('charCount');
const readingTime = document.getElementById('readingTime');
const clearBtn = document.getElementById('clearBtn');
const darkModeToggle = document.getElementById('darkModeToggle');
// Function to update counts
function updateCounts() {
const text = textArea.value;
const words = text.trim().split(/\s+/).filter(word => word !== "").length;
const chars = text.length;
const estimatedTime = Math.ceil(words / 200); // Assuming 200 WPM reading speed
wordCount.textContent = words;
charCount.textContent = chars;
readingTime.textContent = estimatedTime;
}
// Clear button functionality
clearBtn.addEventListener('click', () => {
textArea.value = '';
updateCounts();
});
// Dark mode toggle
darkModeToggle.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
});
// Update counts in real-time
textArea.addEventListener('input', updateCounts);
// Initial counts
updateCounts();
How It Works
- HTML defines the structure—a text area, buttons, and output placeholders.
- CSS styles the elements for a clean and responsive layout. The Dark Mode is toggled by adding a CSS class via JavaScript.
- JavaScript adds the interactivity, like counting words and characters in real-time, clearing the input, and toggling the dark mode.
Conclusion
Building a Word Counter was not only a fun way to practice my HTML, CSS, and JavaScript skills but also a chance to create something genuinely practical. Whether you’re a writer, student, or developer, this tool can simplify your life in countless ways. Plus, there’s so much room for expansion like adding file uploads, saving text, or analyzing word frequency.