See the working product here: https://indecisive613.github.io/
Guess and Learn Wordle Style is a game where users try to guess a 5-letter word within six tries. Guesses must be valid five-letter words. After each guess, the letters will change color to indicate the accuracy of the guess. Green means that a letter is in the correct spot. Yellow means that a letter is in the word but not in the right location. Grey means that the letter does not appear in the word.
Users new to the site are automatically shown the instructions, which can also be found by clicking the question mark in the top bar.
Guesses can be entered either from the user's keyboard, or the keyboard provided onscreen.
After hitting enter, the letters on the guessing area and the keyboard will change color to reflect the accuracy of the guess.
Once the user has correctly guessed the secret word, a message of congratulations appears at the top of the screen.
Two seconds later, the statistics appear. The statistics can also be accessed from the bar chart symbol in the top bar.
Pressing the clipboard icon copies the results to the user's clipboard in the following format:
I guessed the word occur in 3/6 tries.
⬛🟨⬛⬛⬛
⬛🟩🟨🟩🟩
🟩🟩🟩🟩🟩
Pressing 'Definition' shows the user the definition of the secret word.
Pressing 'Play Again' after correctly guessing the secret will generate a new game with a new secret. If the user has not correctly guessed the secret word, there is an intermediate screen which asks the user if they are sure they would like to give up.
If a word is not valid, the letters will remain uncolored and the user will get a message saying that their guess is invalid.
When a user fails to guess the secret word within six tries, they are shown the correct answer in place of the congratulatory message.
This project uses HTML, CSS and JavaScript.
- index.html - Defines the web structure for webpage.
- main.js - Script that programs the behavior of index.html.
- data.js - Script containing wordBank, the list of possible secret words.
- style.css - Sytlesheet used for formatting.
Developer: Fiona Cheng
Last edit: July 26, 2022