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

Refer to the video below:

match-game-output.mp4

Design Files

Click to view

• Extra Small (Size < 576px) and Small (Size >= 576px)
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Match Game
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Scorecard

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

• https://assets.ccbp.in/frontend/react-js/match-game-bg.png
• https://assets.ccbp.in/frontend/react-js/match-game-score-card-lg-bg.png
• https://assets.ccbp.in/frontend/react-js/match-game-score-card-sm-bg.png
• https://assets.ccbp.in/frontend/react-js/match-game-website-logo.png alt should be website logo
• https://assets.ccbp.in/frontend/react-js/match-game-timer-img.png alt should be timer
• https://assets.ccbp.in/frontend/react-js/match-game-play-again-img.png alt should be reset
• https://assets.ccbp.in/frontend/react-js/match-game-trophy.png alt should be trophy

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.