Wordle Game Project
Design the Wordle game, a single-player challenge where players guess a five-letter word within six attempts. Create the game layout and implement a feedback mechanism for correct, present, or absent letters. You will be building this project as part of our JavaScript Course.
Resources: NeetoCode with a list of 600 words.
Things you need to know: Conditionals, Functions, HTML DOM Selection and Manipulation, Browser Events.
Task - 01
Add the heading Wordle Game at the top of the container.
Add an input field that accepts up to 5 letters and is auto-focused when the game starts.
Add a button labelled Submit Guess to submit the entered guess.
Task - 02
Use
Arialas the font for the game, with a light background color#f4f4f4.Center all text on the page.
The game area should have a white background with a slight border and rounded corners.
Task - 03
Create a grid layout for the board with 5 cells per row, with space between each cell.
Make sure each cell is a square.
Task - 04
Place a Submit Guess input centered directly below the game board.
The submit button should be styled with padding and a bold font.
Add a paragraph below the submit button to display the feedback message.
To style the feedback message, add a "Congratulations! You guessed the word" as a placeholder text for now.
The feedback messages should be displayed below the button, bold and easy to read as per the image.
Remove the placeholder text after styling, as its display is handled later in the functionality.
Task - 05
Initialise the game with a random word by creating an array of words using the NeetoCode with a list of 600 words given in the resources.
Implement a function to select a random word from the array.
Use the selected word as the word to be guessed in the game.
Display the game state after the first guess from the user.
Task - 06
When the player submits a guess, check if the word is 5 letters long.
For each letter in the guess, compare it to the target word:
If the letter is in the correct position, mark the cell as correct and turn the cell green with white text.
If the letter is in the word but not in the correct position, mark it as present and turn the cell yellow with black text.
If the letter is not in the word, mark it as absent and turn the cell gray with white text.
Task - 07
The game reaches its final state either by the user guessing the word correctly or by using all the allowed attempts.
If the word is guessed correctly, a success message, Congratulations! You guessed the word! is displayed, and input is disabled.
Task - 08
If all attempts are used, a game-over message, Game over, the word was "correct word" is displayed along with the correct word, and input is disabled.
More projects
These are some of the projects you'll build while learning.
