Used this for my first project and it was really helpful! One bug I did find is that if you click on the glyph in the backspace it wont activate the function, and you have to click around it. If anyone else finds this problem, solution is: svg { pointer-events: none } makes the svg ignore the pointer clicker, so that when you click the glyph you are clicking the button behind it Nonetheless, great tutorial, really helped improve my skills
I recently watched the award ceremony for a hackathon. participants were complaining that some of the judges were non-technical people who didn't understand the complexities of they're project. The truth is that for vast majority of people programming should be a tool to achieve a design or some idea. in the end most people don't care about what framework or language you use. but being able to have ideas and knowing HOW to make it is way more valuable. everyone should realize that they are in the unique position to come up with ideas and actually make them exist.
Hi, you might want to know that your algorithm for coloring letters is incorrect as it does not take into account duplicates. For example, if the answer is "those" and you guess "geese", your code would say two E's are wrong location and one E is correct (implying there are 3 E's in the answer), but in the actual Wordle, the two middle E's would be fully wrong since there is only one E in the word. To fix this, you'd need to loop through the letters marking them as Green and removing them from the answer, then loop through a second time marking wrong-location letters as yellow. Everything unmarked remains as gray.
@@KelbornXx On my channel I've done a tutorial in Python. If you're looking for a JavaScript tutorial that does this step right, maybe check out Ania Kubow's video.
@@DevProTips I have watched the video but that way isn't even close to the same. Is there anyway to show on this tutorial how to correct this issue? It is extremely close to being correct besides this major flaw. The creator of this video probably should readdress this issue as it ruines the function of the game.
14:20 Fascinating! I kind of thought that the whole point of CSS variables was to define them globally, but you defined them within classes for some very clever functionality! I have never seen CSS variables used like that before.
Wow learnt a lot. Especially adding "I" to a data attribute when selecting element from the Dom as case sensitive, also love the patterns you used when creating this. Really a good stuff. 👊👏💪🥰
The keyboard is a great usecase for grid-template-areas! :) Edit: I realize now that this would have been a pain to type out so using the half-key divs is elegant and fast. I'm keeping the comment though, because g-t-areas is hard to argue for. A smaller version of the keyboard usecase would finally be a perfect opportunity to use it
If you are also using Emmet Abbreviation for VS Code, you can just add a multiplier and the element will be added in that amount, e.g. .tile*30 will add 30 * :))
awesome tutorial man! you explain everything so well! If you are interested, there is one bug that does not follow the rule of the Wordle game. This Wordle clone does not account for repeated characters. What I mean by that is that if a character is correctly placed and that SAME letter appears again later in the guess word, the logic will incorrectly mark that letter as "wrong-location". For example, TargetWord = "Theft" and GuessWord = "These", the last "e" will still be marked wrong location (even though there is only one "e") because of the line targetWord.includes(letter). The actual Wordle game would mark this as "wrong" since the "e" has already been placed. I was able to fix this bug by simply adding a dictionary to keep track of letter count and to add an extra check for letter count in the "wrong-location" if statement!
Your CSS is fantastic in this Wordle clone. It is especially fantastic how you figured out the flip animation. However, your JS for the word positioning and coloring has a bug. It was in your example for "FLOOR" where the correct answer was "FLOSS". The second "O" should have been greyed out instead of orange.
This is great! One thing it's missing compared to the original is that the original won't highlight a double letter in your guess as being in the wrong position if the correct word only has that letter once. Example: You were putting 'FLOOR'.... It was showing one 'o' as green and one 'o' as yellow... However, floss only has one 'o', therefore the second 'o' in floor would be grey on the original game. In short, it will only highlight one of your double letters with correct position taking preference. I built a wordle clone myself and found this the most annoying problem to overcome.
I checked the "Why I Don’t Use Class Selectors In JavaScript Article" I used to sometimes use the approach of using the "js" prefix but tbh after watching this video the usage of Data Attributes do seems a lot more convenient. I usually only use them to store data needed on user interactions but its also a great idea to use them instead of classes as selectors. Thanks for the video and Information.
I really enjoy the portions where you're building the HTML & CSS to get the same look and feel of the original game. I would choose to write the JS differently, taking a strict MVC approach. I am never a fan of using the view (HTML, in this case) as the authoritative state, and would elect to keep state information somewhere in a model in the script. The view should reflect the state of the model, not vice versa. I think your viewers would benefit from understanding this.
If you know so much then this tutorial is not for you. Its a coding channel directed at people new to programming, why would he complicate it by introducing new concepts like MVC.
@@streamx2 "...why would he complicate it by introducing new concepts like MVC..."? Because it's never too early to learn good software engineering practices? I would argue that if you show someone "new to programming" a bad coding practice, that person is likely to use that bad practice for the rest of their programming career. Since "...I'ts [sic] a coding channel directed at people new to programming...", there should be emphasis on teaching strong fundamentals over just writing quick-and-dirty code that gets a job done.
A word of warning: that list of wordle answers is in order, so if you want to avoid spoilers be careful about looking too hard at that list. If you want to be completely safe about it, there are word lists out there that have sorted the answer list alphabetically for you, so you can have the list without having the order.
I doubt it. That may've been an insider's deal, with the money staying in the 'family.' If you have no right connections or marketing and create something like that, it'll likely get copied out and you won't see a single penny for your idea. But who knows, it may be worth a try. Good luck
The money is paid for the users that are already playing the game. There are over a million players playing it. Companies pay for the user base the app had when they buy something.
i just finished his Pong clone. after i changed the playback speed to .50, things got a lot easier. i still had to pause to catch up, but i didn't have to pause and then try to rewind to the place i missed. give it a try! :)
Hi all I am new to Javascript, May I ask why he needs to add {once: true} in shakTiles function? From my understanding, he already removes "shake" in the class, it means won't sake anymore. may I correct? 43:54
while the part of the game showcased in this video is important, I think what really sold it was the social aspect. making everyone compete for the same word, and sharing your score using only simple text and emojis, all without spoiling the answer
I've found a bug. I had the word 'PAPER' and had guessed 'CARER'. The game told me the A, E and (ending) R were correct (green) and the first R in 'CARER' was yellow, so the only other place the R could be is the first letter. I guessed 'RAZER' on my final guess and the first R was yellow. The correct word was PAPER and there is only one R in PAPER. So I think I've found a bug!
I believe that is the correct behavior since the first R is in the wrong location and also in the word. It doesn't necessarily mean there are 2 Rs though.
@@WebDevSimplified No, in Wordle if a duplicate letter (R for example) appears green and yellow, it DOES necessarily mean there are two Rs. Another example: in your video, FLOOR has the first O green and the second yellow, but the word was FLOSS, which only has one O. In the live wordle website, the coloring for the FLOOR guess would be green green green grey grey.
kyle da goat, but yeah currently trying to figure out the "green needs to overwrite the yellow" bug, but also... we need to use a setTimeout on the submitGuess function at 250ms or else if you type and hit enter before the letters appear, they'll be filled in and then disappear before following the indexical trail of filling in the words. hope that makes sense. thanks for the vid, great stuff!
WoW... This is realy cool 🙂 I was planning to make a similar look a like game that's called "LINGO" here in the Netherlands. But i want to make it a multi user game, with WebSockets using a big monitor or a projector to show the game field and using 2 tablets to let contesters enter there guesses. In the LINGO game there comes a Bonus letter after a few wrong guesses. Or maybe go a step further to add some Rasberry Pi's / Orange Pi's and connect real keyboards to them. Don't know yet what i like the most 🙂however you gave me a really good starting point with the playfield and animations. I'm new to you channel and was just browsing around @ your video's. i also want to complement you by the way you explain things. I'm an 'old' app builder myself ( for Hobby and Fun only ) and you teaches me some stuff i didn't know. Anyway thank you for this course / tutorial 🙂
that's so funny, I just created my own wordle clone couple of weeks ago. I did stop the project before the animations tho, would be interesting to try and implement them and copare with your solution
For those thinking he just made an app that's worth millions! Guys! It's not the app, it the idea! It's the concept that's worth millions. If you publish that app on google store it will be taken down because it violates some protected rights
Great video. Learned a lot about JS. Just one question: If the correct word is "CLOSE" and you guess "FLOSS", the first S will be green, but the second S will be yellow, right? That's a pretty critical thing for guessing the right word.
Yep this is a problem I encountered while making a project like this as well. What I actually did was write a recursive algorithm that strips both the guess and the correct word of all exact matches, then compares them from there. That way you're comparing "CLOE" and "FLOS" and there is no match at all. There are also issues if the correct word has duplicate letters which cause headaches. I had to jump through a couple hula hoops to catch all the edge cases
I found when using the on-screen keyboard, if you clicked directly on the svg or the path, it wouldn't delete, because that was the target being passed in the event. I added the data-delete to the svg and path and it worked, but wondered if there is a better solution. Wrap the delete button in a div, maybe?
Yes! There is actually better way handling it without touching the HTML. When you are handling a eventListener, save variable "clickedTarget", and give it value of "e.target.closest('.name-of-button-you-clicking') So if you click on svg icon, it will closest method will look for closest parent class you specificed. In case you clicked on button and not svg, closest will return specified class again. It basically works like invert querySelector. You also should look for eventDelegation.
going through the tutorial, awesome job man! learning a lot from it....I have a question regarding the json files - is there a way to read their content without adding it to a variable inside the js file? This way, instead of having 15k+ of code lines, you end up with several dozens just for the functionalities, and you recover the json contents with a js function as well. thanks :-)
I could be wrong here and hopefully someone with better knowledge can correct me if I am. But I would imagine you could do something like: const targetWords = JSON.stringify(targetWords.json)
I think you're wanting to read directly from JSON file into an array, right? If so, for another project I used const result = await fetch("./myFile.json") and it seemed to work. You might need to wrap it in another await for the data to return, like this: const result = await (await fetch("./myFile.json")).json() or else I think you get a readableStream object that's annoying to deal with. If you want to turn it directly into an array, I think you can use something like the PapaParse NPM module: const result = await fetch("./myFile.json") .then((response) => response.text()) .then((text) => { var resultArr = []; Papa.parse(text, { header: true, worker: true, step: (results) => { resultArr = [...resultArr, results.data]; }, complete: () => { setRows(resultArr); }, }); });
My solution was to change the JSON files to JS files. Then inside the files, give the JSON objects names so they become JavaScript arrays. For example, ```const wordlist = ["cigar", "rebut", "sissy", ...];``` Finally, in the HTML file, load the wordlist and dictionary array files just before loading script.js: ``````
@@SustainedFuture in my case, I needed to be able to read from any JSON file, so manual conversion wasn't an option. Unless you're saying you did all that stuff in code, in which case it seems like extra steps, no?
Hi Kyle, I'm a huge fan ^^ keep up the good work, your tutorials made me learn lots of things and they are fun to watch also ^^. I was wondering what is your setup for screen recording?
2 ปีที่แล้ว
Hi, I can not make this responsive for mobile phones. Can you suggest some CSS if it is possible. Thank you
also, we can add the following to our "active" state for the bounce the tile receives upon an entered letter: .tile[data-state="active"]{ animation: zoom-in-zoom-out 50ms ease; } @keyframes zoom-in-zoom-out { 0% { transform: scale(1, 1); } 50% { transform: scale(1.25, 1.25); } 100% { transform: scale(1, 1); } }
Doing this made my shake animation not trigger. Instead I created a new class and added the class to the nextTile inside pressKey function and removed it after the animation end. Kept the keyframe just like yours So my pressKey function looks like this now: const pressKey = (key) => { const activeTiles = getActiveTiles(); if (activeTiles.length >= WORD_LENGTH) return; const nextTile = board.querySelector(':not([data-letter])'); nextTile.dataset.letter = key; nextTile.dataset.state = 'active'; nextTile.textContent = key; nextTile.classList.add('bounce'); nextTile.addEventListener('animationend', () => { nextTile.classList.remove('bounce'); }, { once: true }); };
i am i beginner and i am facing issues with the game in dancing tiles and green colour do you know what the issue is ive tried copy pasting his code yet its not working in my editor
Im a beginner please forgive the question, but how did he get all the words from the wordle dictionary? I know its on his github but I couldnt find in online
any advice, or even a video, showing how to clone internet archive / wayback machine funcionality? I can't wrap my head around it, where do they store all those pages, how do they store them, that's so much data, like, if you put a youtube video on there, and then that video is deleted from youtube, it actually remains on there, that's crazy, how much servers do they have? I tried looking it up, found one coding tutorial, I don't even know what langueage that was, and two other entries, that weren't even about coding, but rather, what to run on your linux machine to save a site on your computer, if I understood it at all, either way, in any of the three articles I did manage to find, there was 0 explanation of what's going on
I wonder if anyone has made a fix for properly indicating double-tiles? In the case that you guess another instance of the same letter, the verification does not reflect the actual. For example if you enter "Mamma" the tiles will indicate for all m's even if there is only one m in the answer. It shows green in the correct position AND beige in the incorrect position. This would seem that there are three m's. But maybe just one.
There's a bug with the logic Like if the word is "knock" and "boost" is typed in The first o will appear in yellow white the second to be greens, however only the second one should have color, not the first oke or both
I can see how he is running the whole application without starting the startInteraction() function, he only created it. When I tried to duplicate this project, my application wasnt running the game and couldn't understand why, since I copied letter by letter everything on this video, but then realized I had to run the function startInteraction() and now everything works. Why do I have to type "startInteraction()" somewhere on my JS file, but he seems to run it without typing it? Anyone know what am I missing here?
You always have to. He did as well, you might have missed it. Watch from 25:16 where he tries to type but it doesn't work, then he realizes, goes back and enters "startInteraction( )". Remember he is running both a finished version and the one in progress and often switches between them to show what it WILL look like.
This is pretty much DOM manipulation and a bit of array methods, I guess it something what junior devs should know. Obviously this guy made this game before, and then made video if it, he didnt just spit it out of head. He did planning first.
can anyone explain how he was able to use flex grow on a grid container i've been using css for 4 years and never have seen that , there's no way that works
This clone contains a bug doesn't it? If the word is FLOSS and you type FLOOR you should get: correct, correct, correct, wrong, wrong Because the word contains a single O and that is already at the correct location. But your clone gives you: correct, correct, correct, location, wrong
i'm playing wordle every day and I'm afraid to look into that json (don't want to spoil myself). Can anyone tell me which start date I would have to set to sync my target word with the official wordle? is the official wordle just iterating that json?
I've not looked closely at the actual Wordle code that chooses the word of the day, but yes, it appears to be stepping through the "targetWords" array one day at a time (the Wordle source named that array "La", just FYI). Based on knowing the days for some of the words in that array, it looks like they're using June 19, 2021 as day zero, so I would try that as a start date, then adjust +/- a day if it's not perfectly in sync.
If you don't want a daily word but a new word every time you refresh the page just replace const offsetFromDate = new Date(2022, 0, 1) const msOffset = Date.now() - offsetFromDate const dayOffset = msOffset / 1000 / 60 / 60 / 24 const targetWord = targetWords[Math.floor(dayOffset)] with var targetWord = targetWords[Math.floor(Math.random() * targetWords.length)]
This dude is fast, it took me more time to solve the damn wordle
Used this for my first project and it was really helpful! One bug I did find is that if you click on the glyph in the backspace it wont activate the function, and you have to click around it. If anyone else finds this problem, solution is:
svg {
pointer-events: none
}
makes the svg ignore the pointer clicker, so that when you click the glyph you are clicking the button behind it
Nonetheless, great tutorial, really helped improve my skills
Nice short solution. Thank you for it.
What’s fascinating is that this simple game that isn’t remotely hard for any knowledgeable programmer to make made millions to its creator.
Usually, the idea matters more than the amount of effort required to build it.
... Most knowledgeable programmers have the skills to make millions. Most grind the 9-5, are content and don't embrace their entrepreneurial side.
I recently watched the award ceremony for a hackathon. participants were complaining that some of the judges were non-technical people who didn't understand the complexities of they're project. The truth is that for vast majority of people programming should be a tool to achieve a design or some idea. in the end most people don't care about what framework or language you use. but being able to have ideas and knowing HOW to make it is way more valuable. everyone should realize that they are in the unique position to come up with ideas and actually make them exist.
@@arjundureja the idea is not new though.
plus a lot of luck. Remember flappy birds. LOLs.
Hi, you might want to know that your algorithm for coloring letters is incorrect as it does not take into account duplicates. For example, if the answer is "those" and you guess "geese", your code would say two E's are wrong location and one E is correct (implying there are 3 E's in the answer), but in the actual Wordle, the two middle E's would be fully wrong since there is only one E in the word. To fix this, you'd need to loop through the letters marking them as Green and removing them from the answer, then loop through a second time marking wrong-location letters as yellow. Everything unmarked remains as gray.
Thanks, great tip!
Yeah I found this bug. I'm new to JS. Do you have the code needed to do this?
@@KelbornXx On my channel I've done a tutorial in Python. If you're looking for a JavaScript tutorial that does this step right, maybe check out Ania Kubow's video.
@@DevProTips I have watched the video but that way isn't even close to the same. Is there anyway to show on this tutorial how to correct this issue? It is extremely close to being correct besides this major flaw. The creator of this video probably should readdress this issue as it ruines the function of the game.
@@DevProTips Looks like Ania's clone has the same logic flaw. Duplicate mispositioned letters get yellow code even if placed green elsewhere.
14:20
Fascinating! I kind of thought that the whole point of CSS variables was to define them globally, but you defined them within classes for some very clever functionality! I have never seen CSS variables used like that before.
Wow learnt a lot. Especially adding "I" to a data attribute when selecting element from the Dom as case sensitive, also love the patterns you used when creating this. Really a good stuff. 👊👏💪🥰
The keyboard is a great usecase for grid-template-areas! :)
Edit: I realize now that this would have been a pain to type out so using the half-key divs is elegant and fast. I'm keeping the comment though, because g-t-areas is hard to argue for. A smaller version of the keyboard usecase would finally be a perfect opportunity to use it
I bet the New York Times regretted purchasing Wordly after you published this tutorial.
If you are also using Emmet Abbreviation for VS Code, you can just add a multiplier and the element will be added in that amount, e.g. .tile*30 will add 30 * :))
The flip animation and where the word list came from were a surprise. Thanks for reinforcing outside the box thinking
Omg this is really funny, I just spent the last week cloning my own version of wordle, and now you made this video😃
Nice job on the video about seasons. Hope you had a good grade on that one because you deserved it! (I mean it, I'm not being sarcastic) ;)
@@SLRModShop Thanks for checking that out :)
13:21
you could have done this with:
filter:brightness(some value);
it is easer and does not require that much work
Lol i just tried playing wordle in the yesterday morning, then you are now publishing this tutorial😂
I just created it yesterday in vs 😂
Same here
awesome tutorial man! you explain everything so well!
If you are interested, there is one bug that does not follow the rule of the Wordle game. This Wordle clone does not account for repeated characters. What I mean by that is that if a character is correctly placed and that SAME letter appears again later in the guess word, the logic will incorrectly mark that letter as "wrong-location". For example, TargetWord = "Theft" and GuessWord = "These", the last "e" will still be marked wrong location (even though there is only one "e") because of the line targetWord.includes(letter). The actual Wordle game would mark this as "wrong" since the "e" has already been placed.
I was able to fix this bug by simply adding a dictionary to keep track of letter count and to add an extra check for letter count in the "wrong-location" if statement!
Nice tip. Could u pls give the code. I am new to js. It would help me a lot.
Also curious how your function looks like
You are my favorite programming youtuber. You're very good at making follow along coding tutorials, thank you.
Your CSS is fantastic in this Wordle clone. It is especially fantastic how you figured out the flip animation.
However, your JS for the word positioning and coloring has a bug. It was in your example for "FLOOR" where the correct answer was "FLOSS". The second "O" should have been greyed out instead of orange.
Yes, this is a problem!
This is great! One thing it's missing compared to the original is that the original won't highlight a double letter in your guess as being in the wrong position if the correct word only has that letter once. Example: You were putting 'FLOOR'.... It was showing one 'o' as green and one 'o' as yellow... However, floss only has one 'o', therefore the second 'o' in floor would be grey on the original game. In short, it will only highlight one of your double letters with correct position taking preference.
I built a wordle clone myself and found this the most annoying problem to overcome.
Yes!!! I’m currently building a clone myself and I’m having trouble incorporating this lol
Hi Steven! Could you share that piece of code with me?? I am also creating a clone and It will very helpfull!! Thank you!!
I checked the "Why I Don’t Use Class Selectors In JavaScript Article" I used to sometimes use the approach of using the "js" prefix but tbh after watching this video the usage of Data Attributes do seems a lot more convenient.
I usually only use them to store data needed on user interactions but its also a great idea to use them instead of classes as selectors.
Thanks for the video and Information.
I really enjoy the portions where you're building the HTML & CSS to get the same look and feel of the original game. I would choose to write the JS differently, taking a strict MVC approach. I am never a fan of using the view (HTML, in this case) as the authoritative state, and would elect to keep state information somewhere in a model in the script. The view should reflect the state of the model, not vice versa. I think your viewers would benefit from understanding this.
If you know so much then this tutorial is not for you. Its a coding channel directed at people new to programming, why would he complicate it by introducing new concepts like MVC.
@@streamx2 "...why would he complicate it by introducing new concepts like MVC..."? Because it's never too early to learn good software engineering practices? I would argue that if you show someone "new to programming" a bad coding practice, that person is likely to use that bad practice for the rest of their programming career.
Since "...I'ts [sic] a coding channel directed at people new to programming...", there should be emphasis on teaching strong fundamentals over just writing quick-and-dirty code that gets a job done.
A word of warning: that list of wordle answers is in order, so if you want to avoid spoilers be careful about looking too hard at that list. If you want to be completely safe about it, there are word lists out there that have sorted the answer list alphabetically for you, so you can have the list without having the order.
Me : _Follows this tutorial all the way through_
Also Me : Where My Money ?
NYT are thinking, "Dude, I just spent over a million on this"
Demn😂😂👍
I doubt it. That may've been an insider's deal, with the money staying in the 'family.' If you have no right connections or marketing and create something like that, it'll likely get copied out and you won't see a single penny for your idea. But who knows, it may be worth a try. Good luck
The money is paid for the users that are already playing the game. There are over a million players playing it.
Companies pay for the user base the app had when they buy something.
Am i the only person who had to pause the video every few seconds to follow along?!?
i just finished his Pong clone. after i changed the playback speed to .50, things got a lot easier. i still had to pause to catch up, but i didn't have to pause and then try to rewind to the place i missed. give it a try! :)
Hi all
I am new to Javascript,
May I ask why he needs to add {once: true} in shakTiles function?
From my understanding, he already removes "shake" in the class, it means won't sake anymore. may I correct?
43:54
while the part of the game showcased in this video is important, I think what really sold it was the social aspect. making everyone compete for the same word, and sharing your score using only simple text and emojis, all without spoiling the answer
Great 👍🏿👍🏿,, just completed following through. Learn a lot. Can't wait for the spelling bee clone.
I had just started playing this and got a lot of help from you
That was extremely easy to follow, and a very well done video. Thank you.
I have been playing with version of Wordle and the Backspace/Delete graphic seems to block out most of the button event listener, Who do you fix that?
I've found a bug. I had the word 'PAPER' and had guessed 'CARER'. The game told me the A, E and (ending) R were correct (green) and the first R in 'CARER' was yellow, so the only other place the R could be is the first letter. I guessed 'RAZER' on my final guess and the first R was yellow. The correct word was PAPER and there is only one R in PAPER. So I think I've found a bug!
I believe that is the correct behavior since the first R is in the wrong location and also in the word. It doesn't necessarily mean there are 2 Rs though.
@@WebDevSimplified No, in Wordle if a duplicate letter (R for example) appears green and yellow, it DOES necessarily mean there are two Rs. Another example: in your video, FLOOR has the first O green and the second yellow, but the word was FLOSS, which only has one O. In the live wordle website, the coloring for the FLOOR guess would be green green green grey grey.
I would have made that tile flip way too complicated 😅
Bravo for the elegant solution 👏👏👏
kyle da goat, but yeah currently trying to figure out the "green needs to overwrite the yellow" bug, but also... we need to use a setTimeout on the submitGuess function at 250ms or else if you type and hit enter before the letters appear, they'll be filled in and then disappear before following the indexical trail of filling in the words. hope that makes sense. thanks for the vid, great stuff!
Great video as always!
What a phenomenal tutorial it was!!,❤️❤️❤️ love this.
And I've learnt aaa looot of new stuffs from this.
Why not just use the filter property to change the brightness of the button? You would be able to use transiton, to allow it have smooth animations.
The video title should be: "How to make more than a Million $s in an hour..!"
Jokes aside: Really great work Kyle! Keep inspiring.
WoW... This is realy cool 🙂
I was planning to make a similar look a like game that's called "LINGO" here in the Netherlands. But i want to make it a multi user game, with WebSockets using a big monitor or a projector to show the game field and using 2 tablets to let contesters enter there guesses. In the LINGO game there comes a Bonus letter after a few wrong guesses.
Or maybe go a step further to add some Rasberry Pi's / Orange Pi's and connect real keyboards to them. Don't know yet what i like the most 🙂however you gave me a really good starting point with the playfield and animations.
I'm new to you channel and was just browsing around @ your video's.
i also want to complement you by the way you explain things. I'm an 'old' app builder myself ( for Hobby and Fun only ) and you teaches me some stuff i didn't know.
Anyway thank you for this course / tutorial 🙂
Lots of very good ideas, tips and tricks! Thank you very much :)
I built the wordle clone in 24 hours (8 hours per day) and this dude completed it in 1 hour.
P.S: I am a beginner having only 2 months of experience
amazing video as always. Thank you for making it easy enough so someone who just started learning js could follow along
that's so funny, I just created my own wordle clone couple of weeks ago. I did stop the project before the animations tho, would be interesting to try and implement them and copare with your solution
Amazing video!!
For those thinking he just made an app that's worth millions! Guys! It's not the app, it the idea! It's the concept that's worth millions.
If you publish that app on google store it will be taken down because it violates some protected rights
for keyboard hover effect you can use css filters (saturation and brightness)
Can you do a video specifically on RxJS, when you'd use reactive programming, etc.? Apparently it's used to avoid promise callback hell?
You can just async await for that. Rxjs is an overkill unless many of the functions in that library is needed in your application
Hey Web Dev Simplified, Great Content as Always.✨
Thanks for Sharing it!🙏🏻
You Have Been an Inspiration for My Own 📺TH-cam Channel!!!
For the hover state, using CSS filter would be less code to write, no?
Great video. Learned a lot about JS.
Just one question:
If the correct word is "CLOSE" and you guess "FLOSS", the first S will be green, but the second S will be yellow, right? That's a pretty critical thing for guessing the right word.
Yep this is a problem I encountered while making a project like this as well. What I actually did was write a recursive algorithm that strips both the guess and the correct word of all exact matches, then compares them from there. That way you're comparing "CLOE" and "FLOS" and there is no match at all.
There are also issues if the correct word has duplicate letters which cause headaches. I had to jump through a couple hula hoops to catch all the edge cases
Çok güzel olmuş
Eline sağlık
Great video Kyle, how we go about customizing the message depending on how many guesses it took to compete the game? If guess === 1 "Excellent" etc
Watching you do this makes me feel I still have long way to go. I am still a newb and I still get confused on ems
I found when using the on-screen keyboard, if you clicked directly on the svg or the path, it wouldn't delete, because that was the target being passed in the event. I added the data-delete to the svg and path and it worked, but wondered if there is a better solution. Wrap the delete button in a div, maybe?
Yes! There is actually better way handling it without touching the HTML.
When you are handling a eventListener, save variable "clickedTarget", and give it value of "e.target.closest('.name-of-button-you-clicking')
So if you click on svg icon, it will closest method will look for closest parent class you specificed. In case you clicked on button and not svg, closest will return specified class again.
It basically works like invert querySelector.
You also should look for eventDelegation.
@@Arttyor Very cool. Thank you!
@@gpaolano You can also use CSS to fix this problem. Add pointer-events: none; to the svg class.
@@KelbornXx This is by far the easiest solution! Thx!
Came up with the same solution, and came to the comment section exactly for this question!
Kyle Cook is the man 😎
going through the tutorial, awesome job man! learning a lot from it....I have a question regarding the json files - is there a way to read their content without adding it to a variable inside the js file? This way, instead of having 15k+ of code lines, you end up with several dozens just for the functionalities, and you recover the json contents with a js function as well. thanks :-)
I could be wrong here and hopefully someone with better knowledge can correct me if I am. But I would imagine you could do something like: const targetWords = JSON.stringify(targetWords.json)
I think you're wanting to read directly from JSON file into an array, right? If so, for another project I used
const result = await fetch("./myFile.json") and it seemed to work. You might need to wrap it in another await for the data to return, like this:
const result = await (await fetch("./myFile.json")).json()
or else I think you get a readableStream object that's annoying to deal with. If you want to turn it directly into an array, I think you can use something like the PapaParse NPM module:
const result = await fetch("./myFile.json")
.then((response) => response.text())
.then((text) => {
var resultArr = [];
Papa.parse(text, {
header: true,
worker: true,
step: (results) => {
resultArr = [...resultArr, results.data];
},
complete: () => {
setRows(resultArr);
},
});
});
My solution was to change the JSON files to JS files. Then inside the files, give the JSON objects names so they become JavaScript arrays. For example,
```const wordlist = ["cigar", "rebut", "sissy", ...];```
Finally, in the HTML file, load the wordlist and dictionary array files just before loading script.js:
``````
@@SustainedFuture in my case, I needed to be able to read from any JSON file, so manual conversion wasn't an option. Unless you're saying you did all that stuff in code, in which case it seems like extra steps, no?
Awesome!!! TQVM!!
Thanks for teaching!!!
The simplest way to center everything is: display: grid; place-items: center; place-items is shorthand of justify-items + align-items
Thanks
Or just use bootstrap bro, even easier :)
Outstanding content man. Could you please also make wordle using react please ?
Is there any reason not to put the code used to determine the index target word in its own separate function?
thank you for the idea❤
Hi Kyle, I'm a huge fan ^^ keep up the good work, your tutorials made me learn lots of things and they are fun to watch also ^^. I was wondering what is your setup for screen recording?
Hi, I can not make this responsive for mobile phones. Can you suggest some CSS if it is possible. Thank you
very wonderful, please more websites / apps copying
very enjoyment to watch
Can you show us how you got the dictionary and found the targetWord json?
Superb tutorial
also, we can add the following to our "active" state for the bounce the tile receives upon an entered letter:
.tile[data-state="active"]{
animation: zoom-in-zoom-out 50ms ease;
}
@keyframes zoom-in-zoom-out {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.25, 1.25);
}
100% {
transform: scale(1, 1);
}
}
Nice, thank you
Doing this made my shake animation not trigger.
Instead I created a new class and added the class to the nextTile inside pressKey function and removed it after the animation end. Kept the keyframe just like yours
So my pressKey function looks like this now:
const pressKey = (key) => {
const activeTiles = getActiveTiles();
if (activeTiles.length >= WORD_LENGTH) return;
const nextTile = board.querySelector(':not([data-letter])');
nextTile.dataset.letter = key;
nextTile.dataset.state = 'active';
nextTile.textContent = key;
nextTile.classList.add('bounce');
nextTile.addEventListener('animationend', () => {
nextTile.classList.remove('bounce');
}, { once: true });
};
i am i beginner and i am facing issues with the game in dancing tiles and green colour do you know what the issue is ive tried copy pasting his code yet its not working in my editor
Thanks for finding me
Can you make a part 2 of this to create that game statistics, dark modes and game difficult feature?
Im a beginner please forgive the question, but how did he get all the words from the wordle dictionary? I know its on his github but I couldnt find in online
I clicked for a business idea but instead got a "how-to" for a game I've never heard of. #eyeroll
Wow that hour passed really easy.
Not sure, but couldn't have you used the lighten filter on the hover?
any advice, or even a video, showing how to clone internet archive / wayback machine funcionality? I can't wrap my head around it, where do they store all those pages, how do they store them, that's so much data, like, if you put a youtube video on there, and then that video is deleted from youtube, it actually remains on there, that's crazy, how much servers do they have? I tried looking it up, found one coding tutorial, I don't even know what langueage that was, and two other entries, that weren't even about coding, but rather, what to run on your linux machine to save a site on your computer, if I understood it at all, either way, in any of the three articles I did manage to find, there was 0 explanation of what's going on
THANK YOU !
I wonder if anyone has made a fix for properly indicating double-tiles? In the case that you guess another instance of the same letter, the verification does not reflect the actual. For example if you enter "Mamma" the tiles will indicate for all m's even if there is only one m in the answer. It shows green in the correct position AND beige in the incorrect position. This would seem that there are three m's. But maybe just one.
Nice, next time be the first!
Adding the tabbing to the virtual keyboard is redundant and confusing. If you have a keyboard, you just type. If you don't, you touch or point.
There's a bug with the logic
Like if the word is "knock" and "boost" is typed in
The first o will appear in yellow white the second to be greens, however only the second one should have color, not the first oke or both
Dear sir, can you do a video to display data from sql using UNION command and when click a relavant field to go to deial page . thank you
So the game is easy ui version of terminal game that was taught on python cook book series. Something like pico for hint...
Please just more videos like this one
Very cool video but the naming of nextTile is not correct i think. It is the currentTile. Makes it more difficult to follow. For me its is to fast.
Just out of interest, couldn’t you just fill the tiles via ::before{ content: attr(data-letter)} ?
I can see how he is running the whole application without starting the startInteraction() function, he only created it. When I tried to duplicate this project, my application wasnt running the game and couldn't understand why, since I copied letter by letter everything on this video, but then realized I had to run the function startInteraction() and now everything works.
Why do I have to type "startInteraction()" somewhere on my JS file, but he seems to run it without typing it? Anyone know what am I missing here?
You always have to. He did as well, you might have missed it. Watch from 25:16 where he tries to type but it doesn't work, then he realizes, goes back and enters "startInteraction( )". Remember he is running both a finished version and the one in progress and often switches between them to show what it WILL look like.
are entry level front end developers required to have this level mastery of javascript ?
This is pretty much DOM manipulation and a bit of array methods, I guess it something what junior devs should know. Obviously this guy made this game before, and then made video if it, he didnt just spit it out of head. He did planning first.
What about the backend ?
can anyone explain how he was able to use flex grow on a grid container i've been using css for 4 years and never have seen that , there's no way that works
New york times would have saved up millions of dollars by just watching this video smh
watching him typing out all of the individual keys instead of doing a js 2d keyboard array + a loop was painful
This clone contains a bug doesn't it?
If the word is FLOSS and you type FLOOR you should get:
correct, correct, correct, wrong, wrong
Because the word contains a single O and that is already at the correct location.
But your clone gives you:
correct, correct, correct, location, wrong
yep, there's a few small things that he missed. but I think the idea of this video was to show how simple it was to create.
@@UrAdversary may I know what else are missing?
Thank you
Can you please recreate the game in react, please?
i'm playing wordle every day and I'm afraid to look into that json (don't want to spoil myself). Can anyone tell me which start date I would have to set to sync my target word with the official wordle? is the official wordle just iterating that json?
I've not looked closely at the actual Wordle code that chooses the word of the day, but yes, it appears to be stepping through the "targetWords" array one day at a time (the Wordle source named that array "La", just FYI). Based on knowing the days for some of the words in that array, it looks like they're using June 19, 2021 as day zero, so I would try that as a start date, then adjust +/- a day if it's not perfectly in sync.
Can somebody help to make this game randomly select a word from the targetwords to play many times? I'm new to Javascript
If you don't want a daily word but a new word every time you refresh the page just replace
const offsetFromDate = new Date(2022, 0, 1)
const msOffset = Date.now() - offsetFromDate
const dayOffset = msOffset / 1000 / 60 / 60 / 24
const targetWord = targetWords[Math.floor(dayOffset)]
with
var targetWord = targetWords[Math.floor(Math.random() * targetWords.length)]
Is it really possible in one hour ?
u r not dealing with duplicate letters! words like tweet! if there is only one "T" the program should not say there are 2.
Had interview yesterday where they asked me to create wordle. Duck my life
they asked you to create wordle on the spot?
One needs to have A 7 Figure Business Idea first. js
i hate how quick some tutorials are
Did he just solve wordle casually on lvl 2???