1
00:00:01,020 --> 00:00:04,890
This lesson, we're going to make things a little bit more interesting, that we're going to add in

2
00:00:04,890 --> 00:00:08,460
some color, some additional styling into that element.

3
00:00:09,460 --> 00:00:11,170
So selecting that output.

4
00:00:12,940 --> 00:00:20,470
Whatever element has a class of output, we're going to update the width to 200 pics, update the height.

5
00:00:21,810 --> 00:00:29,160
And we also said that to 200 picks and we'll do a default color of white in it, so text will be white

6
00:00:29,160 --> 00:00:37,290
and text a line and update that text to a line to center going into our JavaScript, what we're going

7
00:00:37,290 --> 00:00:41,940
to do is we're going to update that element style property.

8
00:00:42,330 --> 00:00:49,110
So when we refresh, we can see we've got message here and we don't get anything being output in that

9
00:00:49,110 --> 00:00:49,560
message.

10
00:00:49,560 --> 00:00:50,710
We see it's evening.

11
00:00:50,730 --> 00:00:54,390
We don't see it because it's all going white.

12
00:00:54,670 --> 00:00:58,610
I'm actually going to make the height a little bit smaller so it fits better on our page.

13
00:00:58,770 --> 00:01:00,030
I do have it zoomed in.

14
00:01:00,150 --> 00:01:02,820
So that's why we've got a really large.

15
00:01:03,900 --> 00:01:09,570
Area there, so we've got the content still being output, but we're not able to see it, and that's

16
00:01:09,570 --> 00:01:11,520
because we need to set the background color.

17
00:01:11,830 --> 00:01:18,060
So let's do that with JavaScript, where we've got that element within an object called output.

18
00:01:18,600 --> 00:01:25,830
We can apply the style property to it and then within style, we've got an option for background color.

19
00:01:26,470 --> 00:01:28,400
So this can be a hex value.

20
00:01:28,410 --> 00:01:30,590
It can also be a named color value.

21
00:01:30,930 --> 00:01:32,580
So we'll set it as black.

22
00:01:32,880 --> 00:01:37,050
We can click it and we can see that it's evening so it goes black.

23
00:01:37,560 --> 00:01:41,250
We can also trip it up to be of different values.

24
00:01:41,550 --> 00:01:47,880
So I'm going to add in and I'm going to update the current value to be 13 so that now when I click message,

25
00:01:48,120 --> 00:01:50,040
it should say it's afternoon.

26
00:01:50,280 --> 00:01:55,200
And that case we need to update and add in a color for the afternoon.

27
00:01:55,320 --> 00:02:03,200
How about we make it blue for afternoon refresh and we see that afternoon is now blue.

28
00:02:03,660 --> 00:02:08,640
So what I want you to do now, pause the video and add in some more colors.

29
00:02:08,850 --> 00:02:16,980
So add in orange for the morning and if something goes wrong, then make it red and you can update your

30
00:02:17,160 --> 00:02:23,280
current time value with this variable here because we're already setting it and all we're doing is overwriting

31
00:02:23,280 --> 00:02:24,960
the current value of the new date.

32
00:02:25,170 --> 00:02:31,380
And once you've finished debugging and testing your application, you can comment this out or you can

33
00:02:31,380 --> 00:02:32,610
simply just remove it.

34
00:02:32,880 --> 00:02:35,760
So go ahead and make it orange and make it red.

35
00:02:35,880 --> 00:02:37,740
I'll show you the solution as well.

36
00:02:38,400 --> 00:02:45,090
So the solution to make it orange, you can use the named colors so we can simply just use the same

37
00:02:45,090 --> 00:02:46,770
format as we used earlier.

38
00:02:46,980 --> 00:02:51,570
And then if something goes wrong here, then we can set it to red.

39
00:02:52,080 --> 00:02:53,730
So let's try that out.

40
00:02:53,730 --> 00:02:59,730
So if it's four a.m. in the morning and we click the message, we see it's morning.

41
00:03:00,210 --> 00:03:07,590
If we get something like E, we can click it and we see something went wrong.

42
00:03:07,860 --> 00:03:10,020
So go ahead and try this out for yourself.

43
00:03:10,350 --> 00:03:16,680
Update the style property of the element and notice we've already made our selection within the object.

44
00:03:16,860 --> 00:03:21,090
So that gives us a quick and easy way to update that content.

45
00:03:21,420 --> 00:03:27,930
And coming up, because this is a JavaScript course, we're going to update all of these properties

46
00:03:27,930 --> 00:03:33,330
within the element, all of these style properties, and we're going to get rid of the CSFs.

47
00:03:33,330 --> 00:03:35,040
So that's still to come in the upcoming lesson.

48
00:03:35,250 --> 00:03:36,900
So go ahead and try this out for yourself.