Typing Speed Test WPM Counter — HTML CSS JS Snippet

Typing speed tests are a deceptively small feature that requires getting several interconnected pieces of logic right at once: character-by-character comparison against a target string, a words-per-minute formula that only starts counting from the user's first keystroke, an accuracy percentage that updates live, and a completion check that triggers the moment the typed text exactly matches the target. This snippet implements all of it in vanilla JavaScript with no dependencies, using the same core technique that speed-typing sites like MonkeyType and 10FastFingers rely on: comparing two strings index by index and re-rendering the sample text with per-character CSS classes on every keystroke.

Character-by-character diffing

The heart of the snippet is renderTarget(typed), which loops over every character of the target sentence and compares it against the corresponding character the user has typed so far. Each target character is wrapped in its own <span> and assigned one of three classes: char-correct (green) if typed[i] === target[i], char-incorrect (red background) if the user typed something different at that position, or no class at all if the user has not reached that character yet — except for the very next character, which gets char-current to show a blinking-style underline cursor indicator. If the user has typed more characters than the target sentence contains (for example, extra characters at the end), those are appended in a separate char-extra span with a red underline, so over-typing is visually distinct from a wrong-character mismatch rather than silently ignored. This span-per-character approach means the entire sample re-renders on every input event, which is cheap enough at typical sentence lengths (60-90 characters) to run smoothly on every keystroke without any debouncing.

The words-per-minute formula

WPM is calculated using the standard typing-test convention: one "word" equals five characters (including spaces), regardless of actual word boundaries, because this normalizes scoring across sentences with different average word lengths. The formula is words = typed.length / 5, then wpm = Math.round((typed.length / 5) / (elapsedSeconds / 60)). Critically, the timer does not start when the component loads — it starts on the very first input event via a null-check on startTime, matching how real typing tests behave (you should not be penalized for time spent reading the prompt before you start typing). A setInterval running every 100ms recalculates and redisplays the live WPM, accuracy, and elapsed time while the test is in progress, so numbers update smoothly rather than jumping only on keystrokes.

Accuracy scoring and completion detection

computeAccuracy(typed) counts how many typed characters match the target at the same index, divided by the total number of characters typed so far (not the target length), so accuracy reflects the quality of what has actually been typed at any moment — including dips caused by mistakes that were later corrected. The test only completes when typed.length >= target.length && typed === target, an exact string equality check, meaning a single leftover typo blocks completion until the user backspaces and fixes it, mirroring the "you cannot finish with mistakes present" behavior of most typing test tools. On completion, finishTest() stops the interval timer, disables the textarea so no further input is registered, and reveals a results overlay summarizing final WPM, accuracy, and total time.

Random sample rotation and reset flow

Five sample sentences of varying length and vocabulary live in a SAMPLES array; pickSample() selects one at random using Math.floor(Math.random() * SAMPLES.length). Both the header "Try Again" button and the results overlay's "Try Again" button call the same resetTest() function, which clears the interval, resets startTime to null, re-enables the textarea, picks a fresh random sample, and re-renders the target text in its untyped state — ensuring every attempt starts from a clean, consistent baseline with no leftover timer or stale DOM classes from the previous run.