Building an Interactive Typing Speed Test with JavaScript

Today I’m going to walk through how to create a basic typing speed test game with JavaScript. This is a fun way to showcase JavaScript skills in an interactive demo. Let’s check out the code!

Initialize Variables

First we need to set up some variables to store the necessary data, like how much time is left, what is the text to type, and what the user enters:

// Set up variables to track time, text, user input, etc
let timer;
let timeLeft = 10; // 10 seconds
let text = "Hello world! Try typing the text as fast as you can.";
let userInput = "";

This initializes what we need to run the actual game.

Display Text and Start Timer

Next we can display the text for the user to start typing, and kick off a 10 second countdown timer:

// Display the text to type 
document.getElementById("textToType").innerText = text;

// Start the timer
function startTimer() {
  timer = setInterval(function() {
    timeLeft--;
    document.getElementById("timeLeft").innerText = timeLeft;
    
    if (timeLeft <= 0) {
      clearInterval(timer); 
      finishGame();
    }
  }, 1000);
}

The timer will tick each second, continually checking if the time is up.

Track User Input

As the user starts typing, we need to track what they enter and compare to the original text:

// Track user input
document.getElementById("input").addEventListener("input", function() {
  userInput = this.value;
  checkInput();  
});

// Check if user input matches text 
function checkInput() {
  let textEntered = userInput.substring(0, userInput.length);
  let textToCompare = text.substring(0, userInput.length);
  
  if (textEntered == textToCompare) {
    document.getElementById("charactersTyped").style.color = "green";
  } else {
    document.getElementById("charactersTyped").style.color = "red";
  }
  
  document.getElementById("charactersTyped").innerText = textEntered.length + " out of " + text.length;
}

We can see if what they’ve typed matches the text or not.

Calculate and Display Results

Once time runs out, we show the final words per minute score:

// Game over, show results
function finishGame() {
  clearInterval(timer);
  
  document.getElementById("timeUp").style.display = "block";
  document.getElementById("textToType").style.display = "none";
  document.getElementById("input").disabled = true;
  
  let charactersPerMinute = Math.round(((userInput.length) / 10 / 60) * 60);
  
  document.getElementById("wpm").innerText = charactersPerMinute;
}

We take their number of characters typed over the time to calculate speed.

Initialize the Game

Finally, we start everything up by calling the timer and input functions:

// Start the game
startTimer();

And that initializes the actual typing test game!

This coding tutorial walked through the JavaScript behind a simple typing speed test web app. There’s lots of potential ways to expand on this code base.

Let me know in the comments what other coding demos you’d like to see!