Wordle Challenge

Problem Description

Build a clone of the popular word game Wordle, where players have six attempts to guess a five-letter word. Feedback is given for each guess in the form of colored tiles indicating when letters match or occupy the correct position.

Requirements

• A random five-letter word is chosen every time the app launches.
• Players have six attempts to guess the word.
• After each guess, the game provides feedback:
  • Correct (Green): The letter is in the correct position.
  • Present (Yellow): The letter is in the word but in the wrong position.
  • Absent (Dark Gray): The letter is not in the word at all.
• After the game ends, display a "Reset" button so the player can play again with a new randomly-chosen word.
• No need to validate if a guess is a valid English word.

Colors

• Default (Light Gray): #d3d6da
• Correct (Green): #6aaa64
• Present (Yellow): #c9b458
• Absent (Dark Gray): #787c7e

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