This project is a Wordle clone, where users have 6 attempts to guess a 5-letter word. As in the original Wordle game, users receive feedback after each guess, helping them determine which letters are correct, misplaced, or incorrect.
- 6 Guess Limit: Users can guess a 5-letter word within 6 attempts.
- Color-coded Feedback: Each letter's background changes color to indicate its correctness:
- Green for correct letters in the right spot.
- Yellow for correct letters in the wrong spot.
- Gray for incorrect letters.
The project was built as part of the Joy of React course, and it allowed me to practice several fundamental concepts in React.
During this project, I solidified my understanding of several important React concepts:
- Component Design: I created reusable components like
GuessInputfor submitting guesses andKeyboardfor user interactions. - State Management: Handling state with
useStatewas crucial, especially for tracking guesses, feedback, and the game’s status. - Event Handling: Implementing controlled input for handling guesses gave me hands-on experience in form management in React.
- Conditional Rendering: I used conditional rendering to show different UI elements based on game outcomes (win/lose) and the number of guesses left.
- Handling Game Restart: I added a "Restart Game" button, allowing users to reset the game and start fresh, reinforcing how to manage complex state changes in React.
This project uses Parcel, a modern JavaScript build tool, to streamline development. To run the project locally:
- Install the necessary dependencies with
npm install. - Start the development server with
npm start.
This project was completed as part of the Joy of React course by Josh W. Comeau. The course provided excellent guidance and hands-on exercises that helped deepen my understanding of React.
If you're interested in React and want to improve your skills, I highly recommend checking out the course: Joy of React.