It's incredibly easy to use, and it has reactivity out of the box. So for example, later we will extract an actual object so we can work in our app.js file. But if we wanted to do this inline, we could do the same thing. I could say guessesAllowed is 4, and wordLength is 3. And then if we want to create a loop, I can add a x-for attribute to any template tag. So I could say for row n, and then I'll do the exact same thing as we had in the last episode, where we set the length to guessesAllowed.

and then I'll do the exact same thing as we had in the last episode, where we set the length to guessesAllowed. If we have four guessesAllowed, then I need four rows in our grid. Okay, then I'll generate a div with a class of row. It's that easy. So if I come back and give this a refresh, we should now see our game, and there's your four rows. Okay, let's now do the same thing for the tiles in each row. And in fact, I'll just copy this. For this time, tile n, and we'll set an array with a length of the wordLength.

And in fact, I'll just copy this. For this time, tile n, and we'll set an array with a length of wordLength. Then create a div with a class of tile. Okay, cross your fingers, but I bet we have our grid, and we do. So yeah, this would be the reactive AlpineJS way, or if you're using Vue, it's effectively the same thing. But that would be an alternative way we could go about this. And again, the bonus is, I don't have to deal with manually using vanilla JavaScript to construct the DOM. So that's the method I'm going to stick with,

manually using vanilla JavaScript to construct the DOM. So that's the method I'm going to stick with, which means I can get rid of this entirely. Okay, in the next episode, let's now figure out how I can listen for a key press, and then programmatically re-render this grid to reflect that key.