set up basic html structure and add title and link css
in the html doc add table to create the 9 x 9 grid for the board. Each table row (TR) will contain 3 table cells, which will contain the class value =“cell” and the class id which will start at 0 and increase with each cell. This will form the tictactoe board. See example below.
The winner of the game needs to be displayed. In order to do so I will add a div which will have the div class=”endgame”
Add a button to allow the player to reset the game after the winner is announced.
Use CSS file(styles.css) to style board and add endgame message at the top of the board
The first element to be styled is table data, then the table element which includes table row and table data.
removed top and bottom border to create the tictactoe table
the first child and last child were targeted in order to remove the top, bottom, left and right borders.
next set up variables in javascript
board is initialized, the origBoard is declared as a variable, which are containers for storing information. The board will contain the X and O markings.
The human and ai players are declared as const variables that cannot be reassigned(X,O). The human player is given the value of O and the ai is given the value of X.
Create array for all possible winning combinations which will also be set as a const.
Cells = document.queryselectorAll(‘.cell’); the cells variable will store a reference to each cell, and Document.queryselectorAll will select each cell that has a class of “cell”, which are all the td elements.
Call function to start the game, which is startGame(); this function will be used to start the game as well as replay the game. Then set display to none so that this will be applied to the replay instance.
all the possible winning combinations within the board are listed as const wincombos.