Hello,

I have a tic tac toe project that I need to build with CSS, HTML and vanilla javascript. I need help to code it and understand what to use, we need to use what we reviewed which is functions, loops, and writing conditionals. We also learned about HTML, CSS, and the DOM.

The gameboard page should include the 3x3 grid (of divs), and at minimum a reset button. We need to use id and/or class on clickable elements to help wire this up in JavaScript afterwards.

We also need to put elements and attach functions via event listeners

Need a variable to keep track of moves. It will be used to indicate whether or not to draw an X or an O

Here are the requirements.

A user should be able to click on different squares to make a move.

Every click will alternate between marking an X and O

Upon marking of an individual cell, use JavaScript to add an X or O to the cell, according to whose turn it is.

A cell should not be able to be replayed once marked.

You should not be able to click remaining empty cells after the game is over.

Add a reset button that will clear the contents of the board.

Display a message to indicate which turn is about to be played.

Detect draw conditions (ties/cat's game)

Detect winner: Stop game and declare the winner if one player ends up getting three in a row.

Hint: Determine a set of winning combinations. Check those combinations on the board contents after every move.

I need someone to help me walk through the steps, give me ressources and build it.

Thank you.