This device is not compatible.
You will learn to:
Use the functional components of React.
Use React Bootstrap to design the layout.
Lift states up to share data between multiple functional components.
Use React to build the game logic.
Skills
Game Development
Web Development
Prerequisites
Basic understanding of React components and state
Basic understanding of React useState and useEffect Hooks
Good understanding of Javascript, including arrow functions and array handling
Basic understanding of React’s Bootstrap
Technologies
React
Bootstrap
Project Description
In this project, we’ll build a clone of Wordle, a popular guessing game where the goal is to figure out the correct five-letter word of the day. We’ll be asked to fill in the missing code snippets and gradually create segments of Wordle.
Wordle should have a letter grid and a keyboard to add and remove letters. Each letter in the grid is compared with a randomly selected letter of the word.
-
If we enter a letter of the word in the correct spot, it turns the tile green.
-
A correct letter in the wrong spot turns the tile yellow.
-
If we enter a letter that the word does not contain, it turns the tile gray.
-
When we guess the correct word in its entirety, it turns the letter row green. The game ends there and we win!
-
If we haven’t guessed the word by the sixth try, the game ends there too.
When we’re done, our web application should be like the following:
Project Tasks
1
User Interface
Task 0: Initial Setup
Task 1: Develop the Grid Cell (Tile)
Task 2: Develop the Grid Row
Task 3: Develop the Wordle Grid
Task 4: Develop the Virtual Keyboard
2
Game Logic
Task 5: Keyboard Setup
Task 6: Keyboard Setup for the “Backspace” Key
Task 7: Keyboard Setup for the “Enter” Key
Task 8: Add Interactivity to the Keyboard
Task 9: Create the Keyboard Event Listener
Task 10: Develop the Logic of the Acceptable Word
Task 11: Develop the Logic to Validate a Word
Task 12: Display Messages on Game Over
Task 13: Make the Daily Word Generator
Congratulations!