Match Maker

In this project we will use Advance CSS and apply Javascript for user interaction. Stretch goal create add a timer.

Objective

Create a simple memory game using CSS animations and Javascript to add functionality.

Requirements

• Sublime Text
• Chrome
• Terminal

Desired Outcome

Concepts to Grock

• CSS Flexbox
• CSS Animation Keyframes
• Javascript event handling
• Javascript conditionals
• DOM

Your Challenge (Total: 9)

1. Fork and Clone this repo
2. Inside the js folder create an app.js
3. Inside the css folder create a style.css
4. Create your HTML structure inside index.html
5. Link your style.css and app.js files
6. Make it a github page upon completion
7. If you complete Strech goal (2), set that branch to display your github page.

Breakdown:

Basic HTML and CSS (3)

• Follow the design layout to create the HTML structure.
• Use flexbox CSS to layout the cards
• Add four(4) images to the assets folder to use for your cards

CSS animations (3)

• Create the animation to flip the cards. You can use :hover to test animation

MAKING A GAME!!(3)

• Create an onclick event to turn each card on click
• Randomize card images at the beginning of each game
• If the cards match add a point to the counter
• If the all cards are matched create a winner message

Stretch Goals (1)

Part two (1): Javascript

• Create a new branch called timer
• Create the timer functionality to count down from a minimum of 30 secs
• If the all cards are matched before the time runs out, create a winner message else create a message for the player to try again.
• Add more cards!!!

Resources

• Card Flip - David Walsh, Codepen
• Flexbox - Flexbox