Hey, everyone, we are almost finished with our stopwatch exercise, it is already working very well.
We made some tests in the previous video, so we are able to start it, stop it.
Resetting it started again, resetting it while it's working, stopping and restarting it.
So this is working just fine, so now the last thing we need to do here is just formating the milliseconds,
two hours, minutes, seconds in milliseconds.
This shouldn't be hard to do.
So let's go back to Visual Studio Code.
So right here, when we calculate the elapsed time, instead of just sending it to the stopwatch element,
we need to do the formatting.
So how do we convert a number of milliseconds into hours, minutes, seconds and milliseconds?
Well, the first thing we need to go check is that conversion table.
So let's go back to the course material.
Let's find the date and time lesson, here it is, I'm just going to hit control and then click it to
open in a different tab.
So here it is.
Let's go down here.
So now we have the number of milliseconds in one hour and one minute and in one second.
So this is exactly what we need.
So let's copy this.
Let's take this to our code.
So this is the number of milliseconds per hour.
Here we have the number of milliseconds per minute.
And per second, we know it's a thousand so per second.
We have a thousand milliseconds, so knowing this, we already have a number in milliseconds now, we
just need to do some calculations.
So the first thing we are going to do here is creating a variable for the hours.
So now let's declare three new variables here.
We are going to be hours.
Minutes.
And second.
So the first thing we need to get is the hours.
So hours are going to be the number we have, which is the elapsed time.
Divided by the amount of milliseconds in one hour.
So now what do we need to do here?
Well, we always want to round the result of this calculation down because let's say we have less than
this amount of milliseconds if we have less than this.
So let's say one last.
So three fifty nine zero zero zero.
This means that we didn't reach the first hour yet.
So if we rounded down the result of this, let's just give it a try.
Let's just copy this.
I'm going to open a calculator here.
I'm just going to pace this, so let's say it's one millisecond before completing an hour, so let's
just subtract one here.
So this is our elapsed time.
We didn't reach an hour yet.
So what happens when we divide this by.
The number of milliseconds in one hour.
So this is going to be zero nine nine nine nine nine, so we never reach the first hour in this case,
what do we want to show in the hours?
We want to show zero because we didn't reach the first hour yet.
So the way we do this is using the floor method.
So math.
That floor.
So no matter if we have zero point one zero point two or zero point nine nine nine nine nine, this
is always going to round down.
So in this case, our number of hours is going to be zero.
Pretty good.
We already have the hours and now what do we do with the rest?
So every time we do this operation, we need to keep the remainder.
So the remainder let's also declare this variable.
This one, we don't need it, actually, the hours, minutes, seconds, we don't have to do it, but
since we are doing this for all variables, let's just do it like this so it's more organized.
So now the remainder in the first time is just going to be the elapsed time.
Minus.
The number of hours we have.
Multiplied again by the number of milliseconds in one hour.
So why are we doing this?
Well, let's get the calculator back again.
Let me just copy this.
Let's say this time we had a little bit more than one hour.
So this is the number, let's say we were 10 milliseconds above one hour.
So this was the number we had for the elapsed time.
Stuff like this, so we can see the code.
Or maybe this yeah, this is better.
So when we go inside here, this is the elapsed time we have.
We're going to divide this by the number of milliseconds in one hour.
So like this, and this is the result we are going to have and when we do the floor, when we apply
the floor method instead of getting all this, no, we are just going to get one.
So let's remember that we had the elapsed time of three six zero zero zero ten.
And now we are just going to have one inside hours.
So if we get.
The.
Three six zero zero zero 10.
Which was the elapsed time we had and we subtract it by the hours multiplied by the number of milliseconds,
so now we have one inside here multiplied by this is just going to be three six.
Zero zero zero.
Zero.
When we do this, the remainder is going to be 10, which is exactly what we need to have back.
So if we had 10 milliseconds above an hour at this point in our calculation now we have hours equals
one.
So we have one inside here and we also have the remainder of milliseconds here, which is exactly what
we want now.
We just need to keep doing this.
Now that we have the remainder.
Let's say we have one hour and three minutes now.
We just need to.
So we have this reminder in milliseconds again now we just need to do the same thing, four minutes,
four seconds, and then at the end, the remainder is just going to be the seconds.
Let's add the semicolon here.
I know at first glance this looks a bit complicated, but actually it isn't, it's just some basic math.
If you need, you can just take your time and have a think about what we are doing here.
If you need some help, you can always leave your questions in the Q&A section.
So let's continue with this.
So now we already have the hours.
So at this point, let's say one hour or zero hours.
All right.
So now we just need to keep doing this.
So we already have the hours and the remainder in milliseconds.
Now, let's do the same thing for the minutes.
So let's just copy this.
This time, it's going to be a bit different.
Let's see why.
So now we need to get the minutes.
Which is going to be math that far, but now instead of the elapsed time now, we just need to get the
number of minutes we have inside the remainder.
And this is the number of milliseconds in one minute.
So let's replace it here, replace it here instead of ours.
We are going to use minutes now down here.
We also need to adjust because we are not working with the elapsed time anymore since we already got
the number of hours and got a remainder.
Now, down here, we are just working with our remainder.
So after we get the minutes, the remainder.
It's just going to be itself minus the number of milliseconds that we put inside here so you can ride
it like this, or if you just want to make it shorter, we can use the decremental operator, which
is just using the.
Minus equal.
Then it's the same thing we had written here and now for the seconds, it's just going to be the same
thing.
So let's just copy this.
Now that we already got the number of minutes, let's do the same thing for.
Second.
So this is going to get the remainder.
This is going to be the same thing.
Let's now get our second.
So here we have one thousand milliseconds and here we also have one thousand milliseconds, so now we
have everything we need.
We have the number of hours, minutes, seconds, and the remainder in the end of it is just going to
be the milliseconds.
So now let's just create a variable for the formatted time.
Just so we don't have to write everything inside here, so again, just to keep it organized, we don't
need to declare this variable.
This is just going to be used right here, but just to make it organized, let's put it here.
So the format of time now is just going to be our hours.
So two strings so we can concatenate things, then we are going to add a Colin.
Then we are just going to do the same thing for minutes, seconds and merely seconds.
So hours.
Minutes.
Seconds and the milliseconds is just going to be the remainder.
All right, pretty cool.
And now, instead of just sending the elapsed time to our element, let's send the formatted time.
Let's see what happens.
Let's see if our crazy calculation is not working.
Going back to the page, refreshing it.
Let's just click start.
And now, as you can see, this is working fine, so we have the seconds here, we have the milliseconds
now there's just one less thing that is not good.
So it's the same problem we had with the clock challenge, because when we have numbers below 10, we
want to add a zero.
So here, instead of showing zero, we want to show zero zero zero zero and so on.
And fortunately, we already have a function for this, which we made in the date and time lesson.
Let's go back here.
Let's remember that.
Or was it here?
No, it was inside the time methods lesson.
So as you can see.
We had this challenge.
This is not working out because I have the code commented, but let's remember that we already created
a function to add the zero, so we just need to go back there to get it.
So here's in the script.
Let's try to find the.
If I search for a clock, so challenge of less than twenty seven, here it is.
So here we have a function to add eight leading zero.
We could use it.
If we had all the code uncommented here, we could just use the function.
We wouldn't have to copy it.
But since everything is commented and we have a different JavaScript file here, let's just copy it
and just place it here.
So let's remember that this function not only includes a leading zero, it also converts the number
into a string, which is pretty cool.
So we just need to execute this function here.
So down here, instead of just getting the hours, we are going to pass the hours.
Inside our function, and we don't need the two string anymore.
So hours, if it's zero or one, it is just going to include a zero to the left.
Let's do the same thing, four minutes, seconds and merely.
Saving this.
Going back to our page, so as you can see now, we have three minutes, twenty five elapsed, let's
just stop this.
Refresh the page now.
Let's see if this is any better.
I'm going to start it.
And now, as you can see, we have the leading zeros.
So now that we have something less than 10, our function is already adding the zero and now it's not
anymore.
So this is working perfectly fine.
Let's do a final test here.
Resetting it, working fine.
Let's stop it.
Let's see if it's going to continue.
From where we stopped, yeah, this is working well, let's reset it while it's working, so everything
seems to be working fine.
Let's reset it one more time.
Now, this is the only thing that's not working because we are just sending a zero so we can correct
this real quick going back there.
So when we reset our clock instead of sending the elapsed time.
We could just let's refresh the page, we could just send the string.
Just like that.
Let's try again starting it, if we hit reset, it's working fine, we have no problem if it's stopped
and we reset it, as you can see now, this is much better.
So that was it.
I know it was a lot of work, but I thought it was about time for us to do something a little bit more
complex like this.
Again, if you have any questions, don't hesitate.
Leave your questions in the Q&A section.
Let me help you out if you need.
You can watch this video again.
Just take your time.
Look at the code.
If you're a bit confused on how we did the calculations to transform the milliseconds into hours, minutes,
seconds, you can just take your time.
Look at it, watch the video again.
Do not continue until you are completely comfortable with what we've done here.
All right.
So that was it.
I'll see you in the next video.