All right, welcome back. Let's write some code. So, of course, behind the scenes, I have cleared out that example increment Livewire code. Of course, we don't need that. All right, so let's do this. Let's open up the sidebar and come down to our welcome.blade.php file. And why don't we, to start, create a container for everything. So I'll put that within here. And then maybe we'll have a header section where we have our code breaker text. All right, let's have a look in the browser.

where we have our code breaker text. All right, let's have a look in the browser. Yeah, and that's what we get. Notice, though, well, let's select all of this. We have a container, and by default, Tailwind will apply some responsive maximum widths. So if I set a background color of red, you can see what's going on here. Okay, so a couple of things. Why don't we... What I will often do is I will have a section wrapper

Why don't we... What I will often do is I will have a section wrapper and then within it a container. So this section will extend to the edges of the browser window, but it might have a little bit of padding. So we might do something like this, padding: 6;, and then the container will be centered. Okay, so now if I come back and give it a refresh, you can see what we're working on there. Yeah, if you want, even in your body,

you can see what we're working on there. Yeah, if you want, even in your body, you could add some basic padding all around to the body tag or some initial padding top to bring it away from the screen. Again, whatever is appropriate. For now, we'll just add it there, though. Cool. All right, so we have our header. We have our H1. But now, of course, we want the logo that we installed in the last episode.

We have our H1. But now, of course, we want the logo that we installed in the last episode. So I'm going to be honest with you. I'm not even sure these days what the rules are for adding an image in place of your text logo. In the past, we had all of these funky things where you would add the image, but then you would indent the text so that it went off the screen, but it wasn't invisible. All of this weird stuff.

but it wasn't invisible. All of this weird stuff. I'm not sure if people still do that anymore, but it was considered a good practice at the time. For now, I'm just going to do this. I think that's okay. Do we also need to... Let me know in the comments. Do we also need to do an area label? I think that might be okay, but I'm not sure.

Do we also need to do an area label? I think that might be okay, but I'm not sure. Anyways, if I come back and refresh, that looks good. But of course, now I can't see the text. You can see it right there because we have white text on a white background. So let's do this. Let's go back to Zeppelin, and I believe Adrian has some coloring here. Yeah, this is what I want.

and I believe Adrian has some coloring here. Yeah, this is what I want. So why don't we grab... It's a radial gradient, but why don't we just grab this darker color as you see here? So I will grab that, and let's do this. I'm going to open up my tailwind.config.js file in the root of the project, and why don't we add a custom color? Honestly, most of the time I stick with things like this,

and why don't we add a custom color? Honestly, most of the time I stick with things like this, but if we want to be nice and proper, we could call it primary, and I will paste that in. Okay, so I still have the Tailwind server running behind the scenes and Vite. So we will instantly have new primary utility classes available to us. So that means if I come back to our welcome view... Actually, you know what?

So that means if I come back to our welcome view... Actually, you know what? We should probably put it within the layout file. I can now instantly say backgroundPrimary, and that should work. Cool, looks good to me. So yeah, again, if we have a look at our layouts, just to see the borders here, I do want... How do I want to do this? Do we want to set a display of flex on the header?

How do I want to do this? Do we want to set a display of flex on the header? We could set margin to auto on the image itself. Why don't we just start with this? Let's set a display of flex and justify everything to the center, and that should make it look like it's right in the middle of the page. Okay, so we have our CodeBreaker logo right below it. I'm imagining some kind of nicely presented text area. You type your code, and that will instantly reveal

I'm imagining some kind of nicely presented text area. You type your code, and that will instantly reveal the code below, and you can then print it. Again, a very basic project, but these things are fun to work on. All right, so let's see. That's going to go into our custom component. And yeah, I guess we have a form, and then within here, we will have our text area. Let's see what that looks like.

and then within here, we will have our text area. Let's see what that looks like. Yeah, not very pretty, but that's okay. Again, I'm going to do our little flex justify-center trick, but I'm imagining we will probably change that at some point. Yeah, maybe a little margin-top to bring it away from the header. All right, and then you type in here, and yeah, it sounds like we need to track what you are typing.

All right, and then you type in here, and yeah, it sounds like we need to track what you are typing within there and then display it below. Okay, next though, maybe let's set a background color. You know, of course, we don't want that harsh white background color. So instead, should we set it to, I don't know, bg-white-10? Yeah, so I'm setting it to, of course, white. But if we add slash, I can then use a percentage,

Yeah, so I'm setting it to, of course, white. But if we add /, I can then use a percentage, and that, of course, is setting the opacity for the background color. So I will often reach for things like that all of the time, as you see here. Right down here, yeah, notice white background color, but the alpha is set to 10%. Cool. Next, the text should be white.

Cool. Next, the text should be white. Cool, maybe a little padding all around it. I don't know, padding three? Maybe on the Y, top and bottom, we want two, but on the left and right, the X axis, we have three. All right, next, why don't we make it rounded? And yeah, I think that looks fine. All right, so we type in here.

And yeah, I think that looks fine. All right, so we type in here. And yeah, again, this is for kids. So you'll type things like the cow jumped over the moon, and that then gets converted into various symbols. Okay, so why don't we do this? We need to track what you type into the text area. So we could do something like wire:model, and this could be, what do we want to call this? Is it the message that you're trying to code break?

and this could be, what do we want to call this? Is it the message that you're trying to code break? Yeah, I think that's a good name. All right, let's go into the corresponding component, and we will track a string called message. Cool, so yeah, check this out. What we could do is right below it, we could echo out the corresponding message as you type into it. But as it is right now, I don't think this will work.

as you type into it. But as it is right now, I don't think this will work. So if I start typing, I don't see anything. And that's because, well, I would need to do wire:model.live if I want instant results. Now, if I type into it, notice, oh, I'm sorry, I'm not displaying it properly because of Flexbox that I said we'd have to change at some point. But yeah, sure enough, you can see as I type in here, it's making a request back to the server,

But yeah, sure enough, you can see as I type in here, it's making a request back to the server, that property is being updated, and then the template is being re-rendered while passing in the updated data, of course. So the cow, and I'm just showing you how we can do these things, jumped over the moon, and then all we would have to do is translate each of these letters into a corresponding symbol.

is translate each of these letters into a corresponding symbol. So yeah, what I'm imagining is maybe we can find a custom font where every single letter is mapped to some kind of simple, like, you know, like a sun or a star. But here's something we should be careful of. We can't always map, for example, the letter T to a star.

We can't always map, for example, the letter T to a star because then, of course, the kids are going to get smart and they will remember after they do their fourth or fifth code break that T is always a star. So we can't just do a one-to-one mapping between the letter and the font, right? So there will need to be some kind of shuffling to make it random.

So there will need to be some kind of shuffling to make it random. And yeah, you know what? I think we're going to take a look at that in the next episode. I'll see you then.