Typing Game

by Ben Gillbanks

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Typing Game</title>
  </head>
  <body>
    <h1>Typing Game</h1>
    <textarea id="text-area"></textarea>
    <div id="message"></div>
    <script src="index.js"></script>
  </body>
</html>

JavaScript

// List of words to type
const words = ["apple", "banana", "orange", "pear", "grape"];

// Keep track of the current word index
let currentWordIndex = 0;

// Keep track of the number of correct words typed
let correctWords = 0;

// Function that's called every second
function update() {
  // Get the text the user has typed
  const text = textArea.value;

  // Get the current word
  const currentWord = words[currentWordIndex];

  // If the text the user has typed matches the current word,
  // increment the number of correct words and move on to the next word
  if (text === currentWord) {
    correctWords++;
    currentWordIndex++;

    // Clear the text area
    textArea.value = "";

    // If we've reached the last word, stop the game
    if (currentWordIndex === words.length) {
      clearInterval(interval);
    }
  }

  // Update the message with the current word
  message.innerHTML = currentWord;
}

// Get the text area and message elements
const textArea = document.getElementById("text-area");
const message = document.getElementById("message");

// Start the game with an interval of 1 second
const interval = setInterval(update, 1000);