Hi, everybody. In today's code review, we're gonna talk about making a calendar. Because what I really like about calendars is that there are all these little, tiny things you need to think about to really make your page look professional. So what I have right here on the screen is a very, very plain calendar, where you can see, I have all the days in the month. I also have, on some days, little appointments. So I'm gonna have lunch with mom, or meet with the dean, or be library helper. And, on the 31st, it's Halloween, so boo! What can we do to take this information, this content from our HTML5, and turn it into something that's really pleasing? Well let's take a look at what I've done with it. Here, I've used CSS to create a calendar that has a lot of different things going on it. First, I've gone ahead and I've styled it nicely. I've included things like border radius, highlighted out these days right here. I realize it's really hard to see in the screen right now, but I actually have a background image for those days to make it look a little bit different. The other thing I've added is that on days that have these little asterisks, if I click on them, the actual appointment shows up. So as you can see, I'm gonna be dealing with a lot of different CSS elements. And I'm gonna slowly go through the code just to give you an idea of what's going on. Now it would be impossible for you to follow along with me with this code and know exactly what I'm doing. Instead, I'm giving it to you as a resource to kind of pick through and understand the different parts as you need to and as you want to incorporate them into your page. So let's take a look at the CSS. You can see this is a very, very busy page. So just kind of sit back and you can hear me talk about the different things instead of trying to read the code. I've gone in and I wanted to make my calendar with a very nice border radius so I'd have something around the top. The thing is, the table itself is really only this part. It's not the caption. So what I've done is I've gone in and I said, don't worry about the top two corners, here and here. Only curve the bottom two corners, all right. How do I get this cool idea of alternating between a kind of light gray and this color and going back and forth? Well with this, you can go ahead and use some of the different pseudo elements. So in this case I've gone in. And it's not me. It's the browser saying, hey, I'm gonna look at all the different table rows. And any time I see a child that's odd, I'm gonna make it one color, any time I see a child that's even, I'm gonna make it another color. This is so much nicer than you having to go into your table and putting class equals even, class equals odd, class equals even, especially if later you decide to add more information and it throws off your rows. This is something really powerful that you should try to take advantage of. What about when you try to make your page look really professional, the elements that overlap? So right here, I'm actually looking at a table, and a table row, and a table element. I had to go through and think about each one of these and think about things like, hm, well in my very last table row, the very last table element, that's got a different curve than the first child. So go ahead, download this code and take a look at that and play with it. What happens if you comment it out? What's gonna go on? All right, I have fairly simple code for the caption, I went ahead and just added some border radius and colors. What I really wanna show you is this whole idea of when you want to hide things. Let's go back to the HTML. I have put all of my elements Inside a span tag. So here, I've got span library helper. I'm hoping that you are thinking right now and going, why don't these show up when I first look at the calendar? Why isn't it there? Well, the reason would be because by default, I'm going to go ahead and hide all of the different appointments. I'm gonna go ahead and say, visibility hidden. Now this is different than display none. If I had display none, this whole square would just be gone, it wouldn't be there. Visibility hidden says, I wanna leave all that space, but I don't wanna show what's in there. It's a very little nuanced thing, and this is exactly why I made this example, so you could see the difference. All right, so now it's hidden. But as soon as I make it active, and active means as soon as you're clicking on it, I change the visibility from hidden to visible. So let's click on it. And you can see that lunch with mom show up. Library helper, and also here, on Halloween, I've got a little message there. So there was a lot going on with this CSS. And I don't want to go down every line of it, and you don't want me to do that either. It'd be very boring. So I'm hoping though, that I've shown you some of the ways that these pseudo-classes, pseudo-elements, the different states, are all go together to create a page that can look so much better than just plain HTML by itself. So I'm hoping you'll use this code and create something great for yourself. Good luck.
