Part 3: Dynamically Build the Layout

Layout Building

• Create variable reference to the grid div.

Add Letter Cell to Grid

• Create a function addBoxToGrid(row, col) that can create a cell and add it to the grid. The function should:
  • Create a div element. using the document.createElement method.
  • Set the cell class to letter.
  • Set the cell's ID property to correspond with its position in the grid.
    • The function should take the position as an arguments (row, col).

Create a Grid of Cells using a nested for loop

• Create a game config variable to capture the game configuration (e.g., number of rows and columns) or in other terms, number of attempts and the size of the words.
• Create a function setupGrid() that can create a grid of cells. The function should:
  • The funciton will call the addBoxToGrid function passing in the row and column as arguments as it loops over the configured number of rows and columns.

tip

Call the setupGrid function to make sure it works and to create the grid.

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

• We need to create a variable that captures the game state:
  • The word that the user is trying to guess.
  • the current attempt
  • the current position of the last letter added to the grid.
  • The full grid, to make it easier to check the words
    • Alternatively, we'd have to extract the content of each cell and concatenate it to form the word.

tip

call that last function, make sure it works