Course
Remote
How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript
Bansidhar Kadiya · Remote
At a glance
- Type
- Course
- Organisation
- Bansidhar Kadiya
- Location
- Remote
- Work mode
- Remote
- Deadline
- Rolling / not stated
- Posted
- 30 Sep 2026
About this course
<p>Whether you're writing an essay, a tweet, or a blog post, keeping track of your word and character count is very important.</p>
<p>In this tutorial, you'll build a fully functional, real-time Word Counter tool from scratch. You'll use HTML for the structure, CSS for a clean design, and vanilla JavaScript to handle the counting logic.</p>
<p>Because this tool runs completely in the browser, it works instantly as you type and keeps your text data completely private.</p>
<p>Let's get started.</p>
<h2 id="heading-prerequisites">Prerequisites</h2>
<p>To follow this guide easily, you should have:</p>
<ul>
<li><p>A basic understanding of HTML tags and CSS styling.</p>
</li>
<li><p>Familiarity with JavaScript concepts like functions, event listeners, and basic Regular Expressions (Regex).</p>
</li>
<li><p>A code editor (like VS Code) and a web browser.</p>
</li>
</ul>
<h2 id="heading-table-of-contents">Table of Contents</h2>
<ul>
<li><p><a href="#heading-step-1-set-up-your-project">Step 1: Set Up Your Project</a></p>
</li>
<li><p><a href="#heading-step-2-build-the-html-structure">Step 2: Build the HTML Structure</a></p>
<ul>
<li><a href="#heading-understanding-the-html">Understanding the HTML:</a></li>
</ul>
</li>
<li><p><a href="#heading-step-3-style-the-tool-with-css">Step 3: Style the Tool with CSS</a></p>
<ul>
<li><a href="#heading-understanding-the-css">Understanding the CSS:</a></li>
</ul>
</li>
<li><p><a href="#heading-step-4-add-the-javascript-logic">Step 4: Add the JavaScript Logic</a></p>
<ul>
<li><a href="#heading-understanding-the-javascript">Understanding the JavaScript:</a></li>
</ul>
</li>
<li><p><a href="#heading-step-5-test-your-application">Step 5: Test Your Application</a></p>
</li>
</ul>
<h2 id="heading-step-1-set-up-your-project">Step 1: Set Up Your Project</h2>
<p>First, you need to set up your workspace. Create a new folder on your computer and name it <code>word-counter-app</code>.</p>
<p>Inside this folder, create three empty files:</p>
<ul>
<li><p><code>index.html</code></p>
</li>
<li><p><code>style.css</code></p>
</li>
<li><p><code>script.js</code></p>
</li>
</ul>
<h2 id="heading-step-2-build-the-html-structure">Step 2: Build the HTML Structure</h2>
<p>Open your <code>index.html</code> file. You need to create a layout that includes a header, a grid to display the real-time statistics, a text area for the user to type in, and buttons to copy or clear the text.</p>
<p>Add the following code into your HTML file:</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Word Counter Tool</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header-section">
<h1>Word Counter</h1>
<p class="description">Paste or type your text below to get a real-time count of words, characters, sentences, and paragraphs.</p>
</header>
<main class="tool-container">
<!-- Statistics Panel -->
<div class="stats-grid">
<div class="stat-box">
<div class="stat-value" id="wordCount">0</div>
<div class="stat-label">Words</div>
</div>
<div class="stat-box">
<div class="stat-value" id="charCount">0</div>
<div class="stat-label">Characters</div>
</div>
<div class="stat-box">
<div class="stat-value" id="sentenceCount">0</div>
<div class="stat-label">Sentences</div>
</div>
<div class="stat-box">
<div class="stat-value" id="paragraphCount">0</div>
<div class="stat-label">Paragraphs</div>
</div>
</div>
<!-- User Input Area -->
<textarea id="textInput" placeholder="Start typing or paste your text here..."></textarea>
<!-- Action Buttons -->
<div class="controls">
<button class="btn-primary" onclick="copyText()" id="copyBtn">Copy Text</button>
<button class="btn-secondary" onclick="clearText()">Clear</button>
</div>
</main>
<script src="script.js"></script>
</body>
</html>
</code></pre>
<p>Understanding the HTML:</p>
<ul>
<li><p><strong>The</strong> <code>.stats-grid</code><strong>:</strong> This holds four separate boxes to show the counts. Each number has a unique <code>id</code> (like <code>wordCount</code>) so JavaScript can find and update it easily.</p>
</li>
<li><p><strong>The</strong> <code><textarea></code><strong>:</strong> This is the main input box where users will type or paste their content.</p>
</li>
<li><p><strong>The</strong> <code><script></code> <strong>tag:</strong> This connects your HTML to the logic you will write in the next steps.</p>
</li>
</ul>
<h2 id="heading-step-3-style-the-tool-with-css">Step 3: Style the Tool with CSS</h2>
<p>Next, you'll give your tool a modern, professional look. You'll use CSS Grid to align the statistics boxes perfectly.</p>
<p>Open your <code>style.css</code> file and add this code:</p>
<pre><code class="language-css">:root {
--primary-color: #007bff;
--bg-color: #f8f9fa;
--text-dark: #202124;
--text-muted: #5f6368;
--border-color: #dadce0;
--panel-bg: #ffffff;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: var(--bg-color);
color: var(--text-dark);
margin: 0;
padding: 40px 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.header-section {
text-align: center;
margin-bottom: 30px;
}
h1 {
font-size: 2.5rem;
margin: 0 0 10px 0;
font-weight: 800;
}
p.description {
color: var(--text-muted);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
font-size: 1.1rem;
}
.tool-container {
background-color: var(--panel-bg);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 24px;
width: 100%;
max-width: 900px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
/* Stats Grid */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.stat-box {
background-color: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 16px;
text-align: center;
}
.stat-value {
font-size: 2rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 4px;
}
.stat-label {
font-size: 0.9rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
/* Text Area */
textarea {
width: 100%;
height: 250px;
padding: 16px;
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 1rem;
line-height: 1.6;
resize: vertical;
box-sizing: border-box;
font-family: inherit;
margin-bottom: 20px;
transition: border-color 0.2s ease;
}
textarea:focus {
outline: none;
border-color: var(--primary-color);
}
/* Buttons */
.controls {
display: flex;
gap: 12px;
}
button {
padding: 10px 20px;
font-size: 1rem;
font-weight: 600;
border-radius: 6px;
cursor: pointer;
border: none;
transition: background-color 0.2s ease;
}
.btn-primary {
background-color: var(--primary-color);
color: #ffffff;
}
.btn-primary:hover {
background-color: #0056b3;
}
.btn-secondary {
background-color: transparent;
color: var(--text-dark);
border: 1px solid var(--border-color);
}
.btn-secondary:hover {
background-color: var(--bg-color);
}
</code></pre>
<p>Understanding the CSS:</p>
<ul>
<li><p><strong>CSS Grid:</strong> The <code>.stats-grid</code> class uses <code>grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));</code>. This makes the four stat boxes automatically stack neatly on top of each other if a user views the tool on a small mobile screen.</p>
</li>
<li><p><strong>CSS Variables:</strong> Using <code>:root</code> at the top allows you to quickly change the brand color later if you want to use something other than the default blue (<code>#007bff</code>).</p>
</li>
</ul>
<p>At this point, the visual design of your tool is complete. Here's what the final Word Counter will look like in your browser:</p>
<img src="https://cdn.hashnode.com/uploads/covers/699c7b22cf5def0f6aaf982b/dc292767-ac0f-4e87-b88c-d64fab38f370.png" alt="Word Counter Tool" style="display: block;" width="600" height="400" loading="lazy">
<h2 id="heading-step-4-add-the-javascript-logic">Step 4: Add the JavaScript Logic</h2>
<p>Now you need to make the tool count the text. You'll use an event listener that watches every keystroke. Every time the user types, it recalculates the words, characters, sentences, and paragraphs.</p>
<p>Open your <code>script.js</code> file and paste this code:</p>
<pre><code class="language-javascript">const textInput = document.getElementById('textInput');
const wordCountDisplay = document.getElementById('wordCount');
const charCountDisplay = document.getElementById('charCount');
const sentenceCountDisplay = document.getElementById('sentenceCount');
const paragraphCountDisplay = document.getElementById('paragraphCount');
const copyBtn = document.getElementById('copyBtn');
// 1. Listen for user input in real-time
textInput.addEventListener('input', updateStatistics);
// 2. The Core Counting Logic
function updateStatistics() {
const text = textInput.value;
// Character Count (includes spaces)
charCountDisplay.textContent = text.length;
// Word Count
const words = text.match(/\S+/g) || [];
wordCountDisplay.textContent = words.length;
// Sentence Count
const sentences = text.split(/[.!?]+(?=\s|$)/).filter(sentence => sentence.trim().length > 0);
sentenceCountDisplay.textContent = sentences.length;
// Paragraph Count
const paragraphs = text.split(/\n+/).filter(paragraph => paragraph.trim().length > 0);
paragraphCountDisplay.textContent = paragraphs.length;
}
// 3. Copy functionality
function copyText() {
if (!textInput.value) return;
textInput.select();
document.execCommand('copy');
// Provide visual feedback
copyBtn.textContent = 'Copied!';
setTimeout(() => {
copyBtn.textContent = 'Copy Text';
}, 1500);
}
// 4. Clear functionality
function clearText() {
textInput.value = '';
updateStatistics(); // Reset counts to zero
}
</code></pre>
<p>Understanding the JavaScript:</p>
<ul>
<li><p><strong>The</strong> <code>input</code> <strong>Event:</strong> <code>textInput.addEventListener('input', ...)</code> is the secret to real-time updates. It triggers the counting function the exact moment a key is pressed or text is pasted.</p>
</li>
<li><p><strong>Counting Words:</strong> <code>text.match(/\S+/g)</code> is a Regular Expression that looks for unbroken strings of non-whitespace characters. This is much more accurate than just splitting the text by spaces, because it ignores extra empty spaces left by mistake.</p>
</li>
<li><p><strong>Counting Sentences:</strong> The <code>.split(/[.!?]+(?=\s|$)/)</code> logic cuts the text into pieces every time it sees a period, exclamation mark, or question mark followed by a space.</p>
</li>
</ul>
<h2 id="heading-step-5-test-your-application">Step 5: Test Your Application</h2>
<p>You're completely done coding! Now it's time to verify that your logic works correctly.</p>
<ol>
<li><p>Open your <code>word-counter-app</code> folder.</p>
</li>
<li><p>Double-click the <code>index.html</code> file to open it in your web browser.</p>
</li>
<li><p>Type a few sentences into the text area. Watch the numbers at the top update instantly.</p>
</li>
<li><p>Try adding double spaces or hitting the "Enter" key to make new paragraphs, and ensure the logic counts them accurately.</p>
</li>
<li><p>Click <strong>Copy Text</strong> to test the clipboard feature, and <strong>Clear</strong> to reset the board.</p>
</li>
</ol>
<p>By completing this project, you've built a fast, client-side utility tool using pure vanilla JavaScript. You learned how to manipulate strings, use Regular Expressions for text analysis, and create responsive UI grids.</p>
<p>If you want to see this exact codebase running in a live production environment, you can try out this <a href="https://99tools.net/word-counter/">Online Word Counter</a>. Keep building, and happy coding!</p>
How to apply
- 1 Read the full details above and confirm you meet the eligibility criteria.
- 2 Prepare your documents — an updated CV, and any cover letter, proposal or certificates required.
- 3 Click Apply on official site to complete your application on Bansidhar Kadiya’s official page.
- 4 Submit as early as possible — many close once filled.
Sourced from freecodecamp. Always verify details on the official website. Opportunihub never charges you to apply.
Frequently asked questions
How do I apply for How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript?
Review the full details and eligibility on this page, prepare your documents, then use the “Apply on official site” button to complete your application on Bansidhar Kadiya’s official page.
Is this opportunity remote or location-based?
This opportunity is remote-friendly and open to applicants who can work from anywhere.
Is How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript free to apply for?
Opportunihub lists this Course for free. Legitimate Courses do not ask for payment to apply — never pay a fee to submit an application.