1. Create two variables called playerX and playerO. Set them to the DOM element with the id "x" and "o" respectively. This is the text at the top that says who's turn it is.
2. Create a named function with a meaningful name of your choosing. (This will be referred to as the "event handler" in further instructions.) In this function add a console.log() statement to display a message in the console.
3. Create a variable that contains all of the TD elements. Use a for loop or the .forEach() method to add the function as a click event handler to each of the TD elements. Be sure to use .addEventListener() rather than older methods of adding event handlers. Open the console and click a square. You should see the message from your console.log.
4. In your event handler, add a statement to get the id value of the element with the class "currentplayer" and store it to a variable. Display this value using the same console.log() you already have. Try clicking a square to see the value.
5. At the end of your event handler, add a statement to switch the "current-player" class from the playerX to playerO elements or visa-versa. (Remember you can toggle classes.) Try clicking a few squares, you should see the player at the top of the page change as well as the output in the console.
6. In your event handler, add a statement to add the class "x" or "o" to the target element depending on who's turn it is. (the target element is the one that was clicked on. Hint: the event object has a target property.) You should see "X" or "O" appear in the square whenyou click on it. (The letter is displayed using CSS, refer to that file if you want to see how it is done.)
7. Add an event handler to the "New Game" button to clear all the squares.
8. Notice that if you click on a square that is taken by the other player, the marker may turn into a question mark. This is because you have added both "x" and "o" classes to the document. If you used className instead of classList you would be able to take over another players square. Also, if you click on your own square you wasted your turn. Modify the event handler to check to see if there is a class on the element already. (Hint: this is a good use of className but there are other ways to do it.) Don't put a marker or count the turn if the square is already taken.
9. Notice that there is a file called winner.js already referenced from the HTML file. This contains a function called checkWin(). Since it is included before the main.js file, you can call this function from your code. You can examine this function so that you understand how it works. Call the checkWin() function from the event handler. The first argument is a string identifying the player, "x" or "o". The second argument is the list of td elements you selected previously.
10. If there is a winner the checkWin() function will return an array of the winning elements, set the background colour to yellow of the three winning squares to highlight them and open an alert box to say who the winner is. Depending on which browser you use, you may not see the last marker or the highlight color until you close the alert box. This is fine. There is a trick to fix this but don't worry about it.
11. In the event handler for the "New Game" button, add code to remove the background colour. Play Tic Tac Toe!
If you have project or assignment files, You can send at firstname.lastname@example.org directly