Next up, we need to focus on word validation. At the moment, we'll accept any sequence of characters. But, of course, that's not really fair. You need to give us an actual word. So I can imagine a few ways we might deal with this. One option would be when the user makes a guess, and you ping some kind of third-party dictionary API. And if that returns a valid word or a valid definition, you know it's acceptable. And if it returns maybe a 404, some kind of invalid status code, then you know to reject the submission. And that would work. The only downside is there might be a little bit of lag as you hit that API. And you can imagine if you grew to the popularity of the actual Wordle site, that is a massive number of API hits. So instead, I believe what Wordle does, if we take a look at the source of the website and we scroll to the bottom, here's the JavaScript, I believe they just inline all, have a look right

a three-by-three grid, in that case, yeah, we could set the letters. In this case, I found this website that has 1,292 three-letter words. So if we wanted, I could grab all of these. All right, so let's do this. In my JavaScript folder, I'm going to create a new words.js file, and I'm going to paste all of those in. And then I'm going to need to format this. So why don't we, let's do this, I'm going to select every white space. Oh, I can't even do that many. I wanted to select every space, but PHPStorm isn't going to be able to handle that. Let's switch over to Sublime real quick. And I'll paste that in, and then let's see if Sublime can handle it. It can. So let's put each one on its own line, and then wrap it in quotes, and then add a comma. All right, and then I'll do the one on top as well. And you get where I'm going here. Okay, so now we could say export default array like this. And now we have an array of every three-letter word.

and then I'll do the one on top as well. And you get where I'm going here. Okay, so now we could say export default array like this. And now we have an array of every three-letter word. Let's update PHPStorm. Cool. So now if we switch back to our game, just to show you, I could import our words from words. And then if I console.log this, you'll see a massive array of words. Open up the console, and there you go, an array of 1250 words. Okay, so let's see how we can use this. The first thing we might do is when the user submits the guess, we should validate that it's an actual word. So I could say, if the array of words does not include the current guess, then you've made a guess that's not an actual word. So I could say real quick, alert, not a word, and return. Okay, let's give this a shot. Okay, let's begin with an actual word. Oh, and I get an alert. I wonder if that's a capitalization issue. Let's see. Yeah, so try is

option. Come back, refresh, R-T-Y, and we do get some feedback there. Or maybe invalid word, dot, dot, dot. Another option would be we could set a piece of state on this component. And then we could, so for example, actually, let's use the current state that we have. We could say maybe add a class of invalid if the state is equal to invalid. I don't think we're going to keep this, but just to give you a quick idea. And then maybe on our game, when you submit a guess, if it's invalid, then we would update the state of the game. So right now, the game is in an invalid state. That might be an option. But just make sure, if you take this approach, you would need to reset it. Like up here, you would need to say state, bring it back to active when they type a new letter. Okay, let's see if that works. R-T-Y, submit it. And now if we have a look at this row, sure enough, it has a class of invalid. Okay, so now, yeah, you could add some

when they type a new letter. Okay, let's see if that works. R-T-Y, submit it. And now if we have a look at this row, sure enough, it has a class of invalid. Okay, so now, yeah, you could add some basic styling for it. And I think we have a little that I can comment out, or uncomment. So find a row that has a class of invalid. And then for each of the tiles, we're going to set a special color and a special text shadow. Okay, come back. R-T-Y. And yeah, now if you submit an invalid guess, we have a way to provide a little more visual feedback to you. But I can reset that to, I don't know, tap, tar. And if we do another one, oh, that's not right. So we ran into a little bug there. Only the bottom one should be set. So yeah, this is how it works. You run into little issues. So we should set a class of invalid if the current row index is this row, and the state is invalid. Okay, I think that would work. tap, tar, gibberish, and now only that word

little issues. So we should set a class of invalid if the current row index is this row, and the state is invalid. Okay, I think that would work. Tap, tar, gibberish, and now only that word is highlighted. And yeah, I guess we'll keep this implementation, but there's a couple other ways we might do it as well. Like, actually, maybe we will change this. Like maybe we track not the state, but whether there are currently errors. And by default, it's set to false. Then when you press a key, we will reset that. But if there is an issue, then we will turn errors on. That might be better, because I don't know if we want to use state, the state of the application. Are you working through it? Have you completed it? Is it pending? Do we want to use that to signal a invalid word? Maybe not. So this would be an alternative, is to extract a new property. Now I would just use errors equals true or that. Once again, tap, tar, gibberish. Maybe that's a

invalid word? Maybe not. So this would be an alternative, is to extract a new property. Now I would just use $errors equals true or that. Once again, tap, tar, gibberish. Maybe that's a little bit better. Okay, so we're ready to wrap up, but for the final 30 seconds, just an indication for what you might do if you want to take the approach where you ping some kind of dictionary API to validate the word. If you want to take that approach, I would probably handle that, maybe right, we wouldn't have this part. I'd probably handle it right here. And I would do something like, I'd call a method, checkDictionary. It's sort of what we're doing, right? Let's look at the dictionary and make sure you gave us a valid word. We'd send through the current guess. That would then make an AJAX request. So we would want to wait for it to complete. Then you might say, if checkDictionary, which maybe uses the fetch command to hit some