Hey, everyone, in this video, I'm going to solve this watch challenge, actually, I think I should
have called it the clock challenge, but anyway, you get the point.
So we need to put it to work using JavaScript, and that should be pretty easy with the date object
and the set interval method.
So let's go to Visual Studio code, and the first thing we need to do is get the current time.
So we need the current number of hours, minutes and seconds.
So let's create three variables.
So one for the hours.
Or before we do this, we can create one for the current time so we don't have to create this object
three times, so let's create one for the current time, which is just going to get the current date
in time.
So new date without any argument.
So now for the hours, we just need to get the current time and use the get our method so open and close
parentheses.
And we know that this is going to return something from zero to twenty three, which is exactly what
we want.
So now we're just going to repeat this four minutes and seconds.
So minute.
And second, so for the minutes is just get.
Minutes and for the seconds get.
Seconds.
OK, so now that we have this information, all we need to do is just send it to our HTML elements.
So going back to the page, let's select the clock.
So as you can see, we have the idea of hours, minutes and seconds, so going back to our script,
let's just copy this so we don't have to type it again.
So for the hours.
The Internet age HTML is going to be what we have in the hours variable.
And now let's do the same thing for minutes and seconds, so minutes and.
Seconds.
Let's not forget to change it here as well, so here minutes and here seconds, so let's see what happens
when we do this.
I'm going to save this.
Refresh the page.
Let's go down there, as you can see, we were able to start this clock, it's not working yet because
now we just need to keep repeating this.
But this was the first step.
We just got the current hours, minutes and seconds and just sent them to this age HTML element.
And now we just need to keep updating our time.
So how often is a clock updated?
Well, a clock is updated every second because the smallest unit we have here are the second, so we
just need to update it every second.
So now let's just go back to Visual Studio Code and this is going to be pretty easy because the only
thing we need to do is just putting all this code inside a set interval so we can even copy all this.
Or if you want to practice, which I think it's better, just write it again.
So this time we don't plan to stop our clock, so we don't need to create a variable.
So we just need to do a window that set interval.
So again, inside here, two arguments.
First one is the function.
Second one is the time.
This time we just want one second of interval.
So a thousand milliseconds.
And inside here we are just going to place all this code.
You can press control X to cut and then control V to base it inside here or.
Something easier, just select the whole block of code and press out and then arrow up or arrow down,
if you do this, you are able to put a block of code inside other elements like this.
So I just wanted to show you this.
All right.
So let's see if this is working.
Now, let's refresh the page.
I hope it is.
OK, we can see that this clock is now working well, but we have one problem, we are not seeing this
problem yet.
But I'm going to show you that we are going to have one problem with this clock.
So I'm just going to stop this video now.
And when this turns to zero, actually, while I'm talking, it's almost there.
So I'm not going to stop the video.
Let's just wait for this to turn to zero zero and let's see what happens.
Well, something a bit odd, because clocks do not show numbers like this without the leading zero,
so we need to do something to format these numbers.
So when they are less than 10, we include eight leading zero.
This is pretty simple to do.
We're going to have to do it with hours, minutes and seconds.
So we might as well create a function to do this.
So going back to the code.
So this seems to be a little perfectionist, but actually it isn't.
It's really odd to have a clock like that.
I haven't seen a clock that shows numbers like that.
So this is something that as developers, we should fix it.
Don't think it's OK like this because it's not.
So let's fix it.
This is going to be pretty easy to do.
So we just need to create a function in the name of the function is going to be Fermat time, or you
can choose another name like add leading zero.
I think add leading zero is even better.
So add leading zeros.
So like I said, I like using underscore for function names.
If you want you can just use lower case like you've been doing.
So this is our function.
And this time we are going to need one argument, which is the number we want to format, so the argument
is going to be the number.
So what we need to do is just testing if this number is less than 10, if it is, we can add a leading
zero.
So if.
No.
It's less than 10.
We are just going to return a zero and then we are going to concatenate with the number we have, but
we need to be careful because we are working with numbers here.
So we should convert it to string.
So no dot to string.
Alse, which means the number is 10 or higher, so in this case, we don't have to do anything so we
can just return.
The number converted into string.
Why are we converting into string here?
Well, because then it's going to be even better to send it to Asia HTML elements, we know that all
HTML elements, they have strings inside.
So this is going to be even better.
So what our function is going to do is converting our number into a string and also adding a leading
zero if we need it.
All right.
So now that we've done this, instead of just sending the variables, we are going to pass these numbers
inside our function first.
So instead of adding the hours.
We are just going to use our function to add the leading zero if it's necessary.
So let's say we have 11 hours, it is just going to go inside.
It's not less than 10.
So it's just going to return the same number that entered, but convert it into a string.
But if we have one, then it is just going to return zero one, which is going to be exactly what we
need.
So let's save this.
Let's go back to our page.
Let's see if we are lucky.
Yeah.
Fifty eight.
Fifty nine and then zero zero, which is beautiful.
Let's wait until it gets to 10 to see what happens.
Nine, now it's ten.
It's not adding anything.
So now this is working perfectly and the same thing is going to be applied for the hours and minutes.
So that was it.
As you can see, it's pretty easy to do a clock in JavaScript by using the date object in the set interval
method.
So I hope you like this exercise and I'll see you in the next video.