Skip to content

Instantly share code, notes, and snippets.

@jaypeasee

jaypeasee/mod1-final-project-board.md

Last active August 3, 2020 14:43
Show Gist options
  • Save jaypeasee/25755a4975a2e1ad1d800dac20c9ce46 to your computer and use it in GitHub Desktop.
Save jaypeasee/25755a4975a2e1ad1d800dac20c9ce46 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
mod1-final-project-board.md

Project Board (Tic Tac Toe), Turing, Mod 1, Final Project

Project Overview

This outlines the ordered steps needed to create a fully functioning game of Tic Tac Toe in web form. Throughout this project, the goal will be to use JavaScript logic to create an experience free of bugs while effectively using the Data Model, LocalStorage and the DOM. Other learning goals include utilizing data attributes, event delegation and crafting DRY code with good SRP practices.

The official prompt for the project can be found here

Iteration 0 - Setup:

  • Create a wireframe of the design.
  • Create a private repo and all of the necessary documents for JavaScript, HTML, CSS assets and the Readme.
  • Using HTML and CSS loosely match the structure of the provided example.

Iteration 1 - Adding Icons to the Grid:

  • When it is a player's turn make it so they can click on a spot in the grid and their corresponding icon will show in that space.
  • A user should not be able to place their icon in a space if there is already an icon in that space.
  • After a player has clicked where they will put their icon, the game should switch turns to the other
    • The h1 should change to say it's their turn.
    • That player should place a different icon on the grid.

Iteration 2 - Determining Winners and Draws:

  • A player should be able to win the game if they get 3 in a row, column or diagonal.
  • If a player has won, the h1 should declare that the player has won.
  • If every grid is filled in and there is no winner, the h1 should change to say it is a draw.
  • Should use a timeout after a player has won or there is a draw.
  • After the timeout, the game should start over.

Iteration 3 - Updating the Player Boards:

  • If a player has won a game, it should be tallied to the h2.
  • Those tallies should be saved to local storage so if the page is refreshed, the user tallies are kept.

Iteration 4 - Wrapping Up:

  • Update the Readme to reflect:
    • Overview of the project and goals
    • Overview of technologies used, your code architecture, challenges, wins and other reflections.
    • Screenshots/gifs of your app.
  • Refactor for DRY and SRP code.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment