This version is used to reinforce HTML, CSS & layout concepts to put your own flare into a classic game of concentration. The scope for this version asks the student to choose a theme for the game including:

• 9 card faces
• 1 card back
• Creating an about page describing about the game and the skills that went into creating it.

This version will integrate with instructor built JavaScript to give the layout built by the student's functionality and show the ability of design & layout to be independent of functionality but strict requirements are needed (specific classes and id’s). In future versions the students will be building out the same functionality that is provided with each student providing their own flare and features. The students will pull the knowledge from what they have learned from the resources they have consumed and the prototypes they have completed and pull it into one cohesive version of this project.

Related Videos

• CSS Animation - Video | Slides
• BootStrap Intro - Video | Slides
• Bootstrap Redux - Video | Slides
• Positioning & Floating - Video | Slides
• Box Model, Margin & Dimensions - Video | Slides
• CSS Selectors, Cascading & Specificity - Video | Slides

Related Prototypes

• CSS Design Layout 1
• CSS Design Layout 2
• CSS Selectors
• CSS Bootstrap Redux

• Fork this repo by clicking on the Fork button located at the top right of this page
• Clone the newly created repo to your local machine - git clone https://github.com/[your_user_name]/memory_match.git - Change [your_user_name] to your user name
• Create a feature branch - git checkout -b version0.1
• Work on the scope defined Below

• Add files to git - git add .
• Commit files (Group files together) - git commit -m "Memory Match v0.1 - Your Name" - Replace "Your Name" with your first and last name
• Send to gitHub (Push) - git push origin version0.1
• Create pull request - Pull request should be made from version0.1 to your repository's master branch - Merge Pull request through Github UI
• Once merge happens through Github UI - Switch to master branch locally - git checkout master - Pull latest merged code - git pull origin master

Choose / design a theme

• Here are a couple examples of past designs
  • *Example 1 - Howard (C5) *
    

 - *Example 2 - Trevor (C5) *

        <br><img src="https://github.com/Learning-Fuze/memory_match/blob/assets/images/Trevor-MM.png?raw=true" width="400">

Layout Components

• General Layout concept
  
• Header Container
  • Game Logo
    • Game Title
    • Settings Link (links to no where yet)
    • About Link (links to a page with a description of the game and what you did in it)
• Stats Container
  • Games Played
    • element that has a class of “games-played”, inside this container:
      • element with class "label" with the text “Games Played”
      • element with class "value" with no text
  • Attempts (number of times the user has clicked on cards)
    • element that has a class of “attempts”, inside this container:
      • element with class "label" with the text “attempts”
      • element with class "value" with no text
  • Accuracy (how many times they got it right / number of total clicks for the current game)
    • element that has a class of “accuracy”, inside this container:
      • element with class "label" with the text “Accuracy”
      • element with class "value" with no text
  • Button Element with: - class of “reset” - Text of “Reset Game”
• Game Area
  • Element with:
    • id of “game-area”
    • 9 matching card elements (18 total) inside with each element having:
      • class of “card”
      • Inside:
        • Card front element with:
          • class “front”
          • img element inside with a valid source
        • Card back element with:
          • class “back”
          • img element inside with a valid source

Add Functionality:

• Inside of the head tag link the following javascript files in order
  • https://code.jquery.com/jquery-2.1.4.min.js
  • http://learning-fuze.github.io/memory_match/v0.1/script.js

Files in repo:

• index.html - the main file
  • Provided HTML general layout
• style.css - the main css file, referenced from index.html
  • link this in the index file
• about.html - the about page for the game.
  • include a picture of you as the designer
  • include a link to your portfolio website. If you don't have this yet, put a dummy link to "#" as the href
  • include a description of what the game is about
  • include a list of skills you needed to make it. This list will grow. =======

Memory match is a game with 18 cards face down and the player has to try and match all 9 pairs of matching cards by remembering the position of the cards. Once the player has match 2 cards they will be displayed face up until all pairs have been matched. Once all pairs have been matched the user will be displayed a message that they have won the game. As the user clicks through the cards stats will be kept letting the user know how many attempts and the accuracy of their choices.

Design Overview

Flow Document

Versions

• Version 1.0 (v1.0) - View Details
• Version 0.5 (v0.5) - View Details
• Version 0.1 (v0.1) - View Details