So now that we know how to hard-code a grid, let's next figure out how we can dynamically generate it. And I'm going to show you two ways. First, we'll do it with vanilla JavaScript, and then we'll reach for Alpine.js. So let's do this. I'm going to... let's hide the head. Here is the structure that we need to generate, and I will comment that out for now. Next, we'll go into our app.js file, and let's grab our grid. So document.querySelector. And yeah, think about what we would need to do. We need to know the number of guesses and the length of the word they're guessing. So let's imagine you get three guesses, and the length of the word is also three. Then we need a three-by-three grid. To do that, we would need to generate three rows, where each row contains three columns. And then finally, we need to append that block of HTML to the grid. All right, let's do it. I'm going to begin by

we would need to generate three rows, where each row contains three columns. And then finally, we need to append that block of HTML to the grid. All right, let's do it. I'm going to begin by using document.createDocumentFragment. Think of this as a way to build up a DOM structure outside of the current web page. So you can build up the structure how you need to, and only then, when it's ready, do you insert it into the DOM. So we'll say let fragment here, and then we need three rows. So let's do this. We could do a for statement, but I like to use the new Array.from. This gives us an easy way to quickly generate an array with a certain number of items. In this case, we want three rows, so I'll set an array of three items. Then I can say forEach item, create a row. So document.createElement, a div. We need to give it a class of row, and then we're going to add that to our fragment. So fragment.appendChild. So notice we're

for each item, create a row. So document.createElement, a div. We need to give it a class of row, and then we're going to add that to our fragment. So fragment.appendRow. So notice we're just sort of building up a DOM structure on the fly here. Then I could say our grid element append the fragment. All right, let's have a look. Come back, refresh, and I don't see anything. grid is null. Oh, you know what? I probably... let's see. Yep, we're running the script before we have loaded this. Let's set the for. Okay, one more time, and that goes away. Okay, so now if we take a look, sure enough, we've programmatically inserted three rows into the DOM. Okay, now the only remaining step is each of those rows needs to include three cells. So let's do this. Array.from length of three. For each, this will be our tile. And this is basically the same thing, but this time we're building up the tile. So create a tile div, and then we're going to append

length of three. For each, this will be our tile. And this is basically the same thing, but this time we're building up the tile. So create a tile div, and then we're going to append that to the row. Yeah, come back, refresh, and there we go. But now we are programmatically generating our grid. And yeah, that would be one way to do it. We could even do things like this at the top. We could say let numberOfGuesses, or how about guessesAllowed, will be 3. let wordLength is 3. And then we could substitute these. So guessesAllowed, and then a wordLength. Okay, come back, refresh, and that still works. Let's see, I don't need those. And maybe we can wrap this in a function called generateGrid. Like this, get rid of all that, and reformat. And this is what we get. Okay, so now we have a function called generateGrid that will dynamically set up our grid. Okay, so now

Like this, get rid of all that, and reformat. And this is what we get. Okay, so now we have a function called generateGrid that will dynamically set up our grid. Okay, so now when the application inits, we can say generateGrid, and we can control all of this. So let's say we're on expert mode. You get two guesses for a six-letter word. Come back, refresh. Oh, that's not right. Let's see. Yeah, that's right. So the markup is correct. It must be the C. Oh, you know what it is. It's because on the game, I hard-coded the number of columns, of course. So we can't do that. We either have to set that programmatically, or maybe we can use display: flex. Yeah, and if we do that to both of the rows. Okay, let's try that out. app.css. And we'll say on the game, we'll hold off on that for now. But for each row, I will set a display: flex. Okay, come back, give it a refresh, and this is what I want.