Build a Typing Speed Test App (Source Code)

Test your WPM (Words Per Minute) in 60 seconds with live accuracy checking and word highlighting.

CC CodesCompiler 📅 April 18, 2026

#javascript#typing#game#events

A typing test involves breaking a long string into a span array, tracking the user’s hidden textarea input, and comparing character by character!

Character Checking

JAVASCRIPT CODE

const quote = "The quick brown fox jumps over the lazy dog";
const chars = quote.split('').map(c =&gt; `${c}`);
display.innerHTML = chars.join('');

inputField.addEventListener('input', () =&gt; {
  const arrayQuote = display.querySelectorAll('span');
  const arrayValue = inputField.value.split('');
  
  arrayQuote.forEach((characterSpan, index) =&gt; {
    const character = arrayValue[index];
    if (character == null) {
      characterSpan.className = '';
    } else if (character === characterSpan.innerText) {
      characterSpan.className = 'correct';
    } else {
      characterSpan.className = 'incorrect';
    }
  });
});