Build a Wordle clone using HTML, CSS & Javascript! 

Hey everyone, check out my next Wordle video where we use local storage to keep statistics and maintain game state! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-lF4O1wvyVow.html

Please like and subscribe to help me grow this RU-vid channel!

Hey everyone! Here's a tip for beginners: You can also just add the defer attribute to the script tag and it will automatically check if the content has loaded instead of the DOMContentLoaded check at 6:28. Hope this helps.

Hi Ian, I am a computer science undergraduate and am interested in web development. I found this tutorial super helpful! In particular you've helped me improve my flex box and grid skills, and my javascript programming. I've been struggling to find resources on the internet for learning frontend and backend web dev that aren't just for beginners, so I hope you will do more tutorials like this!

Thanks Ian, that was a huge help and the pace of the video was just about perfect. Off to take a look at your next Wordle video now.

im an iOS dev but since apps are a bit of a dying market ive always wanted to get better at web stuff. the quantity of js frameworks is a bit overwhelming though. since you stick with vanilla js this is really intriguing! going to give your tutorial a try

I've never used Javascript before, only Python, but when I found out NYT is buying Wordle, I ran right here! Thanks for the tutorial!

I remember that i tried wordle at one point. And didnt even know where to start. But after doing some coding problems. Now it feels pretty easy. I can do wordle clone alone (with simpler animations) without looking at tutorials. Nice and simple game. Biggest problem for me is dom tho... And to get an API for words. Logic not so much.

This was super helpful, really enjoyed the complete breakdown you provided great job.

34:18 fun fact, wordle only uses about 2300 words as possible answers, but they accept about 12000 more as possible guesses :) I got that from looking at the code when I implemented my own wordle clone in SolidJS :)

Two minutes in and I've learnt about five new VS Code tricks

Outstanding tutorial/walkthrough!! I've been coding for decades, since the days of mainframes and languages like COBOL and PL/1, but love to play with JS, HTML, CSS, PHP, etc. now that I'm retired. I very much enjoyed your step-by-step explanations of each function and followed your approach easily. You are very articulate and have the perfect voice and pace. I am happy to be a new subscriber and look forward to watching more of your videos. Thanks so much! Can't wait to try a version myself, maybe with 6- or 7-letter words, and maybe hook up to a mySQL DB of words culled from the API to grab the most well-known ones. Edit: I just read that the API you used has a "frequency" parameter so I'm thinking specifying high thresholds for that might help eliminate rarer words.

Great tutorial ! I enjoy your content and style. All the best from UK.

Liked and subscribed! It has been so long since I did a project like this, without React, it was a nice refresher!

You also forgot to check something, if my random word was "yours" and my guessed word was "sense" it would check both S instead of only one of them so both would be yellow in this case, but only one should be.

I really enjoyed the tutorial man, thanks for help me out in web knowledge!

Excellent tutorial, I did not know the touch-action property, it is something new for me

Nice, but your algorithm to check the word and set the colors is a bit off. If the word is YODLE and you guess HELLO then you should not get {Grey, Yellow, Yellow, Green & Yellow} but instead it should be {Grey, Yellow, Grey, Green & Yellow}. The L exists in YODLE once, so only one of the L's in HELLO should have a color. Since one of them is Green, the other should be Grey. If the word were LABOR instead of YODLE then HELLO would have one Yellow L and one Grey L (it would be {Grey, Grey, Yellow, Grey, Yellow}). Each letter in the actual word should only apply a color to one letter in the guess. Once it has applied a color to the guess it should not be considered again.

I really like this tutorial it is helping me understand the JavaScript and CSS. I was wondering it you could do a clone of nerdle?

400 Subscriptions? Let's add to that. Great video!

Really good tutorial... Following and trying to make my own clone of Wordle... Thank you for this good video :)

Awesome! How about building something like NY Times, Connections?

Hello. I found a bug - if I input “SSSSS”, and the word is “SUPER”, the first S will show green, but the other four will show yellow, even though there is only one S. I thought about only counting letters the amount of times that letter appears in the word (so I would only look for one S), but found another problem with this solution: If the word is “SISSY” and I input “SSSSS”, but only look for 3 S’s, the first one would be green, the second would be yellow, the third would be green, but the forth would be grey, even though it is an exact match. Do you know a better way to fix this? Thank you.

Indeed interesting.... liked and followed...

Thanks for this! Any way to pull the words from a custom list so they can be inside jokes with friends?

You can make clone apps video like Netflix etc to get views.

Thanks lan, we follow you from Turkey

At 42:24, your guess 'HELLO' has 1 'L' highlighted green and 1 yellow but there should not be any Yellow tiles (since there is only 1 'L' in the correct word).

Thanks Sir! this video helps me a lot. I love the way you teach in this video this project. Thank you so much!

i just subscribed good quality programming video

Hi! just a question. My browser keeps repeating,"Word not recognised." would there be a fix you know of?

I cant even get the black border on top of the page and i followed every step

Hey great video btw, i got about 23 minutes in when my boxes stopped appearing, it was just after sorting the handleSubmitWord function. They stopped appearing in the div so not a css issue. Thing is my square function and handle submit function look identical to yours. only number of squares because my version is slightly different

Thats an awesome tutorial !! It would be helpful if would teach DOM manipulation using JS as i find it a bit complicated. Also, can anybody explain me why the datakey of enter and delete button are not being displayed??

Dan Abramov did it couple weeks ago

Great tutorial! Thank you

Hi Ian, great video! I was wondering, if you wanted a range of word lengths, is there a automated way to change how many letter boxes are displayed? So like; today is a 6 letter word, tomorrow is 4 letter and the day after is 5 letters. How can I have it to display the corresponding number of letters without having to manually update the css?

liked and sub thanks alot for the walkthrough

What extensions do you use for your Visual Studio Code? You seem to have a few that look dead handy! Just subbed also great video! 🇮🇪

Hello great video, do you have a video that shows me how to install add on for vs code?

Now thats cool, i would love to be able to do that, how long have you been coding? Btw great vid :)

Can you try and recreate worldle. Would the js be completely different? I don't understand how you can change the country image every 24hrs

at 15:40 what causes him to say "that's because I forgot to add a full stop to my class" ?

Does anyone know how to fix my keyboard going to the right of the squares box and moving it?

Hello, I'm doing this in TextEdit on my MacBook Air, and I've made the Index.html file, but do I open and make a whole new file for the styles.css? I did it and the html file isn't following the css file when I open it online.

nice bro

Amazing!

nice video! you are amazing!!

I am trying to forgo the Word APi, thus needing to hardcode a new word and not checking if a word exist, but when I remove the added code for that after the 34 minute mark, the letter field disappears.

How can I upload the files to a website and have my friend try it out?

Brother I have sign up for api but it's showing error

Instead of using an API, if possible to create a json file and take the word of the day from there in the same project? or maybe is better to create your API? thanks for the video, great job

Hey Ian, just wondering how I could go about adding the feature where the keyboard letters reflect the correct/incorrect colours. In the actual wordle when a letter turns green or yellow or dark grey that same colour shows up on the keyboard. Thank you.

Ignoring the purpose of the grid, how would you modify this to get all squares to appear on one row?

Hi Ian! Thanks so much for this video, I followed along very well because your instructions are very clear. I am running into a probelm where if I input a valid word less than 5 letters, it still inputs it. The next guess starts on the same line leaving the board completely messed up. Do you have any solution for this? Thanks!

Just FYI your RapidAPI key is still visible in commit history!

Hello , your vedio is great , but how do I make writing in the squares of the game Arabic not English ?

Hii! The tile colour appears for next row even when letters in current row are orange or green The color always appears in row below it. Could you suggest me where to make changes, css and js filed are okay

Great stuff! Think you’ll try it in react for the next video?

Hi So I Created My Wordle Using Python But I dont know where to get all the 5 letter words.Is There Some database out there with all the words or something like that .Google only shows 50,60 5 letter words

I am looking to add a custom range of words for the game to select from (revolving around a specific subject) instead of pulling from the words api, any tips of how to acheive this? I'd also like to stop the game looking to see if the guessed word is a word.

On my wordle, it shows me an error and says that the js file and css file cannot be loaded, any ideas on what may be wrong?

Hey Ian! Awesome guide!! I was going to try to mess around with the finished code, however, I am having trouble getting it up and running. I managed to connect the WordsAPI, however, now when I run the code I get an Uncaught TypeError. Basically, when I type the word, it recognizes and connects to the wordsapi, however the animation isnt happening, and the tile colors arent changing. Any thoughts?

The github has one of our key's still saved in the js file no?

Amazing tutorial - thank you! Any chance I can get my clone to take input from the computer's keyboard as well as the keyboard on the screen? Maybe a good challenge for myself? Thanks!

Hey! Is it necessary to enter our card details, or can we use free apis?

hello ian, thanks a lot for an amazing tutorial! i already follow the tutorial. but, the squares didn't show up. do you know how to fix this?

Hi, Nice video. I'm struggling to make it work as a google webapp connected to a google sheet as word feed. Index page is loading, css file working through include tag. But javascript is not responding, even, when I place the content of the js file inside script tag blow inside the index file. Could you please make anohter video on how to feed Wordle from a wordlist in a google sheet and collect answer results in a chart sheet? I'm sure it could interest many people. Thanks

Jesus frontend coding is so boring, don't like frontend

I’ve encountered a problem where if I keep pressing the delete button, the row on top deletes after the current row is deleted To fix this: In the handleDelete function Instead of using if(currentWordArr && currentWordArr.length < 6) You can use if(*currentWordArr.length > 0* && currentWordArr.length < 6)