MATCHING PAIRS - Introduction

Welcome yourself to a Memory game, also know as Matching Pairs - a game were you have to flip a game to match same image!

MATCHING PAIRS or memory game is a delightful and challenging activity that tests your ability to recall information it’s about training your brain to retain information and make connections. Its a very simple and easy game to play with time counting downward, you flip a card then flip another one to look for the same exact image, and when you match a pair...those two matched images stay without flipping back, then you have to continue till you match all rows and column. But if you are unable to match all cards before the time runs out, a end game function is called and you won't be able to flip anymore cards, the only way to keep on playing is to click on the restart button to get all functions back in place :D. So flip those cards, exercise your mind, and enjoy the thrill of matching! View live game

Users Goal
Site Owner Goal
Users Experience
Users Stories
Features
Technologoies or Langauge Used
Google
Design
Colors
Libraries & Tools
Validation
Testing
Bugs and Fixed bugs
Deployment
Credits and Acknowledgements

Users Goal

To get what they expected
To play a game free from bugs
To play a game responsive for all screen size
Easily understand what the game is about
Card are flip when they are clicked
To play a simple matching pairs

Site Owner Goal

To create a site around the theme of 'cards'
To allow users to have fun with something simple with their free time
To provide users with what an AI images looks like
To show users what html, css and javascript looks like in something simple
To use images, colours, interactivities and effect in a simple project
To build something with my new knowledge to the users
To provide users with something they can always come back to

Users Experience

Targeted Audience

Users that are looking for a game to play free from bugs
Users who love to play games on all device whether big or smaller screen size
Users that arr looking to chellenge them with a game with timer
Someone looking for a simple a quick game
Users looking for a quick start game without too many options
Users trying to train their brain

Users Requirement an Expectations

App free from bugs
Fully reponsive
Quickly find relevant informations
Texts can be well readed
Users get what they expected according to the app name
Time work as expected
Timer is restarted when restart button is click

Users Stories

Users

As a user I can decided to restart the game so that I can start again from the very beginning
As a user I can see timer counting so that I can know how many time left to flip all game
As a user I can restart the game at any moment so that the timer can start again from the very beginning
As a user I can decide what card to flip at any time
As a user I can quite from the game at any moment when i like

Site Owner

As a site owner I can provide a easy to use and responsive game so that they can have a good user experience (Must have)
As a site owner I should provide a game with timer to keep user focus while playing
As a site owner I should provide a game from bugs so that user can have a good user experience
As a site owner I should make sure each card flip work as expected
As a site owner I should make sure restart button restart every part of the game so that user can have good user experience

Features

Row and Columns: The game board consists of a row and columns that is customized to hold different numbers of cards for larger and smaller screen.

View larger screen

View smaller screen
Timer: Keep track of how long it takes you to complete the game and when you finish the game in time a congratulation alert is display and time counting stop else, when the time get to zero and you still haven't finish the game, card flipping stop working.

View timer image
Restart Button: Help you restart the game at any giving moment.

View Restart button image

Technologies or Langauge Used

HTML5
CSS3
JavaScript
jQuery

Google
- Its was used to know how to structure some part of the game
- Was used to search out some code's

Design

Design Idea

This game was designed in a way things could be easy for a user and texts are easily read, well displaying colors and ai images as the flip cards

Images

The images used for this design or game was downloaded from an Ai open site

View board image

Colors

Background-color

background-color: #0b0b39;. I chose #0b0b39 type blue color as the background color because i wanted something that could make my text well readable

Libraries & Tools

Validation

WC3 Validator

view validation HTML
Jigsaw W3 Validator

view validation CSS
JShint

view validation JShint
Lighthouse

view validation Lighthouse

Testing

Step	Expected Result	Actual Result
Click on any cards	card will flip over	Works as expected
Click on the 'Restart button'	Everything will restart back to normal	Works as expected
Click on the 'Restart'	Time will restart back to 60 seconds	Works as expected
Samll screen size 'Responsive'	Game is reduce to fit	Works as expected
Large screen size 'Responsive'	Game height and width increase to fit	Works as expected

Bugs and Fixed bugs

Bugs	fixed
When i tested my HTML code found out there was missing closing tag which resulted to an error in the WC3 Validator	Closing end tag added and results are now green
Tested my javscript code with jsHint and found out there was missing semicolons	Missing semicolons added now test passes

Deployment

This website was deploy with GitHub Memory Game

How to deploy with github

In the GitHub repository
Scroll halfway down, on the right side of your screen
Click on github-pages
A list of all lastest commit will appear, then click on the following commit you want to deploy

For the source

1.select Branch: master
2.After the webpage refreshes automaticaly you will see a ribbon on the top saying: Your site is published

You can fork the repository by following these steps:

1.Go to the GitHub repository
2.Click on Fork button in upper right hand corner

To clone the repository by following these steps:

1.Go to the GitHub repository
2.Locate the Code button above the list of files and click it
3.Select if you prefere to clone using HTTPS, SSH, or Github CLI and click the copy button to copy the URL to your clipboard Open Git Bash
4.Change the current working directory to the one where you want the cloned directory
5.Type git clone and paste the URL from the clipboard
6.Press Enter to create your local clone.

Credits and Acknowledgements

Special thanks to the following:

Tutor team for their hard work
My Mentor Mo Shami
And slack students

Elvisthegreat / matching-pairs