JavaScript badge

Project: Memory Card

JavaScript Course

Introduction

Here we go again with a new project! Let’s make sure you understand the concepts so far. The main goal of this project is to use hooks or lifecycle methods as well as a lot of state.

How The Game Works

Go play around with this student’s solution to find out for yourself how the Memory game works. Although this example uses cartoon characters, you can use anything you like for your game.

Assignment

  1. Create a new project using create-react-app.
  2. Take a little bit of time to think about how you want to implement your application, the features you want to implement, which components you need, and how to structure your application. Your application should include a scoreboard, which counts the current score, and a “Best Score”, which shows the best score you achieved thus far. You also need a couple of cards that display images and possibly informational text. 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.
  3. Now that you’ve thought about the structure of your application, set up the folder structure and start creating the components. We suggest you use functional components and therefore hooks in this project.
  4. Style your application so you can show it off!
  5. As always, push the project to GitHub.

Please Log In or Sign Up to view user submissions for this project!

Improve this lesson on GitHub

Have a question?

Chat with our friendly Odin community in our Discord chatrooms!

Open Discord

Are you interested in accelerating your web development learning experience?

Get started
Thinkful Logo

Thinkful

  • 5-6 months

    5-6 months

  • Job Guarantee

    Job Guarantee

  • 1-on-1 Mentorship

    1-on-1 Mentorship