This application begins with two players, and each is assigned an emoji. The goal is for one player to connect three icons in a row, either horizontally, vertically, or diagonally. The player who started the game should go second on the next play-through. A notification should be displayed on the screen to signal that a player has won. The application contains an array of nine blank spots that it checks after each move to determine if a winning combination has been made. The application also logs the player's wins on one side of the game board.
- Fork and clone this repo.
- Type cd spooky-tic-tac-toe to move into the root directory
- Type open index.html
I dedicated approximately 40-50 hours of work to this project, breaking it down into four iterations to ensure I could focus on each element and learn how they interact.
The learning goals were to demonstrate understanding of DRY JavaScript, event delegation, data model vs. DOM, and for loops. Use problem solving to break down large problems and trust myself to find logical solutions.
The wins from this challenge were truly understanding class-to-class interaction and feeling very confident in my understanding of CSS and HTML.
The challenges I faced with this project were in the data model, such as getting it to display before the DOM as I am a very visual learner, as well as a bug that I had that would keep resetting my player1 to the player that had started previously. It took the process of elimination to solve the player1 issue. I had to break down each function that it was involved in to pinpoint where my problem had arisen. I had also attemped to the local storage and was able to get it to save the information but was unable to pull the data and have it redisplayed on the DOM.