Wordle Game Clone

Frontend Clone of a Wordle Game Web Application

Demo Video

DemoVideo.mp4

Features

1. Size of each solution word = 5
2. Total chances for each solution word = 6
3. Color coding of guessed characters: a. Green -- correct character at correct position b. Yellow -- correct character but not at correct position c. Grey -- wrong character i.e., not present in the word at all
4. WIN: word is guessed correctly before chances are over LOOSE: word is not guessed correctly before all chances are over
5. Result modal box appears on displaying WIN or LOOSE
6. A new solution word is expected on every tab refresh
7. Characters can be entered from system keyboard only
8. Press 'Enter' to check if the guessed word is correct or not for each guess

Data management

Solution words data: Location --> data/db.json (Host the json file locally before fetching data from it: Run following command on terminal from project folder: >> json-server data/db.json --port [any free port no., ex: 8000] )

Tech used

• HTML, CSS, Javascript, React, JSON, WebAPI

• Hooks used: useState, useEffect, useWordle -->(custom hook)

---

Snapshots

---