A Match Game Built With React.js

by React

In this project, let’s build a Match Game by applying the concepts we have learned till now.

Refer to the video below:

Design Files

Click to view

Set Up Instructions

Click to view
  • Download dependencies by running npm install
  • Start up the app using npm start

Completion Instructions

Functionality to be added

The app must have the following functionalities

  • Initially,

    • Score should be 0 and time should be 60 sec
    • The image to be matched should have the src attribute value as the value of the key imageUrl from the first object in imagesList provided
    • The Fruits tab should be active and the thumbnails with FRUIT as their category should be displayed

  • The timer should start running backwards from the 60 sec

  • When a tab is clicked, then the thumbnails in the corresponding category should be displayed

  • When a thumbnail is clicked, if that is matched with the image to be matched,

    • Score is incremented by one
    • The new image to be matched should be generated randomly among the value of the key imageUrl from imagesList provided

  • When a thumbnail is clicked, if it is not matched with the image to be matched,

    • The game should end, and the Scorecard view should be displayed
    • When PLAY AGAIN button is clicked, then we should be able to play the game again
      • The score and time values should be reset to 0 and 60 sec respectively
      • The image to be matched should reset to the value of the key imageUrl from the first object in imagesList provided
      • The active tab should reset to Fruits, and the thumbnails with FRUIT as their category should be displayed

  • When the timer reached 0 sec, then the game should end, and the Scorecard view should be displayed

  • The App is provided with tabsList. It consists of a list of tabItem objects with the following properties in each tabItem object

    Key Data Type
    tabId String
    displayText String

  • The App is provided with imagesList. It consists of a list of imageItem objects with the following properties in each imageItem object

    Key Data Type
    id String
    imageUrl String
    thumbnailUrl String
    category String

Important Note

Click to view

The following instructions are required for the tests to pass

  • The image to be matched in the app should have the alt as match
  • The thumbnail images in the app should have the alt as thumbnail

Resources

Image URLs Colors

Hex: #2c0e3a
Hex: #ffffff
Hex: #fec653
Hex: #cf60c8
Font-families
  • Roboto

Things to Keep in Mind

  • All components you implement should go in the src/components directory.
  • Don’t change the component folder names as those are the files being imported into the tests.
  • Do not remove the pre-filled code
  • Want to quickly review some of the concepts you’ve been learning? Take a look at the Cheat Sheets.

GitHub

View Github