25.4. Create the Game Page

To play Minesweeper, the home page links to a different HTML template. The game screen contains a title, a mine counter, a New Game button, and the the active board.

The game board is one big HTML form.

25.4.1. Build mines.html

The structure of the game board is very similar to the one we built in index.html. However, this time the buttons will be active, and the entire table will be part of a large form element.

Unlike the home page, the HTML we use for the board will change once we start adding Python code to run the game. We’ll start simple, and then update the elements and/or attributes in later steps.

The form on the game page behaves differently than most of the ones we’ve created before. Instead of filling in an input field, users submit their cell choices by clicking the different buttons. In this case, each button serves as a separate input. To make the form work this way, we must assign a different value to each button. One of these will be submitted when the user clicks on the board.

Open your Minesweeper project and code along with the video to build the game page:

25.4.2. Video Summary

1. The game board looks just like the one on the home page. However, this one has active buttons, and it is included inside a <form></form> element.

2. Paste in the same table code from index.html. Change the attributes in the button elements to:

   1. Make them active,

   2. Give each one the same name,

   3. Set type="submit",

   4. Use a placeholder to assign a value that matches the cell coordinates (A10, B4, C7, etc.).

3. Inside the same form, add a Flag Mine checkbox above the game board, and center it.

4. In the <header></header> element, add the New Game button.

   1. Style the <button> with the menu class.

   2. Give it the same name and type as the buttons in the table.

   3. Set the value to be the empty string.

   4. Use the form attribute to match the button to the <form id="game-board" ...> element.

5. As we add more code to main.py, we will need to update the HTML and styling for the cells in the table.