HTML is used for showing text and symbols of the navigation bar at the top of the screen, the grid of boxes for making your guesses and the letters below.
CSS powers the animation and the change of color when you make a guess. As well as arranging the layout of the page so it fits the screen regardless of what type of device you use.
Interacting with a website
Wordle needs to perform several tasks:
- enter the letters you pressed into the empty boxes
- check if the word you entered is correct (good luck on the first turn!)
- return the letters you got right and give it a color of orange
- return the letter you got wrong and give it a color of grey
- return the letter you got right which is also in the right position and give it a color of green
- mark the letters you've already tried in the keyboard below
- check if your guess is a valid word
Sending a message to the user
When you guess correctly or run out of guesses, Wordle flashes a message such as "splendid" , depending on how many guesses you took.
"if the user takes 4 guesses, show 'splendid' "
Wordle uses local storage in your browser so it can set the secret word, can remember how many games you've played, show what your scores are etc.