Okay, welcome back. Let's dive right in. So here's what we currently have, but the layout needs a little bit of work. Here is our secret message or code. And there's some scrolling here, and even if I were on a wider screen, on a higher resolution, notice how this isn't really what you want. Ideally, I want the legend to be locked to the bottom of the page. So why don't we see if we can solve this? What I think is, first, I will go to my layout, and on the body, I'm going to set a display of grid, and then I will place the items to the center.

and on the body, I'm going to set a display of grid, and then I will place the items to the center. And then I'll set height of full, and then I will also do that on the HTML. So this is often kind of a, I wouldn't say hack, but kind of a trick to have a perfectly centered container. So, for example, if I then go into welcome, and I set the section to have a background color of red, yeah, notice how it is perfectly centered on the page, which, of course, as you know, is traditionally weirdly difficult to do with CSS. But luckily, not so much anymore.

which, of course, as you know, is traditionally weirdly difficult to do with CSS. But luckily, not so much anymore. Okay, cool. Next, on the section, I could set height of full, and that will stretch it out. Next, let's see, we have a container, but you know what, I bet I can merge these in this case. So if I did that, yeah, that's fine. Next, we have the header, and then the component itself. We could even put the header in the component if we wanted to.

Next, we have the header, and then the component itself. We could even put the header in the component if we wanted to. Let's see. Let's give this a background color of blue. All right, and yeah, a quick little note, I will often reach for these bright background colors temporarily, mind you, just to get a general idea of what I'm working with. In this case, it's crystal clear that this blue container is not stretching or expanding for the full height of the container, even though I want it to.

or expanding for the full height of the container, even though I want it to. All right, let's see how we can fix this. Let's go into welcome, and yeah, maybe here, could I set a display of flex, and then flex-col? Yep, and then what I can do is on the component itself, I can stretch using flex-1 to fill the available space. All right, so now notice it extends for the full height of that container. Cool. All right, next, what I think I'm going to do is,

Cool. All right, next, what I think I'm going to do is, let's try this, on the legend, can I set a margin-top of auto to push it down? Oh, good. I was worried that wasn't going to work. Yeah, that's what we want in this case. Because we have a display of flex, if I set margin-top of auto, that's going to automatically apply as much margin-top as possible. So effectively, it pushes it down to the bottom of the container.

that's going to automatically apply as much margin top as possible. So effectively, it pushes it down to the bottom of the container. Okay, so if I come back, let's go into welcome. I can now get rid of the background colors. So I'll get rid of that one, as well as the blue, and take a look. Yeah, here is the code. Okay, next, I want to work on this section right here. So we're going to go into code, and yeah, immediately, I want to set a larger text size. So what if we did something like for Excel?

and yeah, immediately, I want to set a larger text size. So what if we did something like for Excel? And let me paste that in. Oh, that's not picking up that font size. So something must be overriding it. Let's see what. Oh, so I didn't know this. That material symbols outline class is applying a font size itself. So notice how my text for Excel is being overwritten in this case. And that's not cool.

So notice how my text for Excel is being overwritten in this case. And that's not cool. So how should I do this? Why don't we just, don't beat me up, but let's just add a bang there to force it to take precedence. There we go. Okay, next, if you think about it, when we print this out like so, there's a bunch of things we have to do, right? For example, I, of course, don't want this black background color. It should just be white.

For example, I, of course, don't want this black background color. It should just be white. We shouldn't see the text area at all. And then also for the code or the cipher or the cipher text itself, I think it might be useful to have little boxes underneath just to provide an indication to the kid that here's where you put the corresponding letter. So here for the earth, below it, I'm imagining a little light gray box where you would ultimately write H. For the star, once again, you'd have a little box below it.

where you would ultimately write H. For the star, once again, you'd have a little box below it where you would ultimately write E. So to allow for that, I think I need to tweak this a little bit. I think I'm going to have to wrap each letter within its own div. Give me a minute just to figure this out. What do we want to do here? So we have a container for the symbol and then another container for the box that they fill in. So again, let's set a background color of gray, something pretty light, 200.

for the box that they fill in. So again, let's set a background color of gray, something pretty light, 200. And then what if I set a width of, I don't know, like 12 and a height of 12, something like that. Let's see what we get here. Okay. Fill this in. Of course, we need to fix the alignment to be left to right, of course. But yeah, now we have a little gray box where the kid can use a pencil or a pen or a marker to fill in the corresponding letter.

But yeah, now we have a little gray box where the kid can use a pencil or a pen or a marker to fill in the corresponding letter. Okay. So how can we fix this? Let's go, hmm. So now every single letter is its own div, and a div is a block level element. So it sounds like on the word itself, we need to flex all the things. Or maybe inline-flex. Is that what we want? Let's just try flex for now.

Is that what we want? Let's just try flex for now. Come back, paste that in. Yeah. Okay. But now, of course, we need some separation between these. So why don't we give gap-x? So on the horizontal axis of like 2. Just something small to add a little bit of space between each of them. Okay.

Just something small to add a little bit of space between each of them. Okay. Next, do we already have perfect alignment? It looks like it. Everything's centered the way we would want it. Okay, great. But next, what if we have something extra long? Here is the extra, extra long code. Yeah, this is what I was worried about. So notice how if we have a super long sentence,

Yeah, this is what I was worried about. So notice how if we have a super long sentence, it never wraps onto the next line. It will just keep expanding, and we don't want that. So let's do this. Let's copy this, come back, and then on the wrapper of all the words, let's declare that it's okay to wrap onto the next line. So now if I paste it, yeah, that's a little bit better. Okay. So next, how about some print styling?

Okay. So next, how about some print styling? If I press command P, of course, right now we see the text area, and we give away the whole ballgame. So luckily, Tailwind makes this really easy. If I come back to our components, here's the form, and I can add a class, of course, of hidden, and that will hide it entirely. But if we just want to hide it for print styling, I can do print: and then apply the display hidden class.

But if we just want to hide it for print styling, I can do print colon and then apply the display: hidden class. Okay. So now notice if I hit command P, we will not see the text area, and that's pretty cool. Okay. Next, again, we're going to run out of ink really quickly if we keep this black background. So let's go into our layout. Yeah, right here.

So let's go into our layout. Yeah, right here. Notice this is where we set that dark background color as well as the white text. So why don't we just reset it for print? When you print, set the background color to white, and when you print, set the text to black. Okay. Paste this in. Command P.

Paste this in. Command P. There we go. A little better, but now I can't see the symbols anymore. And then further, the logo assumed that we had a dark background color. So we either need to swap out the logo or I might just cheat. Let's start with that, actually. Let's go into create code. And, yeah, sometimes if you don't have a designer around or you don't have the ability to tweak an image in these settings,

And, yeah, sometimes if you don't have a designer around or you don't have the ability to tweak an image in these settings, what you can do is – actually, it's not here. Where is it? Welcome. It's right here. What you can do is just add a filter. So I could say class equals invert, and this will invert the text. Now, sometimes I will warn you it's not going to look good,

and this will invert the text. Now, sometimes I will warn you it's not going to look good, but maybe, yeah, maybe for print it's okay. So check this out. If I do print invert, now we see this, but when I command P, we tweak it. And if we're printing as black and white, it's probably fine. It's a quick shortcut you can make, at least for now. Okay, so next I want to make sure that these characters are displaying properly.

Okay, so next I want to make sure that these characters are displaying properly. I must be setting text-white explicitly somewhere. So let's go into our code, and, yep. You know what? I think we can just inherit the default color. The boy can jump high, command P, and, yeah, I think we're starting to get there. Pretty fun. Okay, next for the legend itself,

Pretty fun. Okay, next for the legend itself, it looks like I can't see the borders at all, and I think I know why. Let's go in here, and, yeah. So we are setting a border of white, but, of course, if the background color is white, we're not going to see anything at all. So why don't we say for print, set the border color to black. All right.

So why don't we say for print, set the border color to black. All right. Yeah, that works, but maybe we should lower it, maybe something a little less extreme, like border 400. All right, one more time, command P, and, yeah, I think that's starting to look pretty good. All right, next, just a couple more things, and then we'll call it a day. I think this should stretch for the full width of the page, and then the logo is too overpowering in this case.

I think this should stretch for the full width of the page, and then the logo is too overpowering in this case. It should be smaller and maybe in the top left. So let's see how we can fix that. Let's go into welcome, and, hmm. Yeah, here's our logo, and we justify it to the center, but maybe for print, we justify it to the start. All right, print, yeah. Next, I want to tweak the size. So, hmm, maybe we could set width of 24, too small, 32, 36.

Next, I want to tweak the size. So, hmm, maybe we could set width of 24, too small, 32, 36. Yeah, and then apply that for print only. Command P, and, yeah, that looks good. So if we paste in our message, we're slowly getting there, I think. Next, hmm, on the code itself, can I set a marginTop to auto to push it down? So notice a lot of this, you're just sort of figuring out on the fly. Yeah, and that seems to work. So notice before, when we printed it, the coded message or the cipher was hugging the logo too much,

So notice before, when we printed it, the coded message or the cipher was hugging the logo too much, and I wanted it more evenly dispersed or separated. So if I add, once again, if I use that margin-top: auto trick, I apply as much spacing above as possible, and now we get something like this. So finally, I didn't mention this, but we do need a little print button below the text area just to give the parent or whoever's using this a little feedback that, hey, the point of this is to print it out for your kids. All right, let's go into the form,

hey, the point of this is to print it out for your kids. All right, let's go into the form, and then maybe right down here at the bottom, we could add a little button that says print. Yeah, let's set some background colors. So how about background blue, a little padding, make it rounded. Yeah, here, a little spacing above, flex justify-end to push it to the right side, and then I could add a quick event listener like this. Well, this is an Alpine component, so I could say,

and then I could add a quick event listener like this. Well, this is an Alpine component, so I could say, when you click on me, window.print. Yeah, so we're not doing anything that you couldn't do manually with command P, but again, it just provides a little bit of visual feedback, and it also gives us a way to intercept the print. So for example, if you haven't filled anything out here, when I click on this, we should probably provide some feedback. Hey, you haven't created a message yet, so we're going to abort, but we're not going to tackle that in this lesson.

Hey, you haven't created a message yet, so we're going to abort, but we're not going to tackle that in this lesson. So print, and you know what? While we're here, why don't I just print this and show you? All right, there it goes. Let me grab it. All right, so here is what we currently have. Kind of cool, isn't it? And you know, I get it. This is not the most sophisticated thing ever, and we still need to do a little bit of work on it,

This is not the most sophisticated thing ever, and we still need to do a little bit of work on it, but I do think it's cool that whenever you have an idea, no matter how small it is, because we're programmers, we can just build it, and that really is a superpower. All right, let's keep going in the next episode.