1
00:00:09,190 --> 00:00:16,060
Hi, everybody, in this video, we are going to solve the stop watch exercise, so we have these buttons

2
00:00:16,060 --> 00:00:20,410
here, one for start and stopping to watch one for resetting it.

3
00:00:20,620 --> 00:00:25,150
And the format needs to be in hours, minutes, seconds and merely seconds.

4
00:00:25,660 --> 00:00:31,020
This shouldn't be very hard to do, but we are going to do this in two steps.

5
00:00:31,030 --> 00:00:37,390
So first, we are just going to make this work and this is only going to be in milliseconds.

6
00:00:37,390 --> 00:00:42,580
We know we have native JavaScript methods to work with milliseconds.

7
00:00:42,580 --> 00:00:48,670
So when we make sure that everything here is working, then the next step will be just formatting the

8
00:00:48,670 --> 00:00:49,090
time.

9
00:00:50,080 --> 00:00:53,200
So before we get started, let me go to the council.

10
00:00:54,150 --> 00:01:02,640
Let's inspect these elements so we get their IDs, so we have the stopwatch, we bring this to Visual

11
00:01:02,640 --> 00:01:03,450
Studio called.

12
00:01:07,180 --> 00:01:11,530
Then we have the start stop button.

13
00:01:14,030 --> 00:01:19,580
And we have the reset button, and these are the three elements that we.

14
00:01:21,090 --> 00:01:22,500
I'm going to work with.

15
00:01:23,190 --> 00:01:30,600
All right, so the first thing that we need to do is setting the unclick event to the start stop button.

16
00:01:30,610 --> 00:01:36,660
That's the very first thing we are going to do is making this stopwatch start working.

17
00:01:36,660 --> 00:01:37,950
So document.

18
00:01:40,640 --> 00:01:45,980
Not get element by ID, then the ID is start, stop.

19
00:01:52,310 --> 00:01:54,490
I would, said the unclick function.

20
00:02:04,030 --> 00:02:11,050
All right, so when it starts, we need to get the time and we need to start a set interval so we can

21
00:02:11,050 --> 00:02:19,570
keep increasing this time, but since we have just one button for starting and stopping our stopwatch,

22
00:02:19,900 --> 00:02:24,420
we need to know if it's running or it's not running.

23
00:02:24,730 --> 00:02:31,570
So before we enter in this event, this time, let's do things a bit differently because we are going

24
00:02:31,570 --> 00:02:33,490
to have multiple events here.

25
00:02:33,760 --> 00:02:36,580
So it's better to create the variables up here.

26
00:02:36,580 --> 00:02:39,360
So they are accessible inside these functions.

27
00:02:39,670 --> 00:02:43,870
So the first variable that we are going to need is one called is.

28
00:02:44,930 --> 00:02:47,600
Ronnie, you can call it whatever you want.

29
00:02:47,900 --> 00:02:53,150
I'm just going to call it is running because when we load the page, the clock is not running.

30
00:02:53,150 --> 00:02:56,330
So this is going to start as false.

31
00:02:57,080 --> 00:03:04,300
And we are going to use this variable to control if our button needs to stop or start the clock.

32
00:03:04,670 --> 00:03:09,380
So right when we get here, let's start with an if statement.

33
00:03:11,280 --> 00:03:12,210
So if.

34
00:03:13,380 --> 00:03:15,450
Our clock is running.

35
00:03:18,880 --> 00:03:23,050
Then we are going to do something in this case, we are going to stop it.

36
00:03:24,170 --> 00:03:25,070
Otherwise.

37
00:03:27,830 --> 00:03:35,960
Then we can just start it, we can do like this or I prefer to do the opposite because actually we are

38
00:03:36,350 --> 00:03:39,680
first starting the clock and then stopping it.

39
00:03:40,070 --> 00:03:45,180
So I'm just going to use an exclamation mark here just to do the opposite.

40
00:03:45,500 --> 00:03:53,810
So this just means that if it's not running to other ways of doing this would be like if is running.

41
00:03:56,330 --> 00:04:00,110
Not equal to true or if is running.

42
00:04:02,240 --> 00:04:03,500
Equals false.

43
00:04:04,650 --> 00:04:05,010
Right.

44
00:04:05,040 --> 00:04:10,620
So we have a few ways of doing this, but using the exclamation mark, it's just easier.

45
00:04:12,600 --> 00:04:16,590
So in this case, the clock is not running, so we are going to start it.

46
00:04:16,800 --> 00:04:22,620
So let's include a comment here that says start the clock.

47
00:04:29,310 --> 00:04:31,800
Inside here, we need to stop it.

48
00:04:35,380 --> 00:04:43,300
So the first thing that we need to do when we get inside here is just changing the state of this variable.

49
00:04:45,760 --> 00:04:51,040
So if the clock is not running and we click the button, we are going to start it.

50
00:04:51,160 --> 00:04:54,990
So the first thing we need to do is setting it to true.

51
00:04:55,990 --> 00:04:58,270
So now it's going to start running.

52
00:05:00,500 --> 00:05:07,820
Otherwise, before we stop it, we are just going to set it to false, so we are doing things here step

53
00:05:08,030 --> 00:05:08,840
by step.

54
00:05:09,080 --> 00:05:09,470
All right.

55
00:05:09,470 --> 00:05:12,270
So now what do we need to do to start the clock?

56
00:05:12,290 --> 00:05:14,450
How do we track time?

57
00:05:14,720 --> 00:05:17,910
The first thing we need to do is get the current time.

58
00:05:17,940 --> 00:05:21,910
So when is this clock starting for this?

59
00:05:22,250 --> 00:05:29,690
We're just going to use the get time method because with it we are going to have the number of milliseconds

60
00:05:29,690 --> 00:05:30,830
since the APOC.

61
00:05:31,040 --> 00:05:34,400
So this is going to be pretty easy to work with milliseconds.

62
00:05:34,790 --> 00:05:39,620
So let's create a variable called start time.

63
00:05:43,040 --> 00:05:49,430
So here, like I said, we are going to have to use variables in multiple places here, so I prefer

64
00:05:49,550 --> 00:05:56,360
to actually declare them up here so we make sure they are global and they are going to be accessible

65
00:05:56,360 --> 00:05:57,890
from anywhere in the code.

66
00:05:58,160 --> 00:06:00,110
So there are two ways of doing this.

67
00:06:00,350 --> 00:06:06,710
If you want, you can just use semicolon and then in another line you can start a variable.

68
00:06:06,720 --> 00:06:10,180
So start time just like this.

69
00:06:10,970 --> 00:06:16,070
We don't have to assign any value to it when we are declaring this variable.

70
00:06:16,220 --> 00:06:19,980
And here we can just use it like this without the FA keyword.

71
00:06:20,240 --> 00:06:26,690
This is one way of doing it, but actually you can declare multiple variables at the same time just

72
00:06:26,690 --> 00:06:28,060
by using comma.

73
00:06:28,520 --> 00:06:33,200
So we are starting this var and declaring the first variable.

74
00:06:33,380 --> 00:06:38,240
If we want to declare another one, we can just use comma just like this.

75
00:06:41,950 --> 00:06:48,370
So now we don't have to type the VA key word multiple times, and if you want to make it more organized,

76
00:06:48,580 --> 00:06:50,430
you can break the lines like this.

77
00:06:50,710 --> 00:06:55,400
So this way we are just declaring multiple variables at the same time.

78
00:06:55,600 --> 00:07:00,030
This is important because we're going to have a few more that we're going to have to put it here.

79
00:07:00,670 --> 00:07:02,230
So this is good.

80
00:07:05,180 --> 00:07:09,960
So now the start time is going to be a date object.

81
00:07:10,010 --> 00:07:11,570
We are going to start now.

82
00:07:13,770 --> 00:07:15,900
Don't get time.

83
00:07:18,660 --> 00:07:19,370
Pretty good.

84
00:07:19,410 --> 00:07:26,340
Now we know that we are going to have something in milliseconds and this is what we are going to start

85
00:07:26,340 --> 00:07:27,020
working with.

86
00:07:27,300 --> 00:07:31,500
So now the only thing we need to do is keep updating the time.

87
00:07:32,580 --> 00:07:36,460
So we can compare the current time with the start time.

88
00:07:36,480 --> 00:07:40,040
So for this, we're going to need to start a set interval.

89
00:07:40,050 --> 00:07:44,900
So before getting the initial time, let's start a set interval.

90
00:07:44,940 --> 00:07:47,670
So window that set.

91
00:07:48,630 --> 00:07:49,380
Intervale.

92
00:07:52,450 --> 00:07:55,660
So, again, inside here, there's a function.

93
00:07:56,720 --> 00:07:59,220
And here, the time is going to vary.

94
00:07:59,270 --> 00:08:06,350
I would put one millisecond so we can update our clock every one millisecond, but I don't think we

95
00:08:06,350 --> 00:08:09,170
need to be that precise.

96
00:08:09,350 --> 00:08:15,020
I think updating it every ten or one hundred milliseconds is going to work just fine.

97
00:08:15,200 --> 00:08:19,300
And this is going to be lighter for our browser to execute.

98
00:08:19,310 --> 00:08:20,630
So let's just use.

99
00:08:21,920 --> 00:08:28,820
Maybe a hundred milliseconds, this is going to be we won't even notice that it's taken this time.

100
00:08:29,800 --> 00:08:35,170
But if we do, then we can come here and try to use 10 or something like this.

101
00:08:35,200 --> 00:08:42,500
So with this interval at every 100 milliseconds, we are going to do something.

102
00:08:42,520 --> 00:08:44,330
And what are we going to do?

103
00:08:44,350 --> 00:08:49,040
So let's go inside this function at every iteration of this interval.

104
00:08:49,660 --> 00:08:52,180
We are going to get the current time.

105
00:08:53,500 --> 00:08:59,290
So current time, this is going to be another global variable, so let's declare it up there.

106
00:09:00,890 --> 00:09:01,520
Right here.

107
00:09:02,530 --> 00:09:04,600
Cuma multivariable.

108
00:09:07,720 --> 00:09:15,850
So then the current time is just going to get an updated time and now we just need to calculate how

109
00:09:15,850 --> 00:09:21,290
much time has passed from start time to current time.

110
00:09:21,310 --> 00:09:23,670
So for this, we need another variable.

111
00:09:23,680 --> 00:09:24,700
So let's call it.

112
00:09:26,810 --> 00:09:28,340
Elapsed time.

113
00:09:31,110 --> 00:09:33,900
It's just going to be the current time.

114
00:09:36,470 --> 00:09:37,340
Minus.

115
00:09:38,940 --> 00:09:40,740
The start time.

116
00:09:43,200 --> 00:09:45,750
Let's also declare this variable up there.

117
00:09:47,160 --> 00:09:53,760
I'm sorry, this is the first time we are doing this, but this is important because these variables

118
00:09:53,760 --> 00:09:55,950
are going to be used inside their functions.

119
00:09:56,310 --> 00:09:56,760
All right.

120
00:09:56,760 --> 00:09:59,030
So now what do we have to do?

121
00:09:59,460 --> 00:10:06,720
We just need to get the elapsed time and send it to our clock element, which is this one.

122
00:10:07,560 --> 00:10:10,560
So let's just copy this structure here.

123
00:10:15,610 --> 00:10:18,820
The idea of this element is stopwatch.

124
00:10:23,760 --> 00:10:25,470
Let's set its inner.

125
00:10:26,850 --> 00:10:27,960
Age TML.

126
00:10:31,820 --> 00:10:34,130
The elapsed time.

127
00:10:35,970 --> 00:10:43,620
All right, so by doing this, we can already put our clock to work, so it is going to start when we

128
00:10:43,620 --> 00:10:44,940
click the start button.

129
00:10:44,950 --> 00:10:46,070
So let's check it out.

130
00:10:46,080 --> 00:10:47,280
I'm going to save this.

131
00:10:49,660 --> 00:10:51,440
Let me refresh the page.

132
00:10:52,270 --> 00:10:57,970
We have nothing here, I'm just going to click start and now we can see that the magic is happening.

133
00:10:58,390 --> 00:11:02,680
So this is updating every 100 milliseconds.

134
00:11:02,860 --> 00:11:05,600
So maybe it seems a bit too slow.

135
00:11:05,620 --> 00:11:09,900
So let's just stop this and let's try to use 10.

136
00:11:09,910 --> 00:11:13,660
So, like I said, you can you can even use one if you want.

137
00:11:13,660 --> 00:11:19,420
But I think one is going to be too heavy for the browser to do something every millisecond, if you

138
00:11:19,420 --> 00:11:20,170
think about it.

139
00:11:20,590 --> 00:11:21,670
So let's use 10.

140
00:11:21,670 --> 00:11:23,410
And I think this is going to be all right.

141
00:11:24,570 --> 00:11:25,980
Let's go back there again.

142
00:11:27,830 --> 00:11:33,460
Let me start it again, so now as you can see, this is much better, this is what we need.

143
00:11:33,890 --> 00:11:36,860
So right now we have it working in milliseconds.

144
00:11:36,860 --> 00:11:44,630
So now we just need to do two things which are stopping it and resetting it.

145
00:11:44,840 --> 00:11:51,710
And there's also one extra challenge, because if we just stop it and don't reset it when we start again,

146
00:11:51,830 --> 00:11:54,190
it just start from where we stopped.

147
00:11:54,560 --> 00:12:00,410
So we are going to need one more video to finish this functionality and then we can start formatting

148
00:12:00,410 --> 00:12:00,950
the time.

149
00:12:01,140 --> 00:12:03,620
So I'll see you in the next video so we can continue.