vladd-png / which-dwight

Which Dwight?

Solo Project - Module 1

Learning Goals

• Accurately build out a provided comp
• Write well structured and semantic HTML
• Craft clean and DRY CSS
• Use JavaScript to interact with the DOM
• Develop your skills in writing:
  • helper functions
  • classes and objects
  • storing to local storage
• Manipulate the page after it has loaded adding, removing, and updating elements on the DOM
• Understand event bubbling and use event delegation on dynamic elements
• Working with two people on one game
• Only One HTML File should be used

Technologies Used

• HTML
• CSS
• JavaScript

Iteration 0 - Single Player Layout & UI

1. User should see an input for their name, and a “Play Game” button.
2. User should enter their name, click “Play Game”, then see a greeting including their name and directions for how to play the game.
3. If the user attempts to click the “Play Game” button before entering their name, they should receive a small but clear message as to why they can’t yet click the button.
4. Once the user clicks “Play Game” on the directions screen, they should see ten cards, face down.
5. User should be able to click on any card. Once each card is clicked on, the other side of it should be displayed.

Iteration 1 - Single Player Matches

1. On the left hand side of the page, the player should see their name and the number of “Matches This Round”
2. User should only be able to flip over two cards at a time.
3. If the two flipped cards match, they should disappear and the “Matches This Round” count should increase.
4. If the cards don’t match, the user can re-click them to turn them back over.
5. Once all matches are found, the user should see a congratulatory message including their name and time it took.

Iteration 2 - Better UI

1. Each time a user plays, the ten cards should be assorted differently.
2. Anytime a card flips over, there should be a smooth transition.

Iteration 3 & 4 - Local Storage for Two Players

1. The users name should persist in Local Storage
2. Two users should be able to compete with their names displayed on the screen.
3. A clear visual should be provided at all times so users know whose turn it is, and how many matches each player has.
4. When the game is over, the winner’s name and (total) time took playing appears on the page. The visual indicator of whose turn it is no longer indicates it is either players turn.
5. When the game is over, the users can click “Play Again” to start the game over from scratch.

Provided Comps