Build a Wordle clone using HTML, CSS & Javascript! - wordle.plus

Build a Wordle clone using HTML, CSS & Javascript!

Ian Lenehan
Views: 1472
Like: 85
Wordle is a simple word game taking the world by storm! In this video we wil build a Wordle clone using HTML, CSS and vanilla Javascript. We’ll also use an API to get a new word and check if a guessed word exists.

Finished code:

Video explaining REM in CSS:

31 Comments

  1. 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!

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

  3. 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?

  4. 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!

  5. 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

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

  7. 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.

  8. 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

  9. 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?

  10. 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?

  11. 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.

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

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

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

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

  16. 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!

  17. 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

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

  19. 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! 🇮🇪

  20. 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.

  21. Please like and subscribe to help me grow this YouTube channel!

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

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

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

  25. 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 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *