Sobes.tech
Junior — Middle+

React card guessing game

livecode

Task condition

Create an interface with six cards containing different data, placed at the bottom of the page. In the center of the screen, there should be a separate card with hidden content. The user must identify which of the six bottom cards match the hidden data in the central card by clicking on one of the bottom cards. A correct choice awards 20 points and the game continues; an incorrect choice resets the current score.

Requirements:

  • Implement component(s) in React.
  • Six cards with unique data should be positioned at the bottom.
  • The central card displays only a "puzzle" without revealing data.
  • Clicking any of the bottom cards checks for a match with the central data.
  • On a match: increase the score by 20 and generate a new set of data.
  • On a mismatch: reset the score to 0.
  • Update the state without reloading the page.

You can use any state management approach (useState, useReducer, Context, etc.), but keep components clean and separate logic from presentation.