All right then, gang.
So in this video, what we're going to do is take what we've learned about dates so far and create some
kind of digital clock in the browser over here.
So then first of all, I've created this div with a class of clock.
That's where we're going to eventually output the time.
Now over in Sandbox, we've not done anything yet.
The first thing we want to do is get a reference on that div because we're going to use it later on.
So I'll say const call this clock and set it equal to document dot query selector and we want the clock
class.
So now we have that reference and we're going to use it later on.
Now the next thing we want to do is create a function which is going to be responsible for updating
the time on that digital clock every second.
So let's call this function tick because it's going to be the ticking of the clock.
Now, we don't need to take any parameters into this function, but inside what we're going to do is,
first of all, create a new date and store that in a constant called now so that is equal to a new date.
Now, ultimately, we'll be calling this function every second so that this can create a new date every
second.
Then from that date object, we can get the hours, the minutes and the seconds and update the Dom the
browser with that information.
So we need a way now to call this function every second now we've seen how to do something like this,
calling a function over and over again every so much time, and that is using the Setinterval method.
So first of all, let's do that.
We'll come down here and say set interval.
And instead of defining the function directly in Setinterval like we've done in the past, we're just
going to say call the tick function.
And the second argument is going to be how often we want to call it.
Well, that's every 1000 milliseconds, which is every second.
So now we're calling this tick function every second, and then creating a new date every second, which
is going to be the exact date of that second.
And then we can do things like get the hours, minutes and seconds from that date.
So what I'm going to do is, first of all, get the hours.
So I'll store this in a constant called H, set it equal to now, which is the date.
Then use the method, get hours, which we've seen.
And that is going to get us the number of hours that it is today.
So for example, if now it's 1:30 p.m., it's going to get us the hours, which is going to be 13 because
13 is 1 p.m. If it's 11 a.m., it's going to get us 11, etcetera.
So let us log this to the console and see if this works.
We'll get H and.
Have a look over here.
And every second we can see that we're getting 11 because it's 11 a.m. So every second we're calling
that tick function and the hour isn't changing.
But if at some point it did, it would become 12.
So now we have the hours of the day.
Now let's get the minutes.
So we'll say const M for minutes is equal to now dot get minutes.
And we'll log this to the console as well.
H and M save it.
And now we can see it's 1125 currently.
So finally we need the seconds.
So let's say const s is now equal to now dot get seconds and also log this to the console.
Save it and come over here.
And now we can see every second we're getting a new time.
And now you can see it increasing.
Okay.
So as soon as this gets to 60 or rather 59, the next step is for this to go up to 26.
Now, I'm not going to sit here and watch that, but you get the general idea.
So if we go back over here, instead of logging this to the console now, instead what I'd like to do
is output it to the Dom.
So we need to create some kind of HTML template to inject into this clock over here.
So what I'm going to do is delete that and save it.
Then I'm going to create a new constant called HTML and set it equal to some kind of template string.
Now inside this template string is where we want to output this information.
So each one of these, the H, the M and the S is going to go in its own span tag.
So let me create this span.
And then first of all, we'll output the hours and then close off the span.
Then we'll do the same thing.
But this time we'll output the minutes so M and then close off the span.
And then finally we want to output the seconds.
So we'll do span and then dollar sign curly braces s and close off that span as well.
So now we have this HTML template.
We want to inject it.
So we'll take the clock reference which we already got up here and say dot inner HTML is equal to the
HTML that we just created, which is this stuff.
So every second we're updating the HTML, we're overwriting it with this new template and that is going
to contain the new hours, minutes and seconds every second.
So let me save this and preview and we can see 1127, 12, 13, 14, etcetera.
And this is starting to look like a digital clock.
Let me just zoom in a little so we can see.
Okay.
Now one thing I do want to do is place a colon here after the 11 and a colon after the 27.
So let's do that over here.
Colon space, space, colon space.
Save it and refresh.
We can see now this is looking a bit more like a digital clock.
Okay, So that's the JavaScript pretty much done.
The next thing we need to do is just add a few styles to make this look a little better.
So I'm going to come to my head and create a style tag underneath the title.
So style and then inside that style tag, what I'm going to do is just create a few different rules.
First of all, I'm going to say the body background is going to be three, three, three, which is
kind of like a dark gray.
Then I'm going to say the clock itself is going to be font size four EMS just to make it a lot bigger.
Then text align is going to be to the center to centralize it on the page.
The margin is going to be 20 pixels, top and bottom and auto left and right.
Then we're going to give this a color of yellow and finally a font hyphen family of Ariel.
And then one more thing.
I want to take the span tags inside the clock div, which are these things we output right here.
So I'll say clock span and say the padding is going to be 20 pixels for each one of those to give each
span tag a little bit of breathing room and then the background of each one as well is going to be for,
for, for just a slightly lighter gray than the actual body background.
So let's save and preview.
And if I make this a bit bigger and zoom out a touch, now we can see this digital clock right here.
And in fact, let's just give it some upper margin.
So we'll come to this and say 200 pixels, save it and refresh.
And now we can see in the middle of the page that is looking nicer.
