This device is not compatible.
You will learn to:
Use React to build the game logic.
Use the functional components of React.
Uplift the state to share the data between multiple functional components.
Use React Hooks to develop the application.
Skills
Web Development
Game Development
Prerequisites
Basic understanding of React components and states
Basic understanding of React useState and useEffect Hooks
Good understanding of JavaScript, including arrow functions and array handling
Basic understanding of React’s Vanilla CSS
Technologies
CSS
React
Project Description
In this project, we’ll build a popular online memory game where the goal is to level up our memory. We’ll be asked to fill in the missing code snippets and gradually create segments of the memory game.
At the start of the game, we’ll have the Educative icon depicted on these cards, and a turn counter to keep track of the number of turns. Players have to click on the cards to flip them and find all the matching pairs. If the clicked cards are not the same, they will be flipped back, and the turn counter will be incremented by 1.
Once the game is complete, we can also reset it using the “New Game” button to reshuffle all the cards and set the turn counter back to 0. We need to win the game within 15 turns.
The gif below shows the final layout of the website:
Project Tasks
1
Get Started
Task 0: Explore the React.js Project
Task 1: Start the Application
2
The Header Component
Task 2: Import the Images
Task 3: Develop the Header Component
Task 4: Create the Shuffle Function
Task 5: Import the Header Component
Task 6: Add Styles to Header
3
The Grid Cards
Task 7: Develop the Grid Cell
Task 8: Develop the Grid Application
Task 9: Create the Choice Function
Task 10: Import the Grid Component
Task 11: Style the Grid Cards
Task 12: Select the Correct Cards
Task 13: Add the Winning Condition
Congratulations!
Relevant Courses
Use the following content to review prerequisites or explore specific concepts in detail.