All right, in this lesson, we will make some final layout adjustments, and then we will push the project up to GitHub and make it available to the world. Let's get started. Okay, so into PHPStorm, let's see. The first thing I want to do is go into our components, and it occurred to me there's no reason to see the legend if we haven't yet typed anything in here. So why don't we do this? So let's say if we have a message, only on that condition should we render the legend. Okay, so now if I come back, we don't see it, but if I begin typing, we do see it.

So let's say if we have a message, only on that condition should we render the legend. Okay, so now if I come back, we don't see it, but if I begin typing, we do see it. Great. Next, we talked about this in the last episode. We should tweak the print button just a little bit. There's no reason to click this button if we haven't yet written a message. All right, so we have a couple options here. Now, we could do the exact same thing if we want. We could wrap this in a conditional that checks for a message, or I could simply disable the button.

We could wrap this in a conditional that checks for a message, or I could simply disable the button. I think that's what I'm going to do here. Now, you may not know this, but Laravel and Blade have a disabled directive. You can call it sort of like a function. So this will effectively set the disabled attribute on the button if whatever you pass here is truthy. So for example, if I set true here and I come back, and it looks like I don't have styling here for disabled buttons, but if we have a look, sure enough, I can't click on it.

and it looks like I don't have styling here for disabled buttons, but if we have a look, sure enough, I can't click on it. Yeah, so notice we are setting the disabled attribute there. So then what I could do, let's hide the sidebar. It's right here. Using Tailwind, I could say, well, if you're disabled, fade it out, set the opacity lower. Maybe in this case, we'll just set the background color to a gray color, something like that. And actually, while we're here, why don't we tweak this button in general?

something like that. And actually, while we're here, why don't we tweak this button in general? I want a little bit more padding. Let's set the text to small, and then maybe the font to semi-bold. Yeah, just something like that. Okay, so yeah, now notice that we're explicitly setting disabled to true, but really, I only want it disabled if we do not have a message. Okay, so now, notice as I start typing, it changes to blue, and that's what we want. So like this, I can't click it, but once I add something, I can click it.

and that's what we want. So like this, I can't click it, but once I add something, I can click it. And that's good. Now, on that note, actually, you may have just noticed a little glitch. If I type something here, and then I press print and cancel, the entire screen clears. And that's because, don't forget, we are within a form. So in this case, the button is functioning as a submit button, even though in this case, that's not quite right. So instead, we could remove the form.

even though in this case, that's not quite right. So instead, we could remove the form. I could use click.prevent. So click on the button and prevent the default action. Or I can make it clear that this isn't a submit button. It's just a standard button, and that would work as well. So now, notice if I type something here, print, cancel, it doesn't submit to the server and reload the corresponding view. Okay, good. Next, in terms of layout, I think it's fine.

Okay, good. Next, in terms of layout, I think it's fine. If I zoom out, this is a little more indicative. The cow jumped over the moon. A little more indicative of what you'll see on your screen. Because remember, I'm recording on a very low resolution. It's like 1280 by 720. So maybe we could make some slight adjustments. Let's go into, and we're going to do this really, really fast. So I don't want to bore you.

Let's go into, and we're going to do this really, really fast. So I don't want to bore you. Here's our layout. Here's our welcome page. Tailwind includes some default styling for containers. But I think I'm just going to be explicit here. Why don't we say maximum width of 1000 pixels? And just temporarily, I'll set a background color of red so we can see the area. Ooh, that's a nice shore.

so we can see the area. Ooh, that's a nice shore. But yeah, now you can see what we are working with there. So now I can get rid of it. Next, what I will do is go into our components. And on the textarea itself, why don't we set width to full? And then also, let's see, because the form is a child of flex container, yeah, I guess I'd have to do width full here as well. All right, once again, let's do a backgroundColor. Yeah, so now it's taking up the full width, which is what I want in this case.

All right, once again, let's do a background color. Yeah, so now it's taking up the full width, which is what I want in this case. OK, so the cow jumped high. We see the bottom here. Yeah, now everything's just a little bit more aligned rather than centering each individual section, which can sometimes be a little bit of an eyesore. We could even do the same thing for the logo itself if you think it might look better. So, for example, if I come back to welcome,

if you think it might look better. So, for example, if I come back to welcome, we could just do justifyStart. But in this case, that should be the default, right? So I can clear it entirely. And now that's what we get. I could lower the width. So why don't we say print is a width of 36. But by default, and again, I'm just picking something random, to be honest, too small, maybe 36 for everything.

But by default, and again, I'm just picking something random, to be honest, too small, maybe 36 for everything. I want a little more than that for the screen. Width 40. Do we have anything like 46? No. 52? 52? Yeah, actually, I think that's pretty good. Here is your secret encoded message.

Yeah, actually, I think that's pretty good. Here is your secret encoded message. And this is what we get. All right, cool. Is there anything else? I don't think so. Remember, this is just for a miniseries. Behind the scenes, I'll make a bunch of little tweaks. I don't want to bore you too much. So why don't we move on to the next section,

I don't want to bore you too much. So why don't we move on to the next section, where we push this up to GitHub. All right, so with that in mind, I will switch back to the terminal. And I will initialize Git. I will commit with a message of first commit. And then if I switch to the browser, you can see I pulled up GitHub.com. I will add a new repository. I'm going to put this under the Laracast namespace.

I will add a new repository. I'm going to put this under the Laracast namespace. And the repository will be CodeBreaker. And we'll make it public. All right, let's create the repository. OK, and now I can copy this, paste it in, and push it up. OK, so if I come back and give this a refresh, here's our project. Cool. All right, so the next step is to set this up as a subdomain.

Cool. All right, so the next step is to set this up as a subdomain. So ideally, I'd like it to be CodeBreaker.laracast.com. All right, let's do that now. So I will switch to forge.laravel.com and sign in to my account. All right, and here's the dashboard for the Laracast server. Let's go ahead and set up a new subdomain. In this case, we want CodeBreaker.laracast.com. Add that site and give it just a minute. OK, let's install from a Git repository.

Add that site and give it just a minute. OK, let's install from a Git repository. And yeah, once again, this is going to be the one we just set up here. So it'll be laracasts/CodeBreaker. I want the main branch. I want to install Composer dependencies. And I think that's fine. All right, cool. That seems to have worked. So now, of course, the next step is to update my DNS.

That seems to have worked. So now, of course, the next step is to update my DNS. And I use Cloudflare for that. So let's do that now. OK, so now I'm in the DNS section or the DNS management section for the Laracast server. And I need to set up an A record. So let's do that now. Add record, A. The name will be CodeBreaker.

Add record, A. The name will be CodeBreaker. And the IP address can be grabbed right here. I'll paste that in. All right, so scroll down, save it. And yeah, you can see some of the other A records that we have set up here, like blog.laracast.com or assets.laracast.com. OK, so this might take a minute, but hopefully it won't take too long. Let's give it a load. Not yet.

Let's give it a load. Not yet. Let's give it another minute. And actually, while we're waiting, another option is to simply ping it from the terminal. For example, I could ping our asset site, assets.laracast.com. And you can see we're getting those results. So if I instead do ping CodeBreaker.laracast.com, yeah, you can see right now, unknown host. It hasn't yet updated or propagated. So yeah, I'm just going to wait a few minutes.

It hasn't yet updated or propagated. So yeah, I'm just going to wait a few minutes. And why don't I hit pause, right? Welcome back. It's been about five or ten minutes since I just hit pause. Cross our fingers. It still doesn't work. OK, let's do it three times for good measure. One, two, three. It's still not working.

One, two, three. It's still not working. So now, of course, we go to Twitter. All right, I've waited five more minutes. This time, let's cross both of our fingers. And if it doesn't work this time, I'm going to update my host file. All right, refresh. There we go. OK, thank God. All right, so that seems to be working pretty well.

OK, thank God. All right, so that seems to be working pretty well. The cow jumped over the moon. We have our message. We have the legend. I can print it out. Hallelujah. OK, thank you so much, everybody, for coming along. I hope you enjoyed it. It's something a little different from what we typically do, which is fun.

I hope you enjoyed it. It's something a little different from what we typically do, which is fun. And don't forget, this URL is live. You can do it with your kids if you want. And the source code is live on GitHub. So you can contribute to this. And there's plenty of things we can do. Obviously, there's only so much work we can put into a short mini-series that's maybe an hour or an hour and a half long. So, yeah, if you want to clean this up, add a new feature,

maybe an hour or an hour and a half long. So, yeah, if you want to clean this up, add a new feature, make certain sections a little more dynamic, I think that would be great. You can submit a PR directly here. And then, yeah, if it gets approved, it'll be reflected here for all of the 12 people who want to make use of this.