This device is not compatible.

Create a Wordle Clone

PROJECT


Create a Wordle Clone

In this project, we’ll build a clone of the popular web-based game Wordle with a fully functioning grid and keyboard. We’ll develop the front end of this web application with React and use Bootstrap to style the game.

Create a Wordle Clone

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:

Wordle clone

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!