Build a Wordle Clone in JavaScript HTML CSS Part 2

A beginner friendly HTML, CSS, JavaScript Tutorial on how to build the viral online game, wordle!

This is part 2 so if you haven't seen part 1, click here:

Java Game Programming Projects Playlist:

JavaScript Game Programming Projects Playlist:

Subscribe for more coding tutorials 😄!

// Create the key board
let keyboard = [
["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
["A", "S", "D", "F", "G", "H", "J", "K", "L", " "],
["Enter", "Z", "X", "C", "V", "B", "N", "M", "⌫" ]
]

#wordle #wordleclone #wordletutorial #codingtutorial #codinggametutorial

[KennyYipCoding]

Check out the playlist of web project tutorials here!

Got a tutorial suggestion? Let me know down below!

[i-am-artur]

awesome tutorial, thanks! I used your project for inspiration making wordle in Norwegian

[marcovesilva]

Awesome tutorial once again!
Thank you! You're great to follow along for beginners :)

Will there be 'Part 3' on setting up a daily word somehow ? scoring, sharing and uploading to a website (wix/square space) ? :)

[purpthepuppet]

Hey, this tutorial was amazing, but the absent letters aren't appearing red on the keyboard. If you get a chance could you please send me a solution for this? It would be greatly appreciated.

[verakali]

Hey! I keep running into an error with line 108 (let letter = currTile.innerText;), visible on time stamp 2:23. It says that "null is not an object (evaluating 'currTile.innerText'), and I was wondering if you know why this is happening? I've copied it identically from that point so I'm not sure why its doing this. This tutorial has been SO helpful to me!

[unusedchanneld]

Incredibly helpful video but I'm wondering if there be a way to reset the game without having to refresh the tab every time I win/lose?

[godapotra]

Hey loved this 2 videos! I just have a question, would be a problem for you make a short part 3, just for gray letters showed on the keyboard? Hope you understand what I mean!

[User]

Hi! Will You Make a part 3 or is this the last one? Thanks In Advance!

[triggerhappy]

How would I implement local storage into this? I have the daily word system set up but I don't know how I would use local storage

[User]

At 5:11, the pretty print option isnt showing up, what should i do?
edit: Nevermind! I went onto Github and copied/pasted it from there!

[sharmafoodvlogs]

It is not changing the structure of the tiles if i change the words length to 6? Please help it is fix for word length 5

[Christian-gcnn]

Great tutorial especially for a beginner like me. I found a bug though:
In the last else statement if there is already a "present" class the code will still add an absent class that will override the css for the keyTile.

I fixed it by adding an extra if-statement. So change the line to

if || "correct")) {

}
and it will work.

[musicdrawer]

question how would this translate if you were to bring up the website on a mobile phone? Would a keyboard be prompted or could you click on the keyboard on the page?

[gabyvandinterenpmp]

Hi Kenny, thank you very much for this. I'm building a wordle-spinoff website, never did any javascript and this helped me a lot! I have an issue though: the "keyup" doesn't work very well on my Spanish keyboard. The "Ñ" key produces e.code= "semicolon". Is there a way to change this listener and be "foreign-keyboard-proof"?? Thanks. FOUND IT ALREADY. I have to use keypress, not keyup and rather than e.code. That seems to work :)

[crimetimewatch]

Great video, thanks for sharing this. I have noticed a small issue with the javascript code for coloring thekeyboard tiles. If user enters TREE as first guess, and if only one E is present in the word, then the "E" keyboard tile gets marked as "absent". Same thing happens if the user enters TREE in the second or any other guess. If I enter HELLO as a guess, and if only one L is present in the word, then the "L" keyboard tile is marked as "absent" . Is there a way to add a logic which can solve this? Thanks. Cheers

[AsifDawood]

Thank you for the video. Beautifully explained and can easily be followed

[adriandiem]

Hey Kenny can you just briefly explain how this works and the main function

[KarlEmmanuel]

You really helped me, thank you for the video !

[bravefart]

Great vid, one problem though, your Github keeps crashing when trying to copy the array of words from Wordle and I can't get the decompressed version of the words from the Wordle website. There is no option in terminal to decompress or pretty as it seems to be called. Any ideas?

[ClayAutomates]

not to be a stickler but letterCount = { } is an object, not a map. A small but important disctinction