Wordle game

Wordle Clone - Problem Statement

Functional Requirements

• Display a 6-row grid for word guesses.
• Allow users to input letters using:
  • Physical keyboard
  • On-screen (virtual) keyboard (A–Z)

Input Handling

• On pressing "Enter":
  • Validate if the guess is exactly 5 letters long
  • Validate if the guess exists in the fetched word list

Feedback (Color Coding)

• Green → Correct letter in the correct position
• Yellow → Correct letter in the wrong position
• Gray → Incorrect letter

Game Flow

• User gets 6 attempts to guess the word
• After:
  • Correct guess OR
  • 6 attempts
    Show result message

New Game

• Provide a "New Game" button
  • Must have: data-testid="new-game-btn"
• On click:
  • Generate a new solution
  • Reset all game state

Hint System

• After 3 incorrect attempts:
  • Show a hint → First letter of the solution
  • Show only once per game

Error Handling

• Show error messages for:
  • Guess less than 5 characters
  • Guess not present in word list

Technical Requirements

• Fetch words from: https://random-word-api.herokuapp.com/word?length=5&number=1000

• Randomly select one word as the solution

• Normalize all inputs to uppercase

• Use:

• React functional components

• React Hooks (useState, useEffect, etc.)

UI Requirements

• Show loading state until words are fetched
• Implement layout and theming using CSS

Edge Cases & Constraints

####Invalid Inputs

• Pressing "Enter" with less than 5 characters → Show error
• Valid-length guess not in word list → Show error

Letter Handling

• Lowercase input → Convert to uppercase internally
• Solution may contain duplicate letters
• Only correctly matched letters should be colored

Game End Behavior

• Game ends when:
• Correct guess OR
• 6 attempts completed
• After game ends:
• Disable all inputs and keyboard

Reset Behavior

• Clicking New Game multiple times rapidly:
• Should not break state or fetching logic
• Must reset:
• Guesses
• Current guess
• Keyboard state
• Errors
• Hint
• Solution

Hint Rules

• Shown only after 3rd incorrect attempt
• Shown only once

Testing Constraints

• Avoid relying on emoji-only buttons (e.g., icons)
• Tests using getByText may fail
• Handle async state updates carefully to avoid race conditions

Additional Constraints

• Only one word is selected per game
• Guess must be exactly 5 characters long
• Game always ends after:
• 6 attempts OR
• Correct guess
• No external validation API
• Validation is based only on fetched word list