Build a Typing Speed Tester with HTML and JavaScript

hma ikbal — Fri, 31 Oct 2025 04:19:19 +0000

Typing Speed Tester

Typing test and practice is an interactive tool which used to measure speed and accuracy and also use to teach and learn typing.
If you want to learn how to create a simple yet effective typing speed test application using HTML and JavaScript. This interactive tool measures your Words Per Minute (WPM) and accuracy, providing instant feedback on your typing performance.

How It Works

This typing tester provides users with a sample paragraph or words and tracks their typing in real-time. Here's what makes it useful:

Live WPM Calculation: Numbers of words which user types, but note here 5 character is equal to a word is counted standardly.
Accuracy Tracking: Calculates the percentage of correct characters typed
Instant Results: Updates metrics in real-time for immediate feedback
Reset Functionality: Start over with a single click

The Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Typing Speed Tester</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .container {
            background: white;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            max-width: 800px;
            width: 100%;
        }

        h1 {
            color: #333;
            margin-bottom: 20px;
            text-align: center;
        }

        .sample-text {
            background: #f5f5f5;
            padding: 20px;
            border-radius: 5px;
            margin-bottom: 20px;
            line-height: 1.8;
            color: #555;
            font-size: 16px;
        }

        .input-box {
            width: 100%;
            padding: 12px;
            font-size: 16px;
            border: 2px solid #ddd;
            border-radius: 5px;
            margin-bottom: 20px;
            font-family: monospace;
            resize: vertical;
            min-height: 120px;
        }

        .input-box:focus {
            outline: none;
            border-color: #667eea;
        }

        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }

        .stat-box {
            background: #f9f9f9;
            padding: 15px;
            border-radius: 5px;
            text-align: center;
            border-left: 4px solid #667eea;
        }

        .stat-label {
            color: #999;
            font-size: 12px;
            text-transform: uppercase;
            margin-bottom: 5px;
        }

        .stat-value {
            font-size: 28px;
            font-weight: bold;
            color: #333;
        }

        .buttons {
            display: flex;
            gap: 10px;
            justify-content: center;
        }

        button {
            padding: 12px 30px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-start {
            background: #667eea;
            color: white;
        }

        .btn-start:hover {
            background: #5568d3;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }

        .btn-reset {
            background: #f44336;
            color: white;
        }

        .btn-reset:hover {
            background: #da190b;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(244, 67, 54, 0.4);
        }

        .message {
            text-align: center;
            margin-top: 15px;
            font-size: 14px;
            color: #999;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>⌨️ Typing Speed Tester</h1>

        <div class="sample-text" id="sampleText">
            The quick brown fox jumps over the lazy dog. This is a sample paragraph for testing your typing speed and accuracy. Focus on accuracy first, and speed will follow naturally.
        </div>

        <textarea class="input-box" id="userInput" placeholder="Click 'Start Test' and begin typing here..."></textarea>

        <div class="stats">
            <div class="stat-box">
                <div class="stat-label">WPM</div>
                <div class="stat-value" id="wpm">0</div>
            </div>
            <div class="stat-box">
                <div class="stat-label">Accuracy</div>
                <div class="stat-value" id="accuracy">0%</div>
            </div>
            <div class="stat-box">
                <div class="stat-label">Correct Characters</div>
                <div class="stat-value" id="correct">0</div>
            </div>
            <div class="stat-box">
                <div class="stat-label">Total Characters</div>
                <div class="stat-value" id="total">0</div>
            </div>
        </div>

        <div class="buttons">
            <button class="btn-start" id="startBtn">Start Test</button>
            <button class="btn-reset" id="resetBtn">Reset</button>
        </div>

        <div class="message" id="message"></div>
    </div>

    <script>
        let testActive = false;
        let startTime = null;
        let timerInterval = null;

        const sampleText = document.getElementById('sampleText').textContent;
        const userInput = document.getElementById('userInput');
        const startBtn = document.getElementById('startBtn');
        const resetBtn = document.getElementById('resetBtn');
        const wpmDisplay = document.getElementById('wpm');
        const accuracyDisplay = document.getElementById('accuracy');
        const correctDisplay = document.getElementById('correct');
        const totalDisplay = document.getElementById('total');
        const messageDisplay = document.getElementById('message');

        function startTest() {
            testActive = true;
            startTime = Date.now();
            userInput.focus();
            userInput.disabled = false;
            startBtn.disabled = true;
            messageDisplay.textContent = 'Test in progress...';
        }

        function resetTest() {
            testActive = false;
            userInput.value = '';
            userInput.disabled = true;
            startBtn.disabled = false;
            wpmDisplay.textContent = '0';
            accuracyDisplay.textContent = '0%';
            correctDisplay.textContent = '0';
            totalDisplay.textContent = '0';
            messageDisplay.textContent = '';
            clearInterval(timerInterval);
        }

        function calculateStats() {
            if (!testActive) return;

            const userText = userInput.value;
            const totalChars = userText.length;
            let correctChars = 0;

            for (let i = 0; i < totalChars; i++) {
                if (userText[i] === sampleText[i]) {
                    correctChars++;
                }
            }

            const elapsedTime = (Date.now() - startTime) / 1000 / 60;
            const words = totalChars / 5;
            const wpm = Math.round(words / elapsedTime);
            const accuracy = totalChars === 0 ? 0 : Math.round((correctChars / totalChars) * 100);

            wpmDisplay.textContent = wpm;
            accuracyDisplay.textContent = accuracy + '%';
            correctDisplay.textContent = correctChars;
            totalDisplay.textContent = totalChars;
        }

        userInput.addEventListener('input', calculateStats);
        startBtn.addEventListener('click', startTest);
        resetBtn.addEventListener('click', resetTest);

        userInput.disabled = true;
    </script>
</body>
</html>

Usage Instructions

Click "Start Test" - This initializes the timer and enables the input field.
Read the Sample Text - Familiarize yourself with the paragraph you will type.
Begin Typing - Start typing the sample text as accurately and quickly as possible.
Monitor Your Stats - Watch your WPM and accuracy update in real-time
Click "Reset" - When you're done, click Reset to clear and start over

Tips for Better Results

Accuracy First: Focus on typing with accuracy rather than speed. Speed naturally improves with practice.
Proper Posture: Sit up straight with your monitor at eye level. It is one of the important part of good typist.
Touch Typing: Touch typing is a method where where user types without looking at the keyboards. And it can be easily obtain by practice and some basic rules.
Regular Practice: Daily practice for just 15 minutes can significantly improve your typing skills

Take Your Typing Further

If you want to enhance your typing skills even more, consider exploring dedicated typing practice platforms. For comprehensive typing exercises and challenges, check out typing practice which offers structured and scientific lessons and progress tracking awith different languages.

If you are a developer

This simple typing tester demonstrates how HTML, CSS, and JavaScript can work together to create an interactive, real-time application. You can extend this project by adding more sample texts, difficulty levels, or gamification features.

Forem: hma ikbal