Word, Paragraph, Sentence, and Character Counter Tool created using HTML, CSS, and JavaScript.
Features
-> Real time count of Words (max 200), Characters, Sentences, Paragraphs.
-> Styled with CSS.
-> Clean and responsive.
How to run all the files on your computer, follow these simple steps:
1. Create the Files
Create the following three files in the same folder.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Text Analyzer</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Text Counter Tool</h1>
<textarea id="text-input" placeholder="Type your text here (max 200 words)..."></textarea>
<div class="counter">
<p><strong>Words:</strong> <span id="word-count">0</span> / 200</p>
<p><strong>Characters:</strong> <span id="char-count">0</span></p>
<p><strong>Sentences:</strong> <span id="sentence-count">0</span></p>
<p><strong>Paragraphs:</strong> <span id="paragraph-count">0</span></p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
body {
font-family: Arial, sans-serif;
background: #f4f4f4;
padding: 20px;
display: flex;
justify-content: center;
}
.container {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px #ccc;
width: 100%;
max-width: 600px;
}
h1 {
text-align: center;
}
textarea {
width: 100%;
height: 150px;
padding: 10px;
margin-bottom: 20px;
font-size: 16px;
border: 1px solid #ccc;
resize: vertical;
}
.counter p {
margin: 5px 0;
font-size: 16px;
}
script.js
const textInput = document.getElementById("text-input");
const wordCount = document.getElementById("word-count");
const charCount = document.getElementById("char-count");
const sentenceCount = document.getElementById("sentence-count");
const paragraphCount = document.getElementById("paragraph-count");
textInput.addEventListener("input", () => {
let text = textInput.value.trim();
// Character count
charCount.textContent = text.length;
// Word count
let words = text.split(/\s+/).filter(word => word.length > 0);
if (words.length > 200) {
words = words.slice(0, 200);
text = words.join(" ");
textInput.value = text;
}
wordCount.textContent = words.length;
// Sentence count
const sentences = text.split(/[.!?]+/).filter(s => s.trim().length > 0);
sentenceCount.textContent = sentences.length;
// Paragraph count
const paragraphs = text.split(/\n+/).filter(p => p.trim().length > 0);
paragraphCount.textContent = paragraphs.length;
});
You can name the folder something like: text-counter-tool.
2. Paste the Code
Copy and paste the code I provided into each corresponding file:
a. index.html
Paste the full HTML code into this file.
b. style.css
Paste the CSS code here.
c. script.js
Paste the JavaScript code here.
3. Run the Tool
-> Open the folder where you saved the files.
-> Double-click on index.html — this will open the app in your default web browser.
-> Start typing in the text area — you’ll see word, character, sentence, and paragraph counts update live.