Hi, everyone, let's continue with our stopwatch exercise.
So in the previous video, we already made it start.
Let me just refresh the browser so it doesn't keep running now.
We just need to make it stop and reset.
And there's also an extra challenge which is restarting.
But let's do things step by step.
So first, let's just make it stop.
So let's go back to the code and let's remember that we have this if statement.
So if it's not running, then we are just starting the clock and now if it is running, then we need
to stop the clock.
So here it would just set the variable to false.
And we need to stop this interval.
How do we stop a set interval method?
Well, we need to give it a name.
We need to assign it to a variable.
So let's call it something like clock interval or something like this.
And again, let's declare this variable up there.
So we can use throughout our code.
This is because of a subject we already talked about, which is variable scope.
So now we have this interview with a name, so now when we get inside here.
Even before setting this variable to false, we can just stop it right away so we can just do window,
not clear.
Interval and inside here.
We just need to pass the name of the interval, which in this case is clock interval.
So let's put it here.
Let's see if this is working.
So saving this, going back to our page, refreshing it.
Starting at.
Stopping, it seems that it's not working.
Let's go to the council.
I think this is probably because of the quotation marks, because here we just need to pass a variable,
not a string.
Let's try again.
Refreshing the page, starting it, stopping it.
So now this is working fine before we work on restarting it, let's just do the reset, because this
is really simple to do.
So let's create another event for the reset.
But then.
So the idea of this element is reset.
So this should be pretty simple to do every time we click the reset button.
All we need to do is restarting the clock.
So how do we do this?
Well, we can just get the start time again.
Let's remember that this is not part of the interview.
So we only said it once.
But if we reset it.
We just want to set this again, so doing this, let's save this.
Let's refresh the page and see if we can make it reset, so I'm going to start at.
Let's leave it here for a while now, I'm going to reset, and as you can see, we were able to reset
it.
I'm going to try again.
And again, pretty cool, but now just one problem, if I stop it and then reset, I don't see it going
to zero.
So we need to do this so every time we reset it.
If it's running, we don't have to do anything, but if it's not running.
So in this case.
Then we can just send zero.
To our element, so instead of the elapsed time in case it is running, we just have to leave it working
normally.
But if our clock has stopped, then.
We just need to send a zero to that element, but better than doing this just to make sure if we are
resetting it, it's better to really set the elapsed time to zero.
So not only we are restarting it.
We are also setting the elapsed time to zero.
And now, instead of sending hard coding to send zero, we just send the updated elapsed time.
So by doing this, they should be pretty close to what we need.
So let's refresh the page.
I'm just going to start it now.
Let's try to reset it while it's working.
All right, this is resetting well, now let's just stop it.
Pretty cool.
Let's try to reset it now.
It's resetting.
Well, let's try to start again.
And as you can see, this is working pretty well.
There's just one thing that we need to adjust here.
Let's leave it on for a while.
All right, now it's around ten, fifteen thousand milliseconds.
I'm just going to stop it.
All right, so I just stop it at sixteen thousand milliseconds.
And if I don't reset it and I just started again, we need to start from sixteen thousand, but this
is not what's going to happen.
Let's try it out.
I'm just going to start again.
And as you can see, it started from zero.
So after we stop at once, it is not keeping the time we had before we stopped it.
And this would be pretty simple to fix.
Let's go to the code again.
Let's see why this is happening.
So looking at the code, we can see that when we entered this section, it doesn't matter if the clock
was running before or not.
Every time we enter here, we are just going to get a new start time.
So here, instead of getting a new start time, we need to do some tests, we need to know if.
The clock was running before or not, so this should be pretty simple to do just by using the elapsed
time, because if there's something inside here, it means that the clock was already running when we
reset it.
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
need to do anything we can just started over.
So here, let's create a condition and let's test if we have the elapsed time.
Set to zero, if that's the case, either we never started it or we.
Already reset it.
So if that's the case.
Then we can go ahead and just get a new time.
Now, just to make it safe, instead of declaring the elapsed time variable as undefined, let's set
it to zero in the beginning, just like this.
So now the first time we enter here, we have the elapsed time is zero.
So we are going to get inside.
So else, which means that we already have something inside the elapsed time.
Now what do we need to do?
So let's just save this.
Let's go back there.
To have a little thought about the functionality we need, I'm going to refresh the page going down
here, I'm just going to start and stop real quick.
So now I have around eight hundred milliseconds when I start this clock again.
How do I add this to the time?
I don't want to get that old start time because now it's stopped for a long time.
So if we just get that old start time, it is just not going to work.
We need to do is just finding a way of discounting this time.
So what we are going to do here, this is a cool workaround to this.
We are actually going to do this.
So setting a new start time, but we're going to pretend that instead of starting, it's now we already
started eight hundred milliseconds ago.
So we are just going to get a new time and just discount this to pretend we started 800 milliseconds
ago, so this should do the trick.
Let's save this.
Let's go back there, refresh the page.
I'm going to start it.
All right, so now it's fourteen hundred, now I'm going to start it again, so as you can see, this
is continuing exactly from where we stopped.
So now it's six point four thousand.
Let's start it again.
This is working pretty well.
Let's stop this.
I'm going to reset it now.
It's zero.
Let's try to start it again.
Pretty cool.
This seems to be working now.
Let's try resetting it while it's working.
This is also working fine.
Let's try again now, let's try stopping it and resetting it.
So I think we did enough tests.
And it's safe to say that the functionality of our stopwatch is working.
So this part is done.
Now, the only thing we need to do is formating the time.
So instead of just showing milliseconds, we need to show it in hours, minutes, seconds and milliseconds.
And this is what we are going to do in the next video.
I'll see you then.