1
00:00:00,980 --> 00:00:07,450
In this lesson, we are going to use conditional statements to check the current time and customize

2
00:00:07,460 --> 00:00:14,780
a dynamic message that's going to be output to the user, we need to set up an element container for

3
00:00:14,780 --> 00:00:20,580
that output using a variable called output using document query selector.

4
00:00:21,230 --> 00:00:26,510
We're going to select the element with the class of output and this is where we're going to output the

5
00:00:26,510 --> 00:00:28,210
contents of our message.

6
00:00:28,550 --> 00:00:34,250
So whenever the button gets clicked, we're going to run and invoke the function called show output

7
00:00:34,520 --> 00:00:36,080
and that we have over here.

8
00:00:36,260 --> 00:00:39,020
And we're going to take that value of the date.

9
00:00:39,440 --> 00:00:43,980
We need to set up another variable in order to contain that value.

10
00:00:44,030 --> 00:00:48,650
We can call it Curre for current taking the date object.

11
00:00:49,220 --> 00:00:53,000
We can get the hours that are available within that date object.

12
00:00:53,210 --> 00:00:57,080
And as we saw, that's going to return back value of seventeen or whatever.

13
00:00:57,080 --> 00:01:05,060
The current time is also setting up a blank message that we can use in order to contain any message

14
00:01:05,060 --> 00:01:05,990
is that we want.

15
00:01:06,830 --> 00:01:11,620
So next thing we want to do is we want to set up and try that out.

16
00:01:12,050 --> 00:01:17,790
So if Curre is greater than 17, then it's going to be evening.

17
00:01:17,930 --> 00:01:26,960
So that means it's after 6:00 p.m. and our message will now say a message and we can say it's we also

18
00:01:26,960 --> 00:01:28,970
need to apply some additional conditions.

19
00:01:29,300 --> 00:01:34,870
We're going to check to see if the current value is greater than 12.

20
00:01:34,880 --> 00:01:40,790
And we know that if it's already greater than 17, then it will run and message will be equal to its

21
00:01:40,790 --> 00:01:44,200
evening and then it will finish off that condition.

22
00:01:44,540 --> 00:01:49,910
But this is if the current value is greater than 12.

23
00:01:50,060 --> 00:01:56,240
So that means it's going to be between 12 and 17 or 18, actually, because that is where the cutoff

24
00:01:56,240 --> 00:01:56,510
is.

25
00:01:56,760 --> 00:02:00,220
And we're going to check to see if it's the afternoon.

26
00:02:00,740 --> 00:02:06,060
And if it is, then the message will say it's after noon.

27
00:02:06,440 --> 00:02:14,540
And then lastly, we'll do one more check to see if the value of Curre is greater than zero.

28
00:02:15,260 --> 00:02:17,750
And if it is, then we know it's morning.

29
00:02:18,230 --> 00:02:22,880
So adding in message and we can say it's morning.

30
00:02:23,210 --> 00:02:29,720
And if we don't pick up any of those values, then what we're doing is we know that something went wrong

31
00:02:29,930 --> 00:02:31,430
and hopefully this doesn't happen.

32
00:02:31,520 --> 00:02:35,030
So we can say something is wrong.

33
00:02:35,350 --> 00:02:42,170
Then lastly, let's take that message and we'll update the interim HTML and we're using HTML because

34
00:02:42,170 --> 00:02:49,490
we're going to use the H1 tags, adding in message variable and then closing off the H1 tags.

35
00:02:50,400 --> 00:02:58,200
So let's try it out, so the current time we saw it's 17, so it currently is evening and you can also

36
00:02:58,200 --> 00:03:03,720
within the console output, whatever the current time is, so that we can double check and make sure

37
00:03:03,720 --> 00:03:05,730
that we are getting the current time.

38
00:03:05,890 --> 00:03:07,550
So we see that it is 18.

39
00:03:07,830 --> 00:03:11,560
So before we finish off, just do a quick overview of the logic here.

40
00:03:11,910 --> 00:03:15,030
So what we're doing is we're getting the date object.

41
00:03:15,510 --> 00:03:21,780
We're getting the hours associated with that date object so we know it's going to be anywhere from zero

42
00:03:21,780 --> 00:03:23,120
to 23.

43
00:03:23,550 --> 00:03:29,130
And then we come into the condition checking to see if it's greater than 17.

44
00:03:29,340 --> 00:03:35,340
So that means that if it's 18, 19, 20, 21, 22, 23, then it's evening.

45
00:03:35,620 --> 00:03:44,250
And if it isn't evening, so if it's not greater than 17, we know that it's less than 17, 17 or less,

46
00:03:44,580 --> 00:03:46,770
and it could potentially be afternoon.

47
00:03:46,920 --> 00:03:49,530
So we check to see if it's greater than 12.

48
00:03:49,770 --> 00:03:58,710
So that means that anything one 1:00 p.m., so such as 13, 14, 15 hundred hours, 16 and 17 hundred

49
00:03:58,740 --> 00:04:00,210
hours is going to be afternoon.

50
00:04:00,570 --> 00:04:04,710
And then also, if it's not afternoon, we know that it's morning.

51
00:04:05,130 --> 00:04:07,950
So we check to see if it's greater than zero.

52
00:04:08,160 --> 00:04:12,960
And if it is, then we know that we've got a time and it's sometime in the morning.

53
00:04:12,960 --> 00:04:18,120
If our criteria isn't met anywhere along the way here we know something's gone wrong and we're going

54
00:04:18,120 --> 00:04:20,130
to put the message of something is wrong.

55
00:04:21,060 --> 00:04:26,190
Try it out for yourself and the next lesson we're going to extend on what we've learned in this lesson

56
00:04:26,430 --> 00:04:28,590
and build out some more functionality.

57
00:04:29,730 --> 00:04:30,960
With the date object.