Wordle in 5 minutes

About

Wordle is a web-based word guessing game that became extremely popular in 2022.
The goal of the game is to guess a random 5 letter English word with 6 or less attempts. Every time the game gives feedback by coloring each letter with green (the letter is in the correct spot), yellow (the letter is in the word but in different spot) or grey (the letter is not in the word).
Simple rules and great usability that lead to huge success.
Let's make a clone of it in just 5 minutes! As in most projects we will go with plain vanilla JavaScript without any libraries. I hope it will be fun!

Link to Wikipedia: https://en.wikipedia.org/wiki/Wordle

Live coding

Here is a live coding session that shows how it can be done.

Duration: 5:00 (coding - 4:35)

Disclaimer: never use this code in production. It was created for fun.

Breakdown

Let's break down the solution and comment on some complex or interesting things.

0:17 - starting (as usual) with HTML template. We will use HTML table as the game field.
We know that we only need 6 rows (one for each attempt) and 5 columns (all words will be exactly 5 letters long).
createTable function does exactly this. Basically we are creating tr and td elements using document.createElement and attaching them to DOM using appendChild functions. Notice that this function returns a two dimensional array of HTML elements that we will use later.
Also for each element we define styles empty and cell.

1:10 - random word generation function that will give us a word that we should guess.
Well... do you think if SMART is a random word or not? I think that for this prototype - yes, it's quite random word.
I'm planning part 2 of this project where we will use real random words, but it's good enough for this time.

1:16 - creating elem array by calling createTable function - it will render HTML table.
Define styles. For now we have 2 of them:

• cell - it will be 90 by 90 pixels table cell with text centered. Also we'll write text capitalized and with bold font
• empty - when we enter the text it should be black

Basically with these 2 styles we will be able to enter text and it will be shown as black letters (with white background).
Also we can check first results in browser.

1:47 - next we should implement the logics that check how good an entered word is.
We need auxilaury variable called attempts - it stores how many attempts were done. Also it will hint us which table's row we are working with.
The logics of tryWord function is the following:

• Go letter by letter
• Initially consider that a letter is a miss - it's not in the word - and try to improve its state
• First check if it is a match - the letter is in correct spot. Just compare letters by index
• Otherwise check if the letter is present somewhere in the word - indexOf function returns the first occurrence of the substring or -1 if such substring is not found
• style variable will contain the class name that will be used to give feedback to user
• Change cell's class list: remove empty and add one that is stored in style variable
• Increase number of attempts
• Check if game is over. There are 2 cases: either the word is guessed or all 6 attempts were used
• Return either won or lost this case, or undefined otherwise

2:32 - define a couple of extra styles - correct, exists and miss. The colors are taken from original Wordle game.

2:47 - now we have almost everything ready. Last part - handle word entering itself.
For this purpose we should have a keydown event handler.
In general, there are 3 scenarios that we need to handle:

• Player presses a letter a to z
• Player presses backspace to remove last entered letter
• Player prsses enter to check the word

All of them require different handling. But in general we need to know the following pieces:

• entered character - stored as variable c
• what was entered before - it is stored in current variable
• how many characters were entered - stored as l = current.length

Let's start with enter key press. It has key code 13 and it is activate only when word has exactly 5 letters. In this case we try out the word by calling tryWord function and cleaning up currently entered word.
Next is backspace key press. It has key code 8 and we can do it only when we have at least one character entered. Basically we need to remove last character and also update the value in corresponding HTML cell.
And last - when user presses a letter. It should have key code between 65 and 90. Just append it to the current word and put it to a cell of HTML table. Of course it can be done if less than 5 letters are entered.
Now we can check everything in browser and make sure that both letter entering and feedback work fine.

3:52 - now we should hanlde game over situation. Do you remember that tryWord function returns won or lost values? We can utilize it and check if tryWord returned something meaningful then we show the result to the user.
We do it with window.alert with a message that player either won or lost - dependening on what tryWord returns us.
This is a naive implementation and definitely worth improving in future.

4:20 - time for final check in the browser.
We have some random word that should be guessed.
First we try WASTE. 3 letters are shown in yellow meaning that target word has A, S and T but somewhere in different spots.
This means we need to try out a word with but using known letters in different spots. For example - STAGE. Now we can see where S and A are located. As additional information we know that G and E are not part of the word.
Next attempt can be word START. Here we see that 4 out of 5 letters are correct. The only thing is letter T is shown both in yellow and in green. I don't know how it's handled in original Wordle game, but here it makes sense. If we look at 2-nd letter (T) - it's yellow meaning that it's in the word but in different spot (in the last spot that is green).
And finally we guessed our word - SMART.
Also you can see that the negative game outcome is handled correctly as well.

This concludes this fun video. When I started it I thought it would be much more complex.
As usual - here is a list of things that can be easily improved (and some of these might be included into part 2 of this project):

• Generate random word
• Check if entered word is in the word list
• Collect statistics

Resources

Sources: https://github.com/5minute/wordle

See live results:https://jsfiddle.net/jqp8hfom/