virtualvasu / tic-tac-toe Goto Github PK

The Task is to create a simple tic tac toe game using HTML, CSS and JavaScript.

There are 4 subtasks, each of which implements some feature of the game.

1. Create index.html, styles.css and app.js files

2. Create the game board and style it properly

3. Add a button "restart" which will later be given the functionality to restart the game

   • Hint 1: There should be 9 div elements, each of which is a cell for the game board.
   • Hint 2: Use CSS Grid

1. For each of the 9 cells in the game board, add the functionality such that clicking on the cell will mark it with either X or O
2. If X was marked in the previous move, then O will be marked in the next move, You may start with either X or O.
3. Make sure that once a cell is marked, it doesn't change it's state

• Hint 1: get all the cells using DOM and store them in an array to manage their state.
• Hint 2: Add a click event listener to each of the div tag using DOM, use conditional statements to avoid overwriting a cell's state

1. Make two functions checkWin and checkTie for determining the winner of the game.
2. Check the conditions for winning the game

• Hint 1: Note that there are only a handful of winning combinations.
• Hint 2: Use loops to check if the any of the winning combinations occur, if the board is full and checkWin returns false, then it's a tie.

1. Make a function to add functionality to the restart button

• Hint 1: Clear the board using loops, and return to the original state of the board.