Wordle in JavaScript in 20 minutes

Let's write Wordle in JavaScript!

Check out the source code on my GitHub page:

Feel free to follow along and code with me.
You only need a code editor (like VS Code) and your browser.

Timestamps:
0:00 Intro
0:38 File structure
1:44 CSS styles
4:08 JS setup
4:29 drawBox function
5:07 drawGrid function
6:10 Game state
7:01 updateGrid function
7:53 Keyboard events function
10:06 getCurrentWord function
10:25 Dictionary
11:14 revealWord function
12:24 isLetter function
12:46 addLetter function
13:07 removeLetter function
13:26 Testing the game
14:38 CSS flip animation
16:58 Game is done
17:42 Outro

#wordle #javascript
_________________________________________________________
Social media:

[swapnilkawade]

This is so amazing! Thank you! Would love to see such plain Javascript games in future! Keep it up!

[charls_]

helped me create my first project ! took me several tries as I've never used CSS or HTML before but It worked out. thanks gang

[Rexon__]

Great Video, don't think anyone noticed the images on the desktop lol!

[carsonmoney]

Never coded in my life before but wanted to try and make this. Spent a ridiculous amount of time not realizing ' and ` are much different lmao

[phlipside]

fantastic! wordle in 20 minutes.
brilliant! great video

[jaffaritaffari]

Quick and efficient. Thank you for this vid

[peroggi]

Blessed is this day, for he has posted once more.

[Olja]

Very calming and interesting at the same time.
And I don't even code 😀

[zeroxiph]

This video is very helpful, thanks so much.

[BruceLeeDreamFights]

So glad I ran into this video. Very helpful!

I wonder whether it's possible to reset the game state without reloading the game after you win each time? Thanks for your input!

[revisedlifestyle]

very nice tutorial, thank you so much! Trying to finish an assignment and have my folks play this game.

I have two questions:

1) Is it possible to style active cells (at the time when you put in a letter) so that it looks more interactive? I tried something like box.classList.add('active') to so many places in the code, including updateGrid, addLetter, deleteLetter (making there as well), and even conditionals where the Enter, Backspace buttons are, but what I had at most is the entire grid active or the entire row active when I put in the letter, but not a single active cell changing style. Is there a tweak for styling a particular active cell? If yes, where do I put that in?
2) Is it possible to prevent duplicate guess? Someone can just put in the same word and waste tries =) I would appreciate if you could help me with these two!

I also just went through understanding the letter Occurence issues by writing similar words on paper and reading your code to see how it works on two similar words, to see why it works. You are awesome.

[mt_top]

Hello! Thank you very much for your useful video) This is the most short and understandable tutorial I've ever seen.

I think, you made a mistake in revealWord function. Imagine that secret word is 'OFTEN' and you input the word 'OFFER'. You've guess the letter on second position, but you also see the yellow background behind the third letter. You will think, that secret word contains at least 2 letters 'F'. But it's not true.

I've fix this issue in my game Blindle (it has the same goal to guess the word, but verdicts for each word you see after sixth turn). I think YouTube will remove my comment if I place my GitHub repo link here.

Thank you!

[nicksporter]

Thank you for this, works great! Question: Is there a way to make this functional on mobile? Don't believe there's a way to type answers on phone as-is? Thanks again

[pinkykids]

When I put the javascript code it doesn't work what is the problem
Knowing that I put them all in one file and not every language alone in a file as you did

[Old_SDC]

How would I use a json file for the dictionary instead?

[diogodelvalle]

Amazing video ^^, is there a way to use APIs for the dictionary instead?

[vllx]

Im at 6:09 and i've followed all the steps.
When I run the code, it's just a white screen.

[СаматГильмуллин-нч]

Thanks for the video, I really liked everything, but I have a question. Is it possible to make this game in another language, if so, what would need to be changed?

[Ysever]

Hello, thank you for your content amazing work, i added keybord but i couldn’t manage to change the alert at the and to a pop up with correct word or congratulation and try again / go home button !! Can u help me with that !! Thank you

[chasejurkofsky]

I have a question. Is there anyway to add a detection if there's only one of the letter. Let's your word is AGENT and you guess SHEEP, it'll tell you the third E is right, but the fourth E is still in there.