Memory Game Challenge

Problem Description

Create a Memory Game where players must match pairs of cards by flipping them over. The game tests memory and concentration as players try to find all matching pairs within a time limit.

Requirements

• The game should have a grid of cards, each with a hidden animal emoji.
• When the game starts, all cards are face down.
• The player can flip two cards at a time. If the cards match, they remain face up. If not, they flip back over.
• The player must match all pairs of cards to win the game.
• The game ends when all pairs are matched. A message is displayed indicating whether the player won or lost.

Bonus

• Make a timer that counts down from 50 seconds, and when the timer runs out, the game ends.
• The game should have a restart button to play again.
• When restarting the games, the cards should be flipped back to face down.
• After restarting the game, make sure you don't reveal the cards content before flipping them.

Getting Started

You can create a new project or use our CLI tool to use the starter template.

First Time Setup

Start Working

Solution

To view the reference solution:

How to Review Your Solution

• axe-core is pre-integrated in the starter template. To use it:

1. Open your browser's Developer Tools (F12)
2. Check the Console tab while using your app
3. Review and fix accessibility errors that appear (ignore minor errors)

• Test your app with keyboard to ensure full keyboard navigation (if applicable)

• Add ARIA labels to make your app understandable by screen readers

• Use Claude for a final accessibility & quality check.

  Example Prompt for Claude:

  Then paste your code..

How to Share Your Solution

If you used the CLI tool

1. Fork the frontend-challenges repository
2. Add your fork as a new remote to your existing solution:

3. Open a pull request (PR) from your fork to the main repository.

If you started from scratch

1. Fork the frontend-challenges repository and clone it
2. Navigate to the solution directory:

3. Add your solution files in this directory
4. Push your changes to your fork
5. Open a pull request (PR) to contribute your solution

Need help?

• Follow this guide to making a pull request to an open-source project
• OR, create an issue at frontend-challenges