Typing Speed Test App

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

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

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

See the Live Demo to see how we calculate the WPM and handle the timer!