Part 4: Capture User Input

In this step we want to listen for user input and add it to the grid.

Capture User Input

• Add an event listener on the document (the whole document) that listens for the keydown event.
• Print the user input to the console when a key is pressed.

Our game will need to capture 3 types/keys of user input:

• Letters
• Backspace
• Enter

Validate the User Input

We'll need to check if the user input is a letter, backspace, or an enter key.

• to check if an input is a letter, we can use the event.key property and check if it is a letter using the RegExp object. You can use the following snippet:

  function isLetter(letter) {
    return letter.length === 1 && letter.match(/[a-z]/i);
  }

  and it can be used like this:

  document.addEventListener('keydown', (event) => {
    if (isLetter(event.key)) {
      console.log(`letter: ${event.key}`);
    }
    // ...
  });

• complete the snippet above to check for the backspace and enter keys.

Here's how the game should handle the different types of user input:

• If the user presses a letter, add it to the grid at the right position.
• If the user presses the backspace key, remove the last letter from the grid.
• If the user presses the enter key:
  • If the current position is less than the length of the word, indicate that the word is not complete.
  • We check if the game is over.
    • If the word guessed is correct, end the game.
    • if the current attempt is more than the game allowed number of attempts, end the game.

to be able to manage all of these, we need to capture the game state:

• The word that the user is trying to guess.
• the current attempt (the current row)
• the current position of the last letter added to the grid. (the current column)

We'll take care of handling the game state in the next step. For now, let's create a function to the controller that adds a letter to a cell at a given position.

Create a function that adds a letter to a cell at a given position.

Create a function addLetterToBox(row, col, letter) that can add a letter to a cell at a given position. The function should:

• Create a variable reference to the cell at the given position.
• Modify the cell's content to the given letter.

tip

Note that the row represents the attempt and the column represents the position of the letter in the word.

info

call the function, make sure it works

Capture User Input

• Add an event listener on the document that listens for the keydown event.
• When a key is pressed, check if it is a letter.
  • If it is a letter, add it to the grid at the right position.
    • Call the function that adds a letter to a cell at a given position. (this function should also add it to the )
  • If it is a backspace key, remove the last letter from the grid.
  • If it is an enter key:
    • If the current attempt is more than the game allowed number of attempts, end the game.
    • If the current position is less than the length of the word, indicate that the word is not complete.
  • If it is not a letter, ignore it.