Project provided by The Odin Project. It puts the learners recent knowledge of the useEffect and useState react hooks to the test by having them build a memory card game. Make a game where users must memorize each card they pick amoung 12, which are rearranged every card pick. A score is kept of the current correct cards, and of the users best score.
-
Create a new React Project.
-
Take some time to think about the features you want to implement, which components you need, how to structure your application, and how to get the images from an API. Your application should include a scoreboard, which counts the current score, and a “Best Score”, which shows the highest score you’ve achieved thus far. There should be a function that displays the cards in a random order anytime a user clicks one. Be sure to invoke that function when the component mounts.
-
You also need a handful of cards that display images and possibly informational text. These cards and texts need to be fetched from an external API. You can use anything from Giphy to a Pokemon API.
-
Now that you’ve thought about the structure of your application, set up the folder structure and start creating the components.
-
Style your application so you can show it off!
-
As always, push the project to GitHub, and don’t forget to deploy it.