Cutiegirl526 / memories

HTML 5, CSS, Javascript, Beginner, Intermediate, CSS Animations, Javascript Functions, Javascript Events

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