- ✅ Render a game board in the browser
- ✅ Switch turns between X and O (or whichever markers you select)
- ✅ Visually display which side won if a player gets three in a row or show a draw/"cat’s game" if neither wins
- ✅ Include separate HTML / CSS / JavaScript files Stick with KISS (Keep It Simple Stupid) and DRY (Don't Repeat Yourself) principles
- ✅ Use Javascript for DOM manipulation
- ✅ Deploy your game online, where the rest of the world can access it
- ✅ Use semantic markup for HTML and CSS (adhere to best practices)
- ✅ Keep track of multiple game rounds with a win counter
- ✅ Get inventive with your styling, e.g. use hover effects or animations to spiff things up
- ✅ Use LocalStorage to persist data locally to allow games to continue after page refresh or loss of internet connectivity
- ✅ A working game, built by you, hosted somewhere on the internet
- ✅ A link to your hosted working game in the URL section of your Github repo
- ✅ A git repository hosted on Github, with a link to your hosted game, and frequent commits dating back to the very beginning of the project
- ✅ A readme.md file with explanations of the technologies used, the approach taken, installation instructions, unsolved problems, etc.
- need $your_turn & $winner etc. variables
- create board with css - table, rows and cells.
- player turn as a boolean O = true, X = false
- take turn - click on square
- current player switches to next player and next player becomes the current player
- error if player clicks on a cell already active
- is the game over?
- mark/change cell style (change class) to show as engaged
- $winner based on the cell state - check all 4 directions
- no? are there empty cells? next player, else there is a tie
Idea was to consider the board squares an array and indexOf to get the values into the board but with more jQuery functions. I realised that it was just about displaying as a grid.
💬 more to come.