come along for a couple episodes, and we'll see if we can make this work. All right, the first step is I'm going to build the keyboard. So I would imagine it's going to go down here, and we'll give it an id of keyboard. And yeah, do we want to import some kind of virtual keyboard through NPM, or do we want to manually build this up? In this case, I think it actually might be easier if we manually created it. And if you look down at your keyboard right now, you'll see for only the letters, there are three rows. So we would probably have a div with a class of row, and then we would have individual keys within it, right? So this would be your A key, then S, then D. But of course, I don't want to manually do this. So once again, why don't we think in terms of a source of truth for the keyboard? So if we took that approach, we would once again have a template where we would say something like X for row, and maybe we'll call it

think in terms of a source of truth for the keyboard? So if we took that approach, we would once again have a template where we would say something like x for row, and maybe we'll call it letters. So we'll have some kind of array, let's reformat, of letters. And this would be an array of, I guess, three items where each item in the array represents a single row on your keyboard. And then you can imagine within that row, we would have another template where we would say for each key in that row, then I want you to render a button, probably better to be a button. And this would be the key. So let's add that on. Yeah, I mean, that's sort of what we're doing here. Okay, let's go to my game, at least to start. And I guess we could put it right here. We're now going to have an array of letters, where again, each item in this array represents a single row. So if we have a look one more time at the actual Wordle website, let's give this a refresh. Yeah, notice

have an array of letters, where again, each item in this array represents a single row. So if we have a look one more time at the actual Wordle website, let's give this a refresh. Yeah, notice the letters here map perfectly to the letters on your keyboard. The only unique thing is they added a enter and backspace key to the final row. So we'll need to do that. So I'll say Q, W, E, R, but this is way too time consuming. So instead, let's do the thing where I swipe across the top row, and then I can say split that into an array. Kind of the lazy way to do it. All right, now let's do the next row. Swipe across those keys and split them into an array. And then finally, the third row, got those, and split that into an array. And don't worry, we'll add the enter and backspace key in just a few moments. Okay, so now think about it. We have an array of arrays where each item represents a single row of your keyboard. Then in my welcome page, we loop over those letters,

in just a few moments. Okay, so now think about it. We have an array of arrays where each item represents a single row of your keyboard. Then in my welcome page, we loop over those letters, and for each row, we do another loop where we render each key. Okay, let's come back and give this a refresh. And yeah, even that isn't horrid with the default button styling, but I think we can do a little bit better. But before we get there, yeah, let's add the enter and the backspace key to the bottom row. So let's switch back, return to our game, and how do we want to do this? Let's remember, I can't do this because each letter there would be split. So this is going to need to be an array. And then I will unpack this array here. Yeah, and then I can add enter at the beginning, and backspace at the end. And yeah, of course, those could be icons later. Give it a refresh, and there we go. Cool. All right, let's keep going. Back to my view. Let's be explicit

at the beginning, and backspace at the end. And yeah, of course, those could be icons later. Give it a refresh, and there we go. Cool. All right, let's keep going. Back to my view. Let's be explicit that this is a type of button. I think potentially it might default to submit in some cases, so let's be extra clear. This is a plain old button. And yeah, in terms of responding to the button, I'll show you two ways. We could add an event listener directly to the button, or we could use event propagation and listen for it a little higher up the chain. So for example, we could say, when you click on one of these buttons, I could say, alert("you clicked"). And then we could tack on the event.target. So event.target will always be the thing that triggered the event. So in this case, the target is the button itself. And let's just grab the textContent of the button. And the textContent is the key. So if we do this right, when I click on any key, it should say, "you clicked",

might want to do is to click stopPropagation, because we don't want any further event propagation. So we don't want it to continue bubbling up the chain. Okay, so good, but we still have a couple issues. If you think about it, we're assuming here that the target of the event will always be the button. But what if you click outside of the button in one of the rows? Well, then let's give this a shot, like I'm going to click right around here. Now, I get that the text content of that full row there. And that's not what I want here. So it sounds like if we're going to take this approach where we bubble up, I need to first confirm that you clicked on a button. And if you didn't click on a button, then we won't respond. So I'll show you a cool way to do that is through the matches method. I could say if the target of the event matches a button, so if it's a button and not, say, a div or a heading, only on that condition, and I'll use and here, so if this is true, the