Click here to view the live project đź”—
Icon's Memory Game was created for kids from age 3-6 years but even adults can enjoy playing! Memory games help building thinking skills, improving the concentration, improving the memory, attention, and persistence. The benefits are wide, especially as everyone needs to have the brain constantly stimulated by learning new things so this is a great experience for kids while they can have fun playing.
- User Experience (UX)
- Features
- Technologies Used
- Languages Used
- Frameworks, Libraries & Programs Used
- Testing
- Deployment
- Credits
This game was created with the main intent to develop quick thinking skills, improve concentration, focus and develop the memory! The brain is a powerful machine that always needs fuel and action. Keep that brain active by playing memory games!
-
-
- As a First Time user, I want to easily understand the main purpose of the site and learn more about the game.
- As a First Time user, I want to be able to easily navigate throughout the site to understand and play the game.
- As a First Time user, I want to learn exactly how the game works by checking the instructions.
-
- As a Returning user, I want to get keep playing the game and practicing to getter better scores.
- As a Returning user, I want to finish the game with a better time.
- As a Returning user, I want to to complete the game beating all my previous records.
-
-
-
I wanted to give a high color contrast to the project. So I have chosen to use all the three primary colors (red, yellow, and blue) all the three secondary colors (orange, green, and violet) and also white and black.
- The main colors used are Red (#FF0000), Yellow (#FFFF00), Blue (#0000FF), Orange (#FFA500), Green (#00FF00), Violet (#EE82EE), Black (#000000), White (#FFFFFF), and Grey (#EAEAEA).
-
-
The font choose for the H1 headers was the Sora font.
-
All fonts were imported from Google Fonts.
-
-
Interactive Modal pop-up with instructions and play game options.
-
Memory game counter moves - It counts the moves everytime the user flips two cards, it adds one move to the counter. If the user can finish the game with lesser moves the better
-
Memory game timer - The timer starts as soon as the user interacts and opens the first two cards.
-
Interactive Modal pop-up when game is fisished with "Play again" button
-
Stars score rating feature based on the number of moves that were performed by player. If moves are less than eight the player gets three stars. If moves are beetween nine and thirteen player gets two stars. Anything above forteen moves player gets one star.
A brief overview of the languages, frameworks, and other tools I've used on this project:
-
- Semantic markup language as the shell of the site.
-
- Cascading Style Sheets as the design of the site.
-
- Loaded Bootstrap to provide all its pre-built classes, grid and font functions.
-
- Used to add interactive, for modal pop-up and for the memory game to run properly.
-
- Bootstrap was used to assist with the responsiveness and styling of the website.
-
- Used to check and validate all JavaScript code to check for any typos or errors.
-
- Google fonts was used to import the
-
- Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
-
- GitHub was used to store the projects code after being pushed from Git.
-
- Balsamiq was used to create the Wireframes during the design process.
-
- Used for testing and fixing website bugs.
-
-
-
All the links and were tested thoroughly.
-
The website was tested in Google Chrome, Microsoft Edge, Mozilla Firefox, both on Windows and Mac OS.
-
Through the Console device toolbar it was also tested using the following emulated devices: Moto G4, Galaxy S5, Pixel 2, iPhone 5/SE iPhone 6/7/8, iPhone X, iPad, iPad Pro, Surface Duo.
-
Used Am I Responsive for testing different viewports and a Mockup Generator to create the image being used on the top of this readme.
-
The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project:
-
W3C Markup Validator - Results - I have validated using Direct Input from each HTML page and by URL.
-
W3C CSS Validator - Results - I have validated CSS using Direct Input and by URL. OBS: There is 10 warning due to some -webkits added on CSS, they were imported from external libraries and are needed to add interactivity.
-
-
While creating the Modal pop-up in the index.html page the modal was not appearing on the browser. 1.1 Fix: After closer look it was because bootstrap was interfering with the classes modal-container, modal_container and modal. I have updated these classes name and it fixed the bug.
-
While trying to load the Font Awesome Icons there was an error and the Icons were not appearing. I was using a CDN as a source to load the Icons. 2.1 Fix: I was able to fix this by creating an account with Font Awesome and adding the script source references that they have reccomended.
-
While running the JavaScript code through a validator it showed that a few semicolons were missing and a few typos. 3.1 Fix: Added semicolons to the missing lines and fixed the typos.
-
While trying to run the game it was not running properly. 4.1 Fix: While checking why I the game source on the gamt.html page was incorrect. After I updated it fixed the problem.
-
For this project, I have used the cloud-based IDE Gitpod and GitHub as a free git repository hosting.
-
I started the project by creating a new Repository on GitHub and loading the Code Institute Gitpod Template.
-
Installed the Gitpod extension and on my GitHub repo I clicked on the Gitpod button to create a new Master Workspace on GitPod.
-
After creating the workspace I developed the website using Gitpod and pushing my commits to GitHub using the following commands:
git add "file-name"- To add a file for staging.git commit -m "description-of-update"- To commit.git push- To push my commits to GitHub- I have also used extra git commands such as:
python3 -m http.server- To run a preview of the website on the browser.git status- To display the current state of the working directory and the staging area.
-
- Go tho this project repository in GitHub while signed in in your own GitHub account.
- Click on the dropdown menu Code option.
- Click on "Open with GitHub Desktop" to clone and open the repository locally.
- Click on the "Choose" option and navigate to the local path where you want the cloned repository to be.
- Click "Clone"
- Click here for more cloning GitHub options.
-
Vertical alignment with help from Stack Overflow: Link Here
-
The Modal pop-up was created with the help from Florin Pop: Link Here
-
The Memory game itself was based on Sandra Israel JavaScript memory gave: Link Here
-
The Card flip Animation was based on Tutorials Point: - The Memory game itself was based on Sandra Israel JavaScript memory gave: Link Here
-
Code Institute Course for the great idea of developing a memory game.
-
Bootstrap for the large and free libraries.
-
Font Awesome for the huge collection of free icons they offer.
- No external content was used for this project.
- No external media was used for this project.
-
My mentor Akshat for all his help and ideas.