1
00:00:07,620 --> 00:00:15,470
Hey, everyone, in this video, I'm going to solve this watch challenge, actually, I think I should

2
00:00:15,470 --> 00:00:19,670
have called it the clock challenge, but anyway, you get the point.

3
00:00:20,030 --> 00:00:26,930
So we need to put it to work using JavaScript, and that should be pretty easy with the date object

4
00:00:27,110 --> 00:00:29,830
and the set interval method.

5
00:00:30,080 --> 00:00:36,420
So let's go to Visual Studio code, and the first thing we need to do is get the current time.

6
00:00:36,530 --> 00:00:41,620
So we need the current number of hours, minutes and seconds.

7
00:00:41,960 --> 00:00:44,110
So let's create three variables.

8
00:00:44,120 --> 00:00:46,820
So one for the hours.

9
00:00:48,600 --> 00:00:55,170
Or before we do this, we can create one for the current time so we don't have to create this object

10
00:00:55,170 --> 00:01:04,590
three times, so let's create one for the current time, which is just going to get the current date

11
00:01:04,590 --> 00:01:05,100
in time.

12
00:01:05,370 --> 00:01:08,610
So new date without any argument.

13
00:01:08,940 --> 00:01:19,560
So now for the hours, we just need to get the current time and use the get our method so open and close

14
00:01:19,560 --> 00:01:20,400
parentheses.

15
00:01:20,640 --> 00:01:26,220
And we know that this is going to return something from zero to twenty three, which is exactly what

16
00:01:26,220 --> 00:01:26,980
we want.

17
00:01:27,420 --> 00:01:31,620
So now we're just going to repeat this four minutes and seconds.

18
00:01:34,640 --> 00:01:35,450
So minute.

19
00:01:40,530 --> 00:01:45,450
And second, so for the minutes is just get.

20
00:01:47,660 --> 00:01:50,630
Minutes and for the seconds get.

21
00:01:52,410 --> 00:01:53,370
Seconds.

22
00:01:54,740 --> 00:02:02,690
OK, so now that we have this information, all we need to do is just send it to our HTML elements.

23
00:02:02,720 --> 00:02:06,950
So going back to the page, let's select the clock.

24
00:02:07,870 --> 00:02:14,620
So as you can see, we have the idea of hours, minutes and seconds, so going back to our script,

25
00:02:15,190 --> 00:02:20,070
let's just copy this so we don't have to type it again.

26
00:02:23,140 --> 00:02:24,640
So for the hours.

27
00:02:29,000 --> 00:02:35,210
The Internet age HTML is going to be what we have in the hours variable.

28
00:02:38,040 --> 00:02:46,050
And now let's do the same thing for minutes and seconds, so minutes and.

29
00:02:47,490 --> 00:02:48,540
Seconds.

30
00:02:49,910 --> 00:02:58,130
Let's not forget to change it here as well, so here minutes and here seconds, so let's see what happens

31
00:02:58,130 --> 00:02:59,090
when we do this.

32
00:02:59,390 --> 00:03:00,620
I'm going to save this.

33
00:03:01,370 --> 00:03:02,870
Refresh the page.

34
00:03:03,830 --> 00:03:12,380
Let's go down there, as you can see, we were able to start this clock, it's not working yet because

35
00:03:12,380 --> 00:03:14,900
now we just need to keep repeating this.

36
00:03:15,290 --> 00:03:17,480
But this was the first step.

37
00:03:17,720 --> 00:03:24,980
We just got the current hours, minutes and seconds and just sent them to this age HTML element.

38
00:03:25,100 --> 00:03:27,890
And now we just need to keep updating our time.

39
00:03:28,170 --> 00:03:31,620
So how often is a clock updated?

40
00:03:31,640 --> 00:03:39,380
Well, a clock is updated every second because the smallest unit we have here are the second, so we

41
00:03:39,380 --> 00:03:41,780
just need to update it every second.

42
00:03:42,080 --> 00:03:47,750
So now let's just go back to Visual Studio Code and this is going to be pretty easy because the only

43
00:03:47,750 --> 00:03:55,970
thing we need to do is just putting all this code inside a set interval so we can even copy all this.

44
00:03:55,970 --> 00:04:00,250
Or if you want to practice, which I think it's better, just write it again.

45
00:04:00,380 --> 00:04:05,540
So this time we don't plan to stop our clock, so we don't need to create a variable.

46
00:04:05,540 --> 00:04:09,110
So we just need to do a window that set interval.

47
00:04:09,470 --> 00:04:12,260
So again, inside here, two arguments.

48
00:04:12,500 --> 00:04:14,200
First one is the function.

49
00:04:14,720 --> 00:04:16,400
Second one is the time.

50
00:04:16,430 --> 00:04:20,440
This time we just want one second of interval.

51
00:04:20,470 --> 00:04:22,550
So a thousand milliseconds.

52
00:04:22,640 --> 00:04:26,240
And inside here we are just going to place all this code.

53
00:04:26,900 --> 00:04:32,960
You can press control X to cut and then control V to base it inside here or.

54
00:04:34,230 --> 00:04:41,220
Something easier, just select the whole block of code and press out and then arrow up or arrow down,

55
00:04:41,430 --> 00:04:47,460
if you do this, you are able to put a block of code inside other elements like this.

56
00:04:47,470 --> 00:04:49,530
So I just wanted to show you this.

57
00:04:50,310 --> 00:04:50,910
All right.

58
00:04:50,910 --> 00:04:53,150
So let's see if this is working.

59
00:04:53,160 --> 00:04:55,370
Now, let's refresh the page.

60
00:04:55,380 --> 00:04:56,280
I hope it is.

61
00:04:59,010 --> 00:05:06,510
OK, we can see that this clock is now working well, but we have one problem, we are not seeing this

62
00:05:06,510 --> 00:05:07,500
problem yet.

63
00:05:08,100 --> 00:05:12,540
But I'm going to show you that we are going to have one problem with this clock.

64
00:05:12,870 --> 00:05:15,050
So I'm just going to stop this video now.

65
00:05:15,210 --> 00:05:20,640
And when this turns to zero, actually, while I'm talking, it's almost there.

66
00:05:20,650 --> 00:05:22,170
So I'm not going to stop the video.

67
00:05:22,530 --> 00:05:27,710
Let's just wait for this to turn to zero zero and let's see what happens.

68
00:05:31,070 --> 00:05:38,440
Well, something a bit odd, because clocks do not show numbers like this without the leading zero,

69
00:05:38,630 --> 00:05:41,770
so we need to do something to format these numbers.

70
00:05:42,320 --> 00:05:47,420
So when they are less than 10, we include eight leading zero.

71
00:05:47,450 --> 00:05:49,350
This is pretty simple to do.

72
00:05:49,700 --> 00:05:53,240
We're going to have to do it with hours, minutes and seconds.

73
00:05:53,420 --> 00:05:56,340
So we might as well create a function to do this.

74
00:05:56,930 --> 00:05:58,490
So going back to the code.

75
00:05:59,910 --> 00:06:04,210
So this seems to be a little perfectionist, but actually it isn't.

76
00:06:04,470 --> 00:06:07,160
It's really odd to have a clock like that.

77
00:06:07,170 --> 00:06:10,290
I haven't seen a clock that shows numbers like that.

78
00:06:10,290 --> 00:06:14,240
So this is something that as developers, we should fix it.

79
00:06:14,250 --> 00:06:17,100
Don't think it's OK like this because it's not.

80
00:06:17,100 --> 00:06:18,260
So let's fix it.

81
00:06:18,270 --> 00:06:20,600
This is going to be pretty easy to do.

82
00:06:20,790 --> 00:06:28,020
So we just need to create a function in the name of the function is going to be Fermat time, or you

83
00:06:28,020 --> 00:06:31,500
can choose another name like add leading zero.

84
00:06:31,500 --> 00:06:33,890
I think add leading zero is even better.

85
00:06:33,900 --> 00:06:36,480
So add leading zeros.

86
00:06:36,480 --> 00:06:40,230
So like I said, I like using underscore for function names.

87
00:06:40,650 --> 00:06:45,300
If you want you can just use lower case like you've been doing.

88
00:06:45,510 --> 00:06:47,430
So this is our function.

89
00:06:48,380 --> 00:06:55,940
And this time we are going to need one argument, which is the number we want to format, so the argument

90
00:06:55,940 --> 00:06:57,390
is going to be the number.

91
00:06:57,620 --> 00:07:04,970
So what we need to do is just testing if this number is less than 10, if it is, we can add a leading

92
00:07:04,970 --> 00:07:05,460
zero.

93
00:07:05,660 --> 00:07:06,560
So if.

94
00:07:08,150 --> 00:07:08,780
No.

95
00:07:11,010 --> 00:07:12,600
It's less than 10.

96
00:07:16,810 --> 00:07:25,270
We are just going to return a zero and then we are going to concatenate with the number we have, but

97
00:07:25,270 --> 00:07:28,720
we need to be careful because we are working with numbers here.

98
00:07:28,930 --> 00:07:32,290
So we should convert it to string.

99
00:07:32,290 --> 00:07:36,580
So no dot to string.

100
00:07:41,160 --> 00:07:48,720
Alse, which means the number is 10 or higher, so in this case, we don't have to do anything so we

101
00:07:48,720 --> 00:07:50,130
can just return.

102
00:07:51,150 --> 00:07:53,190
The number converted into string.

103
00:07:54,120 --> 00:07:56,580
Why are we converting into string here?

104
00:07:56,610 --> 00:08:02,550
Well, because then it's going to be even better to send it to Asia HTML elements, we know that all

105
00:08:02,850 --> 00:08:05,110
HTML elements, they have strings inside.

106
00:08:05,130 --> 00:08:06,910
So this is going to be even better.

107
00:08:07,320 --> 00:08:14,610
So what our function is going to do is converting our number into a string and also adding a leading

108
00:08:14,610 --> 00:08:17,070
zero if we need it.

109
00:08:17,340 --> 00:08:17,810
All right.

110
00:08:17,820 --> 00:08:26,040
So now that we've done this, instead of just sending the variables, we are going to pass these numbers

111
00:08:26,490 --> 00:08:28,380
inside our function first.

112
00:08:29,410 --> 00:08:31,480
So instead of adding the hours.

113
00:08:40,460 --> 00:08:45,570
We are just going to use our function to add the leading zero if it's necessary.

114
00:08:45,590 --> 00:08:50,600
So let's say we have 11 hours, it is just going to go inside.

115
00:08:50,960 --> 00:08:52,960
It's not less than 10.

116
00:08:53,120 --> 00:08:58,350
So it's just going to return the same number that entered, but convert it into a string.

117
00:08:58,610 --> 00:09:06,890
But if we have one, then it is just going to return zero one, which is going to be exactly what we

118
00:09:06,890 --> 00:09:07,170
need.

119
00:09:07,790 --> 00:09:09,050
So let's save this.

120
00:09:09,980 --> 00:09:11,470
Let's go back to our page.

121
00:09:11,480 --> 00:09:13,180
Let's see if we are lucky.

122
00:09:13,670 --> 00:09:14,170
Yeah.

123
00:09:14,180 --> 00:09:14,990
Fifty eight.

124
00:09:14,990 --> 00:09:18,790
Fifty nine and then zero zero, which is beautiful.

125
00:09:19,130 --> 00:09:22,610
Let's wait until it gets to 10 to see what happens.

126
00:09:24,820 --> 00:09:26,720
Nine, now it's ten.

127
00:09:26,740 --> 00:09:28,300
It's not adding anything.

128
00:09:28,330 --> 00:09:34,410
So now this is working perfectly and the same thing is going to be applied for the hours and minutes.

129
00:09:34,870 --> 00:09:36,100
So that was it.

130
00:09:36,130 --> 00:09:44,770
As you can see, it's pretty easy to do a clock in JavaScript by using the date object in the set interval

131
00:09:44,770 --> 00:09:45,230
method.

132
00:09:45,730 --> 00:09:49,290
So I hope you like this exercise and I'll see you in the next video.