1
00:00:08,730 --> 00:00:10,010
Hi, everybody.

2
00:00:10,010 --> 00:00:14,340
In today's code review,
we're gonna talk about making a calendar.

3
00:00:14,340 --> 00:00:17,850
Because what I really like about calendars
is that there are all these little,

4
00:00:17,850 --> 00:00:22,470
tiny things you need to think about to
really make your page look professional.

5
00:00:22,470 --> 00:00:26,590
So what I have right here on the screen
is a very, very plain calendar,

6
00:00:26,590 --> 00:00:29,760
where you can see,
I have all the days in the month.

7
00:00:29,760 --> 00:00:32,310
I also have, on some days,
little appointments.

8
00:00:32,310 --> 00:00:36,100
So I'm gonna have lunch with mom, or
meet with the dean, or be library helper.

9
00:00:36,100 --> 00:00:39,580
And, on the 31st, it's Halloween, so boo!

10
00:00:39,580 --> 00:00:42,270
What can we do to take this information,

11
00:00:42,270 --> 00:00:47,310
this content from our HTML5, and turn it
into something that's really pleasing?

12
00:00:47,310 --> 00:00:49,560
Well let's take a look at
what I've done with it.

13
00:00:51,330 --> 00:00:54,800
Here, I've used CSS to create a calendar

14
00:00:54,800 --> 00:00:57,670
that has a lot of different
things going on it.

15
00:00:57,670 --> 00:01:00,200
First, I've gone ahead and
I've styled it nicely.

16
00:01:00,200 --> 00:01:04,850
I've included things like border radius,
highlighted out these days right here.

17
00:01:04,850 --> 00:01:07,810
I realize it's really hard to see in
the screen right now, but I actually have

18
00:01:07,810 --> 00:01:11,080
a background image for those days to
make it look a little bit different.

19
00:01:11,080 --> 00:01:15,030
The other thing I've added is that on
days that have these little asterisks,

20
00:01:15,030 --> 00:01:19,100
if I click on them,
the actual appointment shows up.

21
00:01:19,100 --> 00:01:22,870
So as you can see, I'm gonna be dealing
with a lot of different CSS elements.

22
00:01:22,870 --> 00:01:25,830
And I'm gonna slowly go through the code

23
00:01:25,830 --> 00:01:28,510
just to give you an idea
of what's going on.

24
00:01:28,510 --> 00:01:32,020
Now it would be impossible for you to
follow along with me with this code and

25
00:01:32,020 --> 00:01:33,830
know exactly what I'm doing.

26
00:01:33,830 --> 00:01:37,950
Instead, I'm giving it to you as
a resource to kind of pick through and

27
00:01:37,950 --> 00:01:40,680
understand the different
parts as you need to and

28
00:01:40,680 --> 00:01:42,880
as you want to incorporate
them into your page.

29
00:01:44,680 --> 00:01:46,300
So let's take a look at the CSS.

30
00:01:47,370 --> 00:01:50,340
You can see this is a very,
very busy page.

31
00:01:50,340 --> 00:01:51,560
So just kind of sit back and

32
00:01:51,560 --> 00:01:55,340
you can hear me talk about the different
things instead of trying to read the code.

33
00:01:55,340 --> 00:02:00,020
I've gone in and I wanted to make my
calendar with a very nice border radius so

34
00:02:00,020 --> 00:02:01,990
I'd have something around the top.

35
00:02:01,990 --> 00:02:05,980
The thing is,
the table itself is really only this part.

36
00:02:05,980 --> 00:02:07,740
It's not the caption.

37
00:02:07,740 --> 00:02:09,210
So what I've done is I've gone in and

38
00:02:09,210 --> 00:02:14,540
I said, don't worry about the top
two corners, here and here.

39
00:02:14,540 --> 00:02:18,540
Only curve the bottom two corners,
all right.

40
00:02:18,540 --> 00:02:22,760
How do I get this cool idea of alternating
between a kind of light gray and

41
00:02:22,760 --> 00:02:24,750
this color and going back and forth?

42
00:02:24,750 --> 00:02:29,190
Well with this, you can go ahead and
use some of the different pseudo elements.

43
00:02:29,190 --> 00:02:31,050
So in this case I've gone in.

44
00:02:31,050 --> 00:02:31,870
And it's not me.

45
00:02:31,870 --> 00:02:36,120
It's the browser saying, hey, I'm gonna
look at all the different table rows.

46
00:02:36,120 --> 00:02:40,000
And any time I see a child that's odd,
I'm gonna make it one color,

47
00:02:40,000 --> 00:02:44,180
any time I see a child that's even,
I'm gonna make it another color.

48
00:02:44,180 --> 00:02:47,970
This is so much nicer than you
having to go into your table and

49
00:02:47,970 --> 00:02:52,040
putting class equals even,
class equals odd, class equals even,

50
00:02:52,040 --> 00:02:57,240
especially if later you decide to add more
information and it throws off your rows.

51
00:02:57,240 --> 00:03:00,410
This is something really powerful that
you should try to take advantage of.

52
00:03:01,500 --> 00:03:05,210
What about when you try to make
your page look really professional,

53
00:03:05,210 --> 00:03:07,010
the elements that overlap?

54
00:03:07,010 --> 00:03:11,992
So right here, I'm actually looking
at a table, and a table row, and

55
00:03:11,992 --> 00:03:13,950
a table element.

56
00:03:13,950 --> 00:03:17,380
I had to go through and think about each
one of these and think about things like,

57
00:03:17,380 --> 00:03:22,765
hm, well in my very last table row,
the very last table element,

58
00:03:22,765 --> 00:03:26,720
that's got a different
curve than the first child.

59
00:03:26,720 --> 00:03:30,080
So go ahead, download this code and
take a look at that and play with it.

60
00:03:30,080 --> 00:03:31,651
What happens if you comment it out?

61
00:03:31,651 --> 00:03:32,680
What's gonna go on?

62
00:03:32,680 --> 00:03:37,530
All right, I have fairly simple code for
the caption, I went ahead and

63
00:03:37,530 --> 00:03:40,180
just added some border radius and colors.

64
00:03:40,180 --> 00:03:46,720
What I really wanna show you is this whole
idea of when you want to hide things.

65
00:03:46,720 --> 00:03:47,970
Let's go back to the HTML.

66
00:03:49,060 --> 00:03:53,200
I have put all of my
elements Inside a span tag.

67
00:03:53,200 --> 00:03:55,400
So here, I've got span library helper.

68
00:03:56,410 --> 00:03:58,820
I'm hoping that you are thinking
right now and going,

69
00:03:58,820 --> 00:04:02,040
why don't these show up when
I first look at the calendar?

70
00:04:02,040 --> 00:04:03,930
Why isn't it there?

71
00:04:03,930 --> 00:04:08,920
Well, the reason would be because by
default, I'm going to go ahead and

72
00:04:08,920 --> 00:04:11,410
hide all of the different appointments.

73
00:04:11,410 --> 00:04:15,750
I'm gonna go ahead and
say, visibility hidden.

74
00:04:15,750 --> 00:04:19,330
Now this is different than display none.

75
00:04:19,330 --> 00:04:24,130
If I had display none, this whole square
would just be gone, it wouldn't be there.

76
00:04:24,130 --> 00:04:27,920
Visibility hidden says,
I wanna leave all that space, but

77
00:04:27,920 --> 00:04:30,330
I don't wanna show what's in there.

78
00:04:30,330 --> 00:04:34,680
It's a very little nuanced thing, and this
is exactly why I made this example, so

79
00:04:34,680 --> 00:04:36,330
you could see the difference.

80
00:04:36,330 --> 00:04:38,910
All right, so now it's hidden.

81
00:04:38,910 --> 00:04:42,750
But as soon as I make it active, and
active means as soon as you're clicking on

82
00:04:42,750 --> 00:04:46,880
it, I change the visibility
from hidden to visible.

83
00:04:46,880 --> 00:04:47,560
So let's click on it.

84
00:04:50,570 --> 00:04:52,555
And you can see that
lunch with mom show up.

85
00:04:52,555 --> 00:04:56,980
Library helper, and
also here, on Halloween,

86
00:04:56,980 --> 00:04:58,980
I've got a little message there.

87
00:04:58,980 --> 00:05:00,930
So there was a lot going on with this CSS.

88
00:05:00,930 --> 00:05:03,320
And I don't want to go
down every line of it, and

89
00:05:03,320 --> 00:05:05,080
you don't want me to do that either.

90
00:05:05,080 --> 00:05:06,520
It'd be very boring.

91
00:05:06,520 --> 00:05:09,652
So I'm hoping though, that I've shown
you some of the ways that these

92
00:05:09,652 --> 00:05:14,680
pseudo-classes, pseudo-elements,
the different states, are all go together

93
00:05:14,680 --> 00:05:19,900
to create a page that can look so much
better than just plain HTML by itself.

94
00:05:19,900 --> 00:05:23,200
So I'm hoping you'll use this code and
create something great for yourself.

95
00:05:23,200 --> 00:05:23,700
Good luck.