Let's see if we can get conditional tile highlighting to work. So, for example, if the word is cat, then the A is a perfect match, which means it should have a background color of some kind of green. The same for T. And then maybe R is absent, so it will have some kind of grayish background color. You know, we can play around with it. But something along those lines. Okay, the first thing I want to do is set up my CSS. So let's see. Under tile, why don't we say tile with a class of absent will be,

So let's see. Under tile, why don't we say tile with a class of absent will be, and again, these are just quick and dirty colors, if it is present. And remember, these terms, absent, present, and correct, come directly from the Wordle website. Present will be some shade of yellow. And then finally, correct will be some shade of green that we can set later. All right, cool. So now if I refresh and we look for dog,

All right, cool. So now if I refresh and we look for dog, again, depending upon if these are correct, I could add a class of present. We should probably make that text color different in that case. But this could be correct. And this one would be absent. Yeah. Okay, so let's just make yellow have a color of black in that case. I think towards the end of the video, we're actually going to highlight not the background color,

So let's see. At least we could start by putting it here. Update the tile colors. And then, yeah, we can extract it when we need to. So how could we do this? Well, we know we can grab the current row, right? So I could once again say for let tile of currentRow. And that'll give us each tile here. And then what I could do is say tile.status. And just for a refresher, on the Tile class we created,

And then what I could do is say tile.status. And just for a refresher, on the Tile class we created, we added this style property. So why don't we start by saying status equals. I'm just going to set it to or hard code it to absent. And then what we could do is bind the class of the tile. So we could say class equals tile.status. All right, let's give that a shot. So dog, submit, and oh, we got the background color, but in the wrong place.

So now, of course, rather than hard coding it to absent or correct, just to give you an idea of what that would look like, rather than doing that, we want it to be conditional. Based upon whether that letter is an exact match or not. So let's start with the easiest one. Let's check to see, does the secretWord include the currentLetter? So think about it. If the secretWord is cat and the currentLetter is d, does cat include d? If it does not, then I want to add a tileStatus of absent,

I would do something like tile, I think this is it. And then you grab the entries. Maybe it would be easier to do. Can I just do a foreach here, maybe? Let's give that a shot. This.currentRow.forEach tile. And then I could say tile and index. Then we could move this over. Yeah, maybe we don't need a for up in that case. So anyways, I could say, if the users guess,

Yeah, maybe we don't need a for up in that case. So anyways, I could say, if the users guess, and let's say they do rat, let's figure out what the current letter is for the iteration. So in this case, R. And let's see if R equals the underlying word in the exact same spot. And if those are the same, then we'll set tileStatus to correct. So we might need to tweak this. But think about what we're doing here. We're starting with the absent tiles.

So now, why don't we give this block a name here? What are we doing? Well, I do have this comment that says, update the tile colors. So why don't we name a method this dot, hmm, how about refreshTileStatus? Or currentRow? Maybe that's too much. The longer the word. The bigger the signal. refreshCurrentStatus for currentRow. This is how I work.

Refresh current status for current row. This is how I work. Just little pieces at a time, and then you slowly refactor, and you make it a little better and a little better. It's like you're working on 1% improvements over and over. So even if this isn't perfect, I will do that refactor. And then when I think about it a little more, I'll make it 1% better. OK, so let's update that. And then, oh, we are referencing guests here. Um, hmm, let's just do this.currentGuests.

And then, oh, we are referencing guests here. Um, hmm, let's just do this currentGuests. We were caching it before. OK, so let's go over this one more time. When the user presses a key, we fill the tile. And of course, don't forget, when you're entering keys, we don't want to provide any visual feedback because you haven't submitted the guests yet. That should only take place when you submit it. So when you submit a guest, the first thing we do is we refresh the tile status, and then we validate your guests.

So when you submit a guest, the first thing we do is we refresh the tile.status, and then we validate your guests. Now, we refresh the tile.status by iterating over every tile in the current row, and we conditionally set a status. And then for a quick refactor, um, for up here, we could always say tile.status equals does the word include the current letter? If so, absent, or I'm sorry, it would be reverse. Present, otherwise absent. Yeah, and then we do our second pass. All right, so I think we're making pretty decent progress here.