1
00:00:09,290 --> 00:00:13,640
Hi, everyone, let's continue with our stopwatch exercise.

2
00:00:13,670 --> 00:00:17,630
So in the previous video, we already made it start.

3
00:00:18,280 --> 00:00:23,000
Let me just refresh the browser so it doesn't keep running now.

4
00:00:23,000 --> 00:00:25,840
We just need to make it stop and reset.

5
00:00:26,660 --> 00:00:30,480
And there's also an extra challenge which is restarting.

6
00:00:30,560 --> 00:00:33,080
But let's do things step by step.

7
00:00:33,290 --> 00:00:35,590
So first, let's just make it stop.

8
00:00:35,900 --> 00:00:41,120
So let's go back to the code and let's remember that we have this if statement.

9
00:00:42,370 --> 00:00:48,910
So if it's not running, then we are just starting the clock and now if it is running, then we need

10
00:00:48,910 --> 00:00:49,990
to stop the clock.

11
00:00:50,000 --> 00:00:52,690
So here it would just set the variable to false.

12
00:00:53,050 --> 00:00:57,000
And we need to stop this interval.

13
00:00:57,010 --> 00:01:00,540
How do we stop a set interval method?

14
00:01:00,550 --> 00:01:02,250
Well, we need to give it a name.

15
00:01:02,260 --> 00:01:04,300
We need to assign it to a variable.

16
00:01:04,510 --> 00:01:10,150
So let's call it something like clock interval or something like this.

17
00:01:10,300 --> 00:01:13,540
And again, let's declare this variable up there.

18
00:01:18,200 --> 00:01:20,900
So we can use throughout our code.

19
00:01:23,070 --> 00:01:28,350
This is because of a subject we already talked about, which is variable scope.

20
00:01:29,920 --> 00:01:35,710
So now we have this interview with a name, so now when we get inside here.

21
00:01:37,200 --> 00:01:45,150
Even before setting this variable to false, we can just stop it right away so we can just do window,

22
00:01:45,510 --> 00:01:46,680
not clear.

23
00:01:48,030 --> 00:01:50,730
Interval and inside here.

24
00:01:54,510 --> 00:01:59,780
We just need to pass the name of the interval, which in this case is clock interval.

25
00:02:00,090 --> 00:02:01,380
So let's put it here.

26
00:02:02,130 --> 00:02:03,690
Let's see if this is working.

27
00:02:04,350 --> 00:02:09,240
So saving this, going back to our page, refreshing it.

28
00:02:10,830 --> 00:02:11,790
Starting at.

29
00:02:12,730 --> 00:02:16,180
Stopping, it seems that it's not working.

30
00:02:16,210 --> 00:02:17,800
Let's go to the council.

31
00:02:18,040 --> 00:02:23,770
I think this is probably because of the quotation marks, because here we just need to pass a variable,

32
00:02:23,980 --> 00:02:25,000
not a string.

33
00:02:25,180 --> 00:02:26,200
Let's try again.

34
00:02:27,540 --> 00:02:32,370
Refreshing the page, starting it, stopping it.

35
00:02:32,520 --> 00:02:39,150
So now this is working fine before we work on restarting it, let's just do the reset, because this

36
00:02:39,150 --> 00:02:40,950
is really simple to do.

37
00:02:43,070 --> 00:02:46,190
So let's create another event for the reset.

38
00:02:47,280 --> 00:02:47,880
But then.

39
00:02:54,250 --> 00:02:57,400
So the idea of this element is reset.

40
00:03:05,540 --> 00:03:09,930
So this should be pretty simple to do every time we click the reset button.

41
00:03:09,950 --> 00:03:13,670
All we need to do is restarting the clock.

42
00:03:13,700 --> 00:03:15,260
So how do we do this?

43
00:03:15,470 --> 00:03:18,680
Well, we can just get the start time again.

44
00:03:18,990 --> 00:03:22,000
Let's remember that this is not part of the interview.

45
00:03:22,010 --> 00:03:23,930
So we only said it once.

46
00:03:24,320 --> 00:03:26,210
But if we reset it.

47
00:03:27,280 --> 00:03:32,800
We just want to set this again, so doing this, let's save this.

48
00:03:33,750 --> 00:03:39,690
Let's refresh the page and see if we can make it reset, so I'm going to start at.

49
00:03:41,310 --> 00:03:47,940
Let's leave it here for a while now, I'm going to reset, and as you can see, we were able to reset

50
00:03:47,940 --> 00:03:48,150
it.

51
00:03:48,270 --> 00:03:49,590
I'm going to try again.

52
00:03:51,570 --> 00:03:58,860
And again, pretty cool, but now just one problem, if I stop it and then reset, I don't see it going

53
00:03:58,860 --> 00:03:59,490
to zero.

54
00:03:59,520 --> 00:04:03,240
So we need to do this so every time we reset it.

55
00:04:04,720 --> 00:04:09,430
If it's running, we don't have to do anything, but if it's not running.

56
00:04:10,660 --> 00:04:11,950
So in this case.

57
00:04:21,090 --> 00:04:23,490
Then we can just send zero.

58
00:04:25,620 --> 00:04:33,570
To our element, so instead of the elapsed time in case it is running, we just have to leave it working

59
00:04:33,570 --> 00:04:34,230
normally.

60
00:04:34,230 --> 00:04:38,250
But if our clock has stopped, then.

61
00:04:40,130 --> 00:04:48,530
We just need to send a zero to that element, but better than doing this just to make sure if we are

62
00:04:48,560 --> 00:04:54,740
resetting it, it's better to really set the elapsed time to zero.

63
00:04:56,260 --> 00:04:59,200
So not only we are restarting it.

64
00:05:02,570 --> 00:05:05,900
We are also setting the elapsed time to zero.

65
00:05:07,270 --> 00:05:14,800
And now, instead of sending hard coding to send zero, we just send the updated elapsed time.

66
00:05:15,610 --> 00:05:20,060
So by doing this, they should be pretty close to what we need.

67
00:05:20,080 --> 00:05:22,150
So let's refresh the page.

68
00:05:22,370 --> 00:05:24,090
I'm just going to start it now.

69
00:05:26,450 --> 00:05:28,950
Let's try to reset it while it's working.

70
00:05:29,840 --> 00:05:34,160
All right, this is resetting well, now let's just stop it.

71
00:05:34,700 --> 00:05:35,490
Pretty cool.

72
00:05:35,540 --> 00:05:38,120
Let's try to reset it now.

73
00:05:38,120 --> 00:05:39,010
It's resetting.

74
00:05:39,020 --> 00:05:41,210
Well, let's try to start again.

75
00:05:41,930 --> 00:05:45,260
And as you can see, this is working pretty well.

76
00:05:45,500 --> 00:05:48,130
There's just one thing that we need to adjust here.

77
00:05:49,040 --> 00:05:50,690
Let's leave it on for a while.

78
00:05:51,860 --> 00:05:56,450
All right, now it's around ten, fifteen thousand milliseconds.

79
00:05:56,570 --> 00:05:58,060
I'm just going to stop it.

80
00:05:59,040 --> 00:06:03,060
All right, so I just stop it at sixteen thousand milliseconds.

81
00:06:05,230 --> 00:06:12,820
And if I don't reset it and I just started again, we need to start from sixteen thousand, but this

82
00:06:12,820 --> 00:06:14,740
is not what's going to happen.

83
00:06:14,770 --> 00:06:15,690
Let's try it out.

84
00:06:15,910 --> 00:06:17,410
I'm just going to start again.

85
00:06:17,680 --> 00:06:20,110
And as you can see, it started from zero.

86
00:06:20,590 --> 00:06:27,100
So after we stop at once, it is not keeping the time we had before we stopped it.

87
00:06:27,220 --> 00:06:29,540
And this would be pretty simple to fix.

88
00:06:29,590 --> 00:06:30,910
Let's go to the code again.

89
00:06:33,490 --> 00:06:35,250
Let's see why this is happening.

90
00:06:37,270 --> 00:06:43,570
So looking at the code, we can see that when we entered this section, it doesn't matter if the clock

91
00:06:43,570 --> 00:06:45,300
was running before or not.

92
00:06:45,310 --> 00:06:49,930
Every time we enter here, we are just going to get a new start time.

93
00:06:51,350 --> 00:06:58,700
So here, instead of getting a new start time, we need to do some tests, we need to know if.

94
00:06:59,660 --> 00:07:06,110
The clock was running before or not, so this should be pretty simple to do just by using the elapsed

95
00:07:06,110 --> 00:07:12,590
time, because if there's something inside here, it means that the clock was already running when we

96
00:07:12,590 --> 00:07:13,490
reset it.

97
00:07:15,450 --> 00:07:22,200
We are just setting it to zero so it is safe to use the elapsed time, so when it's zero, then we don't

98
00:07:22,200 --> 00:07:25,080
need to do anything we can just started over.

99
00:07:26,560 --> 00:07:34,090
So here, let's create a condition and let's test if we have the elapsed time.

100
00:07:40,780 --> 00:07:46,570
Set to zero, if that's the case, either we never started it or we.

101
00:07:48,610 --> 00:07:50,350
Already reset it.

102
00:07:51,690 --> 00:07:53,040
So if that's the case.

103
00:07:54,580 --> 00:07:58,300
Then we can go ahead and just get a new time.

104
00:08:01,560 --> 00:08:09,330
Now, just to make it safe, instead of declaring the elapsed time variable as undefined, let's set

105
00:08:09,330 --> 00:08:12,370
it to zero in the beginning, just like this.

106
00:08:13,110 --> 00:08:17,280
So now the first time we enter here, we have the elapsed time is zero.

107
00:08:17,460 --> 00:08:19,200
So we are going to get inside.

108
00:08:21,980 --> 00:08:28,820
So else, which means that we already have something inside the elapsed time.

109
00:08:29,240 --> 00:08:31,150
Now what do we need to do?

110
00:08:31,160 --> 00:08:33,140
So let's just save this.

111
00:08:34,030 --> 00:08:35,220
Let's go back there.

112
00:08:36,510 --> 00:08:44,400
To have a little thought about the functionality we need, I'm going to refresh the page going down

113
00:08:44,400 --> 00:08:47,190
here, I'm just going to start and stop real quick.

114
00:08:48,280 --> 00:08:55,620
So now I have around eight hundred milliseconds when I start this clock again.

115
00:08:56,010 --> 00:08:59,250
How do I add this to the time?

116
00:08:59,970 --> 00:09:05,240
I don't want to get that old start time because now it's stopped for a long time.

117
00:09:05,250 --> 00:09:10,010
So if we just get that old start time, it is just not going to work.

118
00:09:10,270 --> 00:09:16,530
We need to do is just finding a way of discounting this time.

119
00:09:17,800 --> 00:09:22,120
So what we are going to do here, this is a cool workaround to this.

120
00:09:23,070 --> 00:09:24,900
We are actually going to do this.

121
00:09:27,540 --> 00:09:36,000
So setting a new start time, but we're going to pretend that instead of starting, it's now we already

122
00:09:36,000 --> 00:09:38,880
started eight hundred milliseconds ago.

123
00:09:39,890 --> 00:09:48,260
So we are just going to get a new time and just discount this to pretend we started 800 milliseconds

124
00:09:48,260 --> 00:09:50,330
ago, so this should do the trick.

125
00:09:50,840 --> 00:09:51,850
Let's save this.

126
00:09:52,550 --> 00:09:55,460
Let's go back there, refresh the page.

127
00:09:56,240 --> 00:09:57,680
I'm going to start it.

128
00:09:58,720 --> 00:10:05,110
All right, so now it's fourteen hundred, now I'm going to start it again, so as you can see, this

129
00:10:05,110 --> 00:10:08,530
is continuing exactly from where we stopped.

130
00:10:08,870 --> 00:10:11,230
So now it's six point four thousand.

131
00:10:11,810 --> 00:10:13,140
Let's start it again.

132
00:10:13,750 --> 00:10:15,460
This is working pretty well.

133
00:10:16,210 --> 00:10:17,410
Let's stop this.

134
00:10:17,410 --> 00:10:19,150
I'm going to reset it now.

135
00:10:19,360 --> 00:10:20,110
It's zero.

136
00:10:20,440 --> 00:10:21,850
Let's try to start it again.

137
00:10:22,480 --> 00:10:23,170
Pretty cool.

138
00:10:23,170 --> 00:10:24,910
This seems to be working now.

139
00:10:24,910 --> 00:10:27,340
Let's try resetting it while it's working.

140
00:10:28,570 --> 00:10:30,790
This is also working fine.

141
00:10:31,030 --> 00:10:34,810
Let's try again now, let's try stopping it and resetting it.

142
00:10:34,820 --> 00:10:36,840
So I think we did enough tests.

143
00:10:38,000 --> 00:10:43,730
And it's safe to say that the functionality of our stopwatch is working.

144
00:10:45,110 --> 00:10:46,640
So this part is done.

145
00:10:46,970 --> 00:10:50,230
Now, the only thing we need to do is formating the time.

146
00:10:50,240 --> 00:10:56,980
So instead of just showing milliseconds, we need to show it in hours, minutes, seconds and milliseconds.

147
00:10:57,200 --> 00:11:00,280
And this is what we are going to do in the next video.

148
00:11:00,410 --> 00:11:01,190
I'll see you then.