Project JavaScript: Validate Word

[00:00:00]
>> All right, so now we're marking everything correctly, so we did that. Let's finish that to do, we got one thing left to do, which is to validate the word. So let's go ahead and do that, shouldn't be too complex of a function here. You could make an extra function that does this outside of commit, I'm just gonna do it directly inside of commit.

[00:00:25]
Up to you how you choose to do that. So, first thing we do is we're gonna set isLoading to true, right, cuz we're gonna load something from an API. We're gonna setLoading, to be true cuz it is now loading. This is an async function so we can do async await in here we can say const res = await fetch("").

[00:00:50]
And then we're going to fetch from ("https:://words.dev-apis.com/validate-word"), cool. And if you remember we have to tell it the method which is a post, and we have to give it a body. Which is going to be, JSON.stringify, {(word: currentGuess}). So this is going to post to that API that we talked about, and it's going to get back is this a valid five letter word.

[00:01:29]
So, we're gonna request from this API the validated word, we're gonna post, and we're gonna stringify word: currentGuess. This is going to post to that API and it's going to ask, is this a valid five letter word, Okay? So I'm gonna say const_resObj = await, res.json();, and then I'm gonna say const validword =, resObj.validWord;.

[00:02:08]
Now, I'm gonna show you just a little I'll put in as a comment, this is how I would actually typically write it. These two lines are exactly the same, by putting these curly braces here. You say, I know there's something called validWord inside of resObj, so pull it out and make it a variable called validWord.

[00:02:30]
It's a little cryptic, people that are new typically struggle with that syntax. But just you'll see it so, I'll leave that in there for you if you want to, Cool. So, Now we're done loading, so isLoading is now assigned false. And we'll say setLoading, to be false as well.

[00:03:03]
So now we have this validWord, we know if it's a valid five letter word or not, so what are we gonna do about it? Well if it's not a five letter word that's valid, we're gonna say so if it's not a valid word. Again, this exclamation point just makes trues into falses and the falses into trues.

[00:03:22]
So you can as think it as not, right? Exclamation points means not, so if it is not true it's what?
>> False.
>> False, if it's not false, it's what?
>> True.
>> So basically I'm saying if this is not a valid word, then do this. It would be the same thing of doing if this, do nothing else, do this, right?

[00:03:50]
Same thing, But we use this everywhere. So, if it's not a valid word, Then, what do we do? Well we don't let them guess right that's the point here. So we'll have some function here called markInvalidWord or something like that, and then we will return, right? Because we don't wanna go on to trying to mark the guess because they didn't guess a valid word.

[00:04:23]
Okay, let's go down here and we'll make a function here called, markInvalidWord. And that'd be fine here if you just wanted to say, not a valid word, and move on, totally fine with me. So here if I say, blah, it's just gonna say not a valid word and it's not gonna let you move on, right?

[00:04:49]
So I can try again, not a valid word, and I can here come back and say pools which it should be a valid word, right? Cuz the API is gonna validate, that it's valid. If you look at our network requests here you can see that I have a bunch of requests to, validate word, Make sense?

[00:05:13]
So now we're doing POST requests which is pretty cool. So I'll show you what I did in mine I made it a little bit nicer for markInvalidWord, and I use a little bit of animation. Animations are always kind of wonky, you always have to do some funny stuff.

[00:05:30]
Cuz the browser doesn't necessarily, have the best ways to interact with animations. So what I wanna do is I want to quickly add a class to this so it flashes an animation and then I wanna take the class off. Because, it doesn't remain an invalid word it just becomes an invalid word and then you set the user back to try again, right?

[00:05:50]
So you just wanna flash something and then take it away, so I'm gonna show you how to do that really quick. Okay, so I have this class if you remember from our CSS calls, not spin. We can make it spin, that'd be fun, but I called it flash.

[00:06:13]
So if you mark it with an invalid, it's gonna flash this red color for one second. So what I'm gonna do here is I'm gonna say, for (let i = 0; i < ANSWER_LENGTH, i++), we're gonna say letters. And actually, we can just go ahead and do basically the same thing here.

[00:06:42]
Grab that, Instead of adding wrong, we're gonna add invalid, right? Okay so let's even just see what that looks like for just a second. So if we say something like this, notice that it flashes red for a second, pretty cool, right? I think that's a pretty compelling interface to show sounds like hey, this isn't correct, try again.

[00:07:15]
But here's the problem if I change it again and do it again, it's not flashing it, why? Well if we inspect here, these are all now invalid, and I can keep adding invalid to it, but, it's already invalid, right? So it's not gonna flash it again cuz it's only gonna do invalid that first time.

[00:07:38]
So we have to put it on there, and then we have to take it off, so how do we do that? A bunch of ways you could go about doing this, we're gonna do a really lazy way called setTimeout. This is like hey browser, wait for some undisclosed amount of time and then do something.

[00:07:56]
So I'm gonna write a function here that says, Same thing, except I just want you to remove it. And then how long do we want it to wait? It's in milliseconds, I'm just gonna say 10, right? Which is basically, faster than you can blink I think, I think blinking takes more than a cent a second, actually I'm not really sure.

[00:08:21]
Suffice to say very fast so, the way actually want this to work, is I want to just remove it if it was already there. If I call remove and it's not there, it just doesn't do anything. I need to wait long enough for the browser to say okay, I understand what you asked me to do, it's called a repaint, right?

[00:08:40]
And then I wanna add it, Okay, let's try that again. The first time it's not gonna be there so nothing's bad's gonna happen, right? And then the invalid class actually does just stay there, that doesn't matter to anyone else besides us the programmer, right? But now if I hit Enter again, it'll remove it just long enough, so that I can add it back.

[00:09:10]
Kind of a fun way to do it, if you don't feel like doing that, just alerting it's not a valid word would have been totally acceptable here as well.