Word Game Project Demo

[00:00:00]
>> We are gonna do our next project together. This is the final project, so congratulations on making this far. Many of you are probably familiar with the word game Wordle, right, written by my former coworker Josh Wordle from Reddit. It's a word game that you and I will just play it together quickly to show you kind of like how it works if you're not familiar with Wordle.

[00:00:27]
I call it Word Masters here or Frontend Masters, right, make sense. So people have one, two, three, four, five, guesses to try and guess what a word is. So what they can do here is they can guess, Some word, I pick CRANE cuz apparently that's what everyone picks, right?

[00:00:52]
And then it'll tell you C, A, N and E are nowhere in that word, and R is in that word, but it is in the wrong place, right? So, let's guess something else. The next thing I always guess is TOILS. So I know for a fact there is an I, and O, and an R, and they're in the wrong place.

[00:01:21]
I actually know what the word is but if it's in the correct place, Let's see. Well, if you could guess the correct word which today it is IVORY, it'll tell you you win. And then I put a little animation there at the end where it flashes all the rainbow that to let you know that you won.

[00:01:47]
But if it's in the correct place, then it will turn green. Last, so I'm gonna just refresh the page here. It's the same word, so if I put IVORY again, you'll just win right away. But if I put gibberish in here, notice that it'll just flash red, to show me that you're trying to get something that's actually worse.

[00:02:10]
All the guesses must be valid words. Yeah, that is it, that's the entire game of how to play Wordle. So this is what you are going to code yourself. Now, what I find compelling about this is you just took an intro to web development course, and you're going to be coding an application that got sold to the New York Times for several million dollars, right?

[00:02:39]
Which is to say, the skills that you have acquired here could potentially be worth several millions of dollars, right? Josh has had a really good idea and he executed on it really well, and that was worth a lot of money to someone. So you can take your ideas, you can make apps out of them, and then maybe sell them to people.

[00:02:58]
So one thing my demo doesn't work on mobile phones. You get extra bonus points if you do. I did make it work on mobile phones but it made it so much more complicated in the code that I just decided, we're not gonna worry about that for the moment.

[00:03:12]
So, I've the kind of the plan here. There's a secret five-letter word chosen, right? I have an API setup for you, so that it will give you a new word everyday just like with Wordle. Wordle, there's only one word every single day, right, and then it changes everyday at midnight.

[00:03:33]
Players have six guesses to get this secret word. So if I just say CRANE, CRANE, CRANE, So it'll tell you that you lose, the word was IVORY. Right, so it'll tell you at the end, I'm just using alerts. Alerts are objectively terrible user experiences, but I didn't wanna spend a bunch of times coding up some sort of a nice looking losing screen.

[00:04:05]
But you could totally do that, right, you can have something better than alerts. So if a player gets his letter that's in the correct place, show it as green. So let's just refresh this again. What's a word that would have something that would match, but not be the correct thing.

[00:04:29]
English is not my strong suit all the time. Anyway, it would just show that as green here, right? And obviously if you do IVORY. It shows them all in green, right? Okay, so a good example, if the player gets a SPOOL and the word is OVERT, right, one of the Os will be shown here as green, right?

[00:05:04]
Actually, one's gonna be shown as yellow. But yeah, if a player guesses the correct letter in the correct place, it'll be green, okay? Another thing that ends up being a little bit difficult is that what happens if, here, right? So OVERT it has one O, if that's the correct word, and you have SPOOL here, which has two Os.

[00:05:30]
You shouldn't show both Os as yellow, right, because there is one yellow in the word, but there's not two. So the first one should be shown as yellow but the second one shouldn't be. But let's say the word is, I don't know, POOL or something like that, word actually does have two Os, right?

[00:05:49]
Then you need to make sure that the correct number of letters are showing as yellow and/or green. So if this was POOLS and the correct word was SPOOL, then one of them would be green and one of them would be yellow, right? Because the first O would be in the correct place, but the one, this O, would be correct that's in the word but not in the right place.

[00:06:22]
Okay, the player guesses the right word, then the game is over and you do some sort of celebration. Again, I just use that same rainbow animation that I showed you in the CSS animation chapter. I try to think if there's anything else interesting to say. Notice that I have a loading indicator, right?

[00:06:43]
So if you catch it right when I refresh the page, there's like a little spinny thing. There's a green one, it took me a second to think about one. Right, but you see that little spinny guide, it's requesting something from the API and then now you're waiting, right?

[00:07:01]
It's a loading indicator, right? Cuz there's some delay between when you make the call and when the call comes back, you don't want the user to think that the thing is broken, right? I'm on a very fast Internet connection at the moment, so it's basically instant. But imagine that user is on a 2G connection in the middle of rural Montana or something like that, right?

[00:07:25]
That can take a long time, so they might be waiting a half second, a full second, several seconds. So the spinning indicator just lets us know, chill out, I'm working on it, right? That's why you wanna show like a loading indicator. Okay, So you will need to call an API to get the correct secret word.

[00:07:49]
Frontend Masters has created one for you, so that you can call their API and they will give you back the word of the day. So you have two APIs to work with. One of them is this one here, I'll give you the URL. If you get to it, You'll see here that you get IVORY.

[00:08:12]
And then at midnight tonight this will change to be something else. So by the time if you're watching this later, it will not be IVORY, it'll be something else. Okay, The response will look like this, will have a word. It'll be some five-letter word, I guarantee you that all of these are five-letter words.

[00:08:35]
And you can ignore the puzzle number, right, but we just looked at puzzle number, what was it, 53? Tomorrow it will be Puzzle number 54 and then 55, it just increments. And then these are, if you just wanna have some fun, like if you wanna keep guessing, you can add random=1 to the end.

[00:08:54]
So if we do this, let me say random=1. This was just me while I was testing cuz I actually wanted to play the game, right? Once you know the word of the day, you have to wait a whole day, and I didn't wanna wait a whole day. But if you put random it'll just keep giving you random words here, right?

[00:09:13]
Again, always five-letter words. And there's several thousands five-letter words. The one disclaimer that I'm gonna throw out right now, we did our best to clean it of words that might be undesirable but it is a random word list of words, right? So, nothing isn't meant by any intent for all these words, they're just, I promise you, they're literally just random five-letter words.

[00:09:39]
So, I'm sorry if you come across one that's disagreeable to you. I promise you, we don't mean anything. And if you wanna request a specific word, you can also say, what I call it, puzzle. So you can put ?puzzle=1, if you wanna see what the very first one was.

[00:10:02]
So it was cigar, right? Fixer, right, 140, Okay, so that is the word of the day.