Project
Memory Game
Javascript Basics
Dom Manipulation
External Library
Duration
2 weeks
Beginner
Introduction
The classic Memory Game is a simple yet engaging game that challenges players to test and improve their memory skills. It is a popular game that has been enjoyed by people of all ages for generations, and its enduring appeal lies in its simplicity and versatility. The game involves flipping over cards to reveal pairs of matching images or symbols, with the goal being to find all the matching pairs in the shortest amount of moves and time possible.
Prerequisites
- Practical knowledge of HTML & CSS
- Basic concept of Javascript
Requirements
Please refer to the above video for a visual walkthrough of the project requirements.
Features
- Board of 20 Cards. The icons are from Font Awesome.
- Display 3 stars for 30 moves, 2 stars for 40 moves, and 1 star after.
- Show the number of moves taken to complete the game.
- Show timer.
- Add Reset button.
- Use Animate.css to add animation.
- Show the score at the end using SweetAlert2 Popup.
General
- Clean Code.
- Responsive UI.
Roadmap
Below is the weekly breakdown of how to approach the project. This is how an actual developer would approach and build the project.
Create the basic structure for the App with the necessary functionality.
Tasks
- Board of 20 Cards. The icons are from Font Awesome.
- Display 3 stars for 30 moves, 2 stars for 40 moves, and 1 star after.
- Show the number of moves taken to complete the game.
- Show timer.
This week add a reset button, animation, and a pop-up. Finally, check the app for issues or bugs.
Helpful Tools
- Use icons from Font Awesome
Contributor(s)
John Doe
Founder and Fullstack Developer at freeCodeProject.org
Created this project.