In this project we will use Advance CSS and apply Javascript for user interaction. Stretch goal create add a timer.
Create a simple memory game using CSS animations and Javascript to add functionality.
- Sublime Text
- Chrome
- Terminal
Concepts to Grock
- CSS Flexbox
- CSS Animation Keyframes
- Javascript event handling
- Javascript conditionals
- DOM
- Fork and Clone this repo
- Inside the js folder create an app.js
- Inside the css folder create a style.css
- Create your HTML structure inside index.html
- Link your style.css and app.js files
- Make it a github page upon completion
- If you complete Strech goal (2), set that branch to display your github page.
- 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
- Create the animation to flip the cards. You can use :hover to test animation
- 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
- 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!!!
- Card Flip - David Walsh, Codepen
- Flexbox - Flexbox