Hi, everybody, in this video, we are going to solve the stop watch exercise, so we have these buttons
here, one for start and stopping to watch one for resetting it.
And the format needs to be in hours, minutes, seconds and merely seconds.
This shouldn't be very hard to do, but we are going to do this in two steps.
So first, we are just going to make this work and this is only going to be in milliseconds.
We know we have native JavaScript methods to work with milliseconds.
So when we make sure that everything here is working, then the next step will be just formatting the
time.
So before we get started, let me go to the council.
Let's inspect these elements so we get their IDs, so we have the stopwatch, we bring this to Visual
Studio called.
Then we have the start stop button.
And we have the reset button, and these are the three elements that we.
I'm going to work with.
All right, so the first thing that we need to do is setting the unclick event to the start stop button.
That's the very first thing we are going to do is making this stopwatch start working.
So document.
Not get element by ID, then the ID is start, stop.
I would, said the unclick function.
All right, so when it starts, we need to get the time and we need to start a set interval so we can
keep increasing this time, but since we have just one button for starting and stopping our stopwatch,
we need to know if it's running or it's not running.
So before we enter in this event, this time, let's do things a bit differently because we are going
to have multiple events here.
So it's better to create the variables up here.
So they are accessible inside these functions.
So the first variable that we are going to need is one called is.
Ronnie, you can call it whatever you want.
I'm just going to call it is running because when we load the page, the clock is not running.
So this is going to start as false.
And we are going to use this variable to control if our button needs to stop or start the clock.
So right when we get here, let's start with an if statement.
So if.
Our clock is running.
Then we are going to do something in this case, we are going to stop it.
Otherwise.
Then we can just start it, we can do like this or I prefer to do the opposite because actually we are
first starting the clock and then stopping it.
So I'm just going to use an exclamation mark here just to do the opposite.
So this just means that if it's not running to other ways of doing this would be like if is running.
Not equal to true or if is running.
Equals false.
Right.
So we have a few ways of doing this, but using the exclamation mark, it's just easier.
So in this case, the clock is not running, so we are going to start it.
So let's include a comment here that says start the clock.
Inside here, we need to stop it.
So the first thing that we need to do when we get inside here is just changing the state of this variable.
So if the clock is not running and we click the button, we are going to start it.
So the first thing we need to do is setting it to true.
So now it's going to start running.
Otherwise, before we stop it, we are just going to set it to false, so we are doing things here step
by step.
All right.
So now what do we need to do to start the clock?
How do we track time?
The first thing we need to do is get the current time.
So when is this clock starting for this?
We're just going to use the get time method because with it we are going to have the number of milliseconds
since the APOC.
So this is going to be pretty easy to work with milliseconds.
So let's create a variable called start time.
So here, like I said, we are going to have to use variables in multiple places here, so I prefer
to actually declare them up here so we make sure they are global and they are going to be accessible
from anywhere in the code.
So there are two ways of doing this.
If you want, you can just use semicolon and then in another line you can start a variable.
So start time just like this.
We don't have to assign any value to it when we are declaring this variable.
And here we can just use it like this without the FA keyword.
This is one way of doing it, but actually you can declare multiple variables at the same time just
by using comma.
So we are starting this var and declaring the first variable.
If we want to declare another one, we can just use comma just like this.
So now we don't have to type the VA key word multiple times, and if you want to make it more organized,
you can break the lines like this.
So this way we are just declaring multiple variables at the same time.
This is important because we're going to have a few more that we're going to have to put it here.
So this is good.
So now the start time is going to be a date object.
We are going to start now.
Don't get time.
Pretty good.
Now we know that we are going to have something in milliseconds and this is what we are going to start
working with.
So now the only thing we need to do is keep updating the time.
So we can compare the current time with the start time.
So for this, we're going to need to start a set interval.
So before getting the initial time, let's start a set interval.
So window that set.
Intervale.
So, again, inside here, there's a function.
And here, the time is going to vary.
I would put one millisecond so we can update our clock every one millisecond, but I don't think we
need to be that precise.
I think updating it every ten or one hundred milliseconds is going to work just fine.
And this is going to be lighter for our browser to execute.
So let's just use.
Maybe a hundred milliseconds, this is going to be we won't even notice that it's taken this time.
But if we do, then we can come here and try to use 10 or something like this.
So with this interval at every 100 milliseconds, we are going to do something.
And what are we going to do?
So let's go inside this function at every iteration of this interval.
We are going to get the current time.
So current time, this is going to be another global variable, so let's declare it up there.
Right here.
Cuma multivariable.
So then the current time is just going to get an updated time and now we just need to calculate how
much time has passed from start time to current time.
So for this, we need another variable.
So let's call it.
Elapsed time.
It's just going to be the current time.
Minus.
The start time.
Let's also declare this variable up there.
I'm sorry, this is the first time we are doing this, but this is important because these variables
are going to be used inside their functions.
All right.
So now what do we have to do?
We just need to get the elapsed time and send it to our clock element, which is this one.
So let's just copy this structure here.
The idea of this element is stopwatch.
Let's set its inner.
Age TML.
The elapsed time.
All right, so by doing this, we can already put our clock to work, so it is going to start when we
click the start button.
So let's check it out.
I'm going to save this.
Let me refresh the page.
We have nothing here, I'm just going to click start and now we can see that the magic is happening.
So this is updating every 100 milliseconds.
So maybe it seems a bit too slow.
So let's just stop this and let's try to use 10.
So, like I said, you can you can even use one if you want.
But I think one is going to be too heavy for the browser to do something every millisecond, if you
think about it.
So let's use 10.
And I think this is going to be all right.
Let's go back there again.
Let me start it again, so now as you can see, this is much better, this is what we need.
So right now we have it working in milliseconds.
So now we just need to do two things which are stopping it and resetting it.
And there's also one extra challenge, because if we just stop it and don't reset it when we start again,
it just start from where we stopped.
So we are going to need one more video to finish this functionality and then we can start formatting
the time.
So I'll see you in the next video so we can continue.