Whack a Mole Challenge

Problem Description

Create a Whack-a-Mole game where players must click on moles as they randomly appear from holes. The game tests reflexes and timing as players try to achieve the highest score possible within a time limit.

Requirements

• The game features a grid of 9 holes and a 20-second game timer.
• Every second, two moles will randomly pop up from the holes.
• Players must click on a mole to "whack" it, which scores one point.
• The moles are only visible for one second before a new pair appears.
• The game ends when the timer runs out, displaying the final score and an option to play again.

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