Tic-Tac-Toe frontend project

It’s an ancient Egyptian game from around 1300 BC. It can be played by two people and uses characters ‘X’ and ‘O’.

DESIGN:- The background color is RGB (193,221,221), and all the boxes of tic-tac-toe are pink. Whenever you hover over the boxes, they will become navy blue(you can adjust your background color).

STRUCTURE:-It’s a 3x3 matrix form.

• HTML:- Firstly create a headline “Tic Tac Toe” by <h1> tag. So all the boxes of the game is a div and it’s class is defined as “box”.And all the box is under a main div called“container”.Then I create a button for reset and defined the class name “reset”.

• CSS:-

  BOX part boxes are 100X100 px and the border color is 2px solid black. I used the hover function for the animation look and it will become navy blue. I use “grid-template-columns: repeat(3,100px)” it will make three boxes on and on.

RESET button:- I give the reset button a height of 50px and a width of 100px.

• JavaScript:-

  Winning condition:- Each box is assumed the index of an array. 0 to 8 is the index of each box. The winning conditions are [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6]. If any condition is a match user will win.

**Reset Button:-**I set a variable name resetButton and create a reset function name resetGame(). This button can reset the game while you playing the game and reset when the winner is declared.

**Checking winner:-**I create a function that will check the winner[checkWin()].In this condition create the winning index as” const [a,b,c] = conditions”.It will check all the winning conditions and check by code-->boxes[a].textContent == currentPlayer same for b and c. It will check all the winning conditions, if the winning condition matches then it will send an alert message that “wins”

Other conditions:- If the box is filled then it will return nothing(you can see this on code line no.73). If the condition matches it will show the winner and if the all box filled by the users and not matches with the condition then it will show draw.

CODE :- GitHub link-->https://github.com/Tanaygit646/Tic-Tac-Toe

Overall, it’s basic development code. This code teaches you the basics of Javascript and can be applied in other projects.