SimplyTic-Tac-Toe

This was an early project I did in the Promineo Tech course to practice my HTML, CSS, and JS skills. It is a simple Tic-Tac-Toe game that allows two players to play against each other. It was a fun project to work on and I learned a lot about how to use JS to manipulate the DOM.

1 / 14

2 / 14

3 / 14

4 / 14

5 / 14

6 / 14

7 / 14

8 / 14

9 / 14

10 / 14

11 / 14

12 / 14

13 / 14

14 / 14

❮ ❯

There is a heading that displays who's taking their turn, and a button to reset the game. The game will also display a message if there is a winner or if the game is a tie. The game will not allow a player to select a square that has already been selected. There is an extra X in this screenshot, as whoever wins remains the active player, and can technically select additional squares. I could have added a check to prevent further selections if the game was over, but I didn't think it was necessary for this project, as players would likely just reset the board to play again.

The tic-tac-toe hash is not in the HTML, but is created with JS. The game is played by clicking on the squares, which are divs with a class of "cell" and ids 0-8. The JS code listens for a click on a square, and then adds an X or O to the square, depending on which player is active. The JS code also checks for a winner after each turn, and displays a message if there is a winner or a tie. A winner is determined based on matching combinations of ids that could be a winning arrangement, compared with the current board state. The JS code also changes the active player after each turn, and prevents a player from selecting a square that has already been selected.