ReactCHALLENGES
💻 Challenges🎁 Referral Program🐞 Report a Bug

© 2025 reactchallenges.com

Terms of ServicePrivacy PolicyContact

#23Wordle simplified version
60min

Overview

A simplified version of the previous Wordle challenge, with more pre-built components to make guessing a 5-letter word easier.

Requirements

  • Display 6 rows representing the maximum number of guesses.
  • Allow typing letters (via on-screen keyboard or physical keyboard) to fill the current row.
  • Pressing "Enter" (or clicking Submit) submits the current word.
  • Validate that the guessed word exists in the list of valid words.
  • Color the tiles based on correctness:
    • Green: correct letter in the correct position.
    • Yellow: correct letter in the wrong position.
    • Gray: letter not in the word.
  • Update the on-screen keyboard keys to reflect discovered letter statuses.
  • Display a message when:
    • The word is not valid.
    • The player wins (You win!).
    • The player loses (You lost! <solution>).
  • Disable further input after a win or after 6 incorrect guesses.
  • Implement a "delete" action to remove the last typed letter.
  • Ensure that rows cannot exceed 5 letters.
  • Keep the message empty after submitting a valid but incorrect word.

Notes

  • Most UI components are pre-built:
    • Row and Tile handle rendering of letters and colors.
    • Keyboard renders all keys and manages basic click events.
  • Focus on implementing the game logic inside handleOnKeyPress:
    • Add letters to word.
    • Submit a guess and update guesses.
    • Validate words against the validWords list.
    • Handle win and loss conditions.
    • Delete letters correctly.
  • Update getKeyStatus to reflect correct, present, or absent letters on the keyboard.
  • Use the SOLUTION constant as the word to guess.
  • Input should work both with on-screen keys and the physical keyboard.

Tests

  1. renders 6 rows and the keyboard keys
  2. typing a letter adds it to the current row
  3. typing a full word and submitting adds it to the guesses
  4. winning the game shows the victory message and blocks further input
  5. after 6 wrong guesses, game over message is shown and input is blocked
  6. typing an invalid word shows 'Not valid word' message and does not add to guesses
  7. delete removes the last letter from the current row
  8. does not allow adding more than 5 letters to a row
  9. blocks input after winning
  10. blocks input after losing
  11. message remains empty after submitting valid incorrect word
  12. typing letters with the physical keyboard adds them to the current row and second row empty
  13. keyboard keys update colors according to guesses
  14. board tiles update colors according to hello
  15. board tiles update colors according to hight
Subscribe to StartBack