HTML CSS JavaScript Word & Character Counter Tool

Mar 7, 2025

Do you need a quick and free way to count words and characters in your text? Our Word & Character Counter Tool is designed using HTML, CSS, and JavaScript to provide real-time counting without needing any external software.

HTML CSS JavaScript Word & Character Counter Tool

What is a Word & Character Counter?

A Word & Character Counter Tool is an online tool that instantly counts the number of words and characters in a given text. It is useful for writers, students, bloggers, and social media users who need to stay within word or character limits.

How Does It Work?

The tool automatically calculates the total words and characters as you type. It uses JavaScript to track input changes and updates the count instantly.

Why Use This Tool?

  • Instant word and character count.
  • Simple and easy-to-use interface.
  • Works in real-time without any delay.
  • No installation or downloads required.

Conclusion

The Word & Character Counter Tool is a must-have for anyone who needs a quick and accurate way to track their word and character count. Whether you’re writing an article, tweet, or essay, this tool will help you stay within limits.

Here is Simple 

Word & Character Counter

Word & Character Counter

Words
0
Characters
0
Characters (no spaces)
0
Sentences
0
Paragraphs
1
Reading Time
0s

Here is code 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word & Character Counter</title>
    <style>
        /* Custom CSS with unique class names */
        .text-analyzer-container {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            border-radius: 12px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        }
        
        .counter-heading {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 25px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .input-area {
            width: 100%;
            height: 200px;
            padding: 15px;
            border: none;
            border-radius: 8px;
            background-color: #fff;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
            font-size: 16px;
            resize: vertical;
            transition: all 0.3s ease;
        }
        
        .input-area:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
        }
        
        .stats-display {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }
        
        .stat-card {
            background-color: #fff;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            text-align: center;
            transition: transform 0.3s ease;
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
        }
        
        .stat-title {
            font-size: 14px;
            color: #718096;
            margin-bottom: 8px;
        }
        
        .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: #3182ce;
        }
        
        .action-button {
            background-color: #4299e1;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 500;
            margin-top: 15px;
            transition: background-color 0.3s ease;
        }
        
        .action-button:hover {
            background-color: #3182ce;
        }
        
        .action-container {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }
        
        @media (max-width: 600px) {
            .stats-display {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </style>
</head>
<body>
    <div class="text-analyzer-container">
        <h1 class="counter-heading">Word & Character Counter</h1>
        
        <textarea id="textInput" class="input-area" placeholder="Type or paste your text here..."></textarea>
        
        <div class="stats-display">
            <div class="stat-card">
                <div class="stat-title">Words</div>
                <div id="wordCount" class="stat-value">0</div>
            </div>
            <div class="stat-card">
                <div class="stat-title">Characters</div>
                <div id="charCount" class="stat-value">0</div>
            </div>
            <div class="stat-card">
                <div class="stat-title">Characters (no spaces)</div>
                <div id="charNoSpaceCount" class="stat-value">0</div>
            </div>
            <div class="stat-card">
                <div class="stat-title">Sentences</div>
                <div id="sentenceCount" class="stat-value">0</div>
            </div>
            <div class="stat-card">
                <div class="stat-title">Paragraphs</div>
                <div id="paragraphCount" class="stat-value">0</div>
            </div>
            <div class="stat-card">
                <div class="stat-title">Reading Time</div>
                <div id="readingTime" class="stat-value">0s</div>
            </div>
        </div>
        
        <div class="action-container">
            <button id="copyBtn" class="action-button">Copy Text</button>
            <button id="clearBtn" class="action-button">Clear Text</button>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const textInput = document.getElementById('textInput');
            const wordCount = document.getElementById('wordCount');
            const charCount = document.getElementById('charCount');
            const charNoSpaceCount = document.getElementById('charNoSpaceCount');
            const sentenceCount = document.getElementById('sentenceCount');
            const paragraphCount = document.getElementById('paragraphCount');
            const readingTime = document.getElementById('readingTime');
            const copyBtn = document.getElementById('copyBtn');
            const clearBtn = document.getElementById('clearBtn');
            
            // Disable right-click menu on the entire page
            document.addEventListener('contextmenu', event => event.preventDefault());
            
            // Function to update all stats
            function updateStats() {
                const text = textInput.value;
                
                // Word count - split by whitespace and filter out empty strings
                const words = text.trim().split(/\s+/).filter(word => word.length > 0);
                wordCount.textContent = words.length;
                
                // Character count (with spaces)
                charCount.textContent = text.length;
                
                // Character count (without spaces)
                charNoSpaceCount.textContent = text.replace(/\s+/g, '').length;
                
                // Sentence count - split by period, question mark, or exclamation point followed by a space
                const sentences = text.split(/[.!?]+\s/).filter(s => s.length > 0);
                sentenceCount.textContent = sentences.length;
                
                // Paragraph count - split by double newlines
                const paragraphs = text.split(/\n\s*\n/).filter(p => p.trim().length > 0);
                paragraphCount.textContent = paragraphs.length || 1;
                
                // Reading time estimation (based on 225 words per minute)
                const readingTimeInSeconds = Math.ceil(words.length / 225 * 60);
                if (readingTimeInSeconds < 60) {
                    readingTime.textContent = readingTimeInSeconds + 's';
                } else {
                    const minutes = Math.floor(readingTimeInSeconds / 60);
                    const seconds = readingTimeInSeconds % 60;
                    readingTime.textContent = minutes + 'm ' + seconds + 's';
                }
            }
            
            // Event listeners
            textInput.addEventListener('input', updateStats);
            
            copyBtn.addEventListener('click', function() {
                textInput.select();
                document.execCommand('copy');
                
                // Visual feedback
                copyBtn.textContent = 'Copied!';
                setTimeout(() => {
                    copyBtn.textContent = 'Copy Text';
                }, 2000);
            });
            
            clearBtn.addEventListener('click', function() {
                textInput.value = '';
                updateStats();
            });
            
            // Initialize
            updateStats();
        });
    </script>
</body>
</html>
Next Post Previous Post