How am I supposed to use the amazing job script clock at?

I just created the ground yourself.

That's a great idea.

I mean, look at this amazing JavaScript clock at.

That's definitely not Photoshopped in place.

I can't wait to learn how to make this.

Theo.

On the right hand side, we can see the final version of our actual clock, which is just a typical analog clock.

And on the left, we have an empty index dot html file which contains a link for both our style sheet as well as a script tag for our JavaScript and now inside of his body tag.

The first thing we need to do is we needed to find a dip that is going to contain our clock.

So we're spending credit if we're gonna give it a class of clock and inside of here, this Div, we're going to put all of our different hands as well as all the different numbers for our clock.

So the first thing that we're gonna do is we're gonna define the hands.

We can just do that by creating a div with the class here of hand.

All of our hands are gonna share this hand class.

And then we also wanted to give it a class for which hand it is.

In our case, this one will be our hand.

We concocted that down, do the same thing for a minute, hint as bulls for a second hand, and this takes care of all three of the hands of our clock.

And the next thing we need to do is we need to create jobs for all of our different numbers.

For example, we want them to have a class of number as well as another class of number one, all the way down to number 12 and inside of here we need to put one.

And there's actually a really easy way to do this using Emmet.

So within it, we can say what HTML element we want in our case.

Div.

Then if we want classes, we just put dots.

So we want a dot number on all of these and we also want a dot number, But we want this to be implemented.

So if we put a dollar sign right here, this is going to replace it with a number, and we just say times 12 because we want there to be 12 different numbers in here one through 12 then inside of these curly brackets.

Whatever you put in here is going to go in between the two tags.

So in our case, all we want to do is again put a number, which we're going to increment 12 times.

Now, if we enter on this, you'll see that already generates here all of these different device for us.

So we don't have to manually typing out.

Let's delete the one we manually typed.

And that's all the HTML we need for this entire application.

We can just save that, and we can open this up using live sober.

So let's go over here right Click this open with live server and you'll see when this opens up that is really basic and pretty much completely useless right now, in order to make this actually more useful, let's go into our styles that CSS, which for now all I've done is I've changed everything to be using border box, and I've changed the font family to be gotten grounded or sand serves as a fallback.

You can use whatever font you want for this application.

But I highly recommend using border box for box sizing because it makes sizing things so much easier now to get started.

Let's first fly the background that we want to our body so we could just apply a background here and I actually just copied this straight over.

Essentially, all this is is a linear Grady in't going to the right with a light blue color on the left and the light green color on the right hand side.

You can use whatever colors that you want for this.

But when we say that you can see we get the same Grady int that we have over here, then the next thing that we want to work on is the actual clock itself.

So let's select that clock class that we just created.

The first thing you want to do is we want to set our with Anne Heche.

In our case, we're going to use 300 pixels as air within height because we need this to be a square and we're also going to give it a background color, this background color, I'm going to use our G ve A because I wanted to be partially transparent.

So I'm gonna use entirely white, but with an 80% transparency.

And essentially what that's going to do is that's going to make this blue and green colors shine through a little bit, which is just gonna make it look a little bit cleaner.

If, for example, we had no place to be here, if one you can see that it's much harsher.

But with the 80% it's much more blended in with the background.

Next, we want to make this a circle so we can do that by using Border radius 50% which is going to round all of our corners to make a perfect circle.

Lastly, what we want to do is we want at a border to this so they could just say a border.

Well, say to pixels solid black.

And this is just going to stand it out from the background and make it look more like a traditional analog clock.

Now the next thing we want to do is work on positioning our numbers in the correct positions on our clock.

So let's get on here.

We're gonna select our clock dot number and this is going to select every single one of our different numbers.

So we need to do all of our shared styles here.

And the first thing that we want to do is your own position.

These absolutely.

Which means if we want to make them relative to the clock, we had to make the clock a position of relative now inside of here for our numbers, we're gonna do a nice little trick to make rotating these around the clock really easy.

We're gonna set the with 2 100% and the height to 100%.

And if we say that, you see everything gets moved in its top left and have to visualize what we've just done, I'm going to apply a background court, this element.

So we're going to use the background color of red because it's really easy to see.

And as you can see, we have a giant red square but takes up the entire space of our clock.

So to get on numbers position to the very top, for example, number 12 what we need to do is set the textile line here to be centered.

Once we do that, you'll see there are 12 moves into the correct position inside the clock, and we remove this background color.

But how do we get all the rest of our elements positioned around the clock?

And to do that, we're going to use transform because with transform, we can use what's called the rotate property so we can rotate, for example, 30 degrees.

And this is going to be where the one position goes and again to visualize how this is working, what's add that background color back in?

So we could just say background color of red and you can see it's just rotated that entire rectangle.

So it's essentially acting like the top of the clock is up here, and it's going to do that no matter what we do.

So, for example, 60 degrees is gonna rotate a little bit farther and so on all the way around.

So what we need to do is we need to have a different value for rotate here for every one of our numbers, and to make that happen, we're going to use a variable.

We're gonna set this variable to be called rotation, and by default, we want this rotation value to be set to zero.

So We're gonna set that to zero here by default.

Remove this background color and again everything moves back to the tough.

But now we can come in here, we can select our individual numbers.

So we'll say Number one, for example.

We want this toe have a rotation of 30 degrees, so we can just type in 30 degrees here.

And if we say that you see one has moved over.

Now let's copy this down a bunch of times because we need to do 60 degrees, 90 degrees, 121 150 180.

And so on.

All these airs gonna be 30 degrees apart from each other.

210 240.

Copy down a couple more times they have to 70 300.

And lastly, 3 30 We don't need to worry about 360 because that's what our 12 is already defaulted to.

Now we can change all these 123456789 10 and 11.

And if we say that boom.

All of our numbers are correctly positioned, and that's because of this rotate value.

We're just using this rotation variable to set the rotate of our giant red rectangle as we saw earlier.

Now that we have all that done, what's actually working, adding in the hands, which are going to be much easier than the numbers, Let's go back to the original example so we can look it exactly how we want these hands to look, Let's go down here.

We can select our hand by just saying clock dot hand This will select every single one of our hands and again we want to position these Absolutely.

So we can just say position absolute and inside of here we want these to be positioned so that they're centered essentially right here.

The bottom of them.

We want to be in the dead center so we could just come in here.

We can set the bottom to be 50% and this is going to put them dead in the bottom.

And we can also make the left here 50%.

And if we say but go back to her, you'll see nothing happens.

So we need to actually give them a little bit of a dimension.

We're gonna give them a with here, for example.

Let's say 10 pixels and we're also gonna give it a height, and in our case, we're just gonna get it.

How you hear of 40%.

And lastly, we need a background course that we can see it so back on color of black.

And if you say that we see we get our hand.

And when we say that you said that we get our hand, but it's a little bit offset from our 12.

If we make our height here 50% it'll be really easy to see that it's officer and not dead centered inside the 12.

To fix that, we again just want to use our transform translate this time, and we want to translate negative 50% on the X.

So we use translate X.

And if we say that, you'll see that it's now dead centered into 12.

And essentially this translate xnegative 50% just translated the object by 50% of its with backwards.

So that's exactly what we needed.

Also inside of here, we want to use that same rotation trick.

So where is going to say rotate?

And we're gonna use a variable called rotation and this we're going to actually set in the Java script for how We want our hands to rotate, but by default we just want this to be zero so that they actually show up on our screen.

And if we say that again, it's showing up just like we wanted to be to see how the rotation looks.

What's trained our rotation here 2 30 because that's how it'll be seven at Java script.

And to make sure that works down here, we need to make sure we use karaoke on.

We want to multiply by one degree just to convert that one value over here of 32 degrees.

And if we say that, you'll see that that definitely doesn't look right.

It's rotating around the center and not around the bottom.

So we need to set a property, which is called transform Origin.

I can spell properly, transform origin, and this transform origin allows you to say where you want to transform to be applied to.

In our case, we want it to come from the bottom.

If we say that you see that it is now just moved itself so that it transforms down here and it's rotated 30 degrees.

And if we change this to for example, 90 it'll be at 90 degrees and so on, which is perfect.

So let's set that back to zero and work on styling how we want our hand to look, Let's go back here.

And as you can see, our hands have a slight white border around the end and they're slightly curved at the end.

So let's come in here and do that.

We can just sit here a border, which is going to be one pixel, solid white, and we also want to set a border radius.

But we only want this on the top left.

So let's say border top left radius.

We just make this 10 pixels.

We're gonna do the same thing on the top right on this.

Just because we don't want to curve the bottom of it, we only want a curve the top.

Now, if you say that you said we get that nice, curved end of the top and the white border around it, which may be hard to see.

Lastly, without out of the way, we want to make sure that these always draw on top of her numbers.

So we're going to come in here.

We're gonna set ours E index.

We're just gonna make it 10.

So it'll always be on top of our numbers.

And now, as you can see, our hand is on top of the 12 and not behind it.

We want to make sure that the height and with hard to find her hand and not for all of the hands let's remove those from here and go in and actually selector individual hands.

So we have our clock that hand, not second, and this clocked out, hand out Second is going to hear have a width of five pixels.

It's goingto have a height of 45% and we also want to change the background color for this, which is just going to be read.

You say that we get a nice little secondhand here and it's looking a little large.

Let's actually changes down at three pixels, and that looks much better now.

We can copy this and did the exact same thing for other hands.

We're gonna have our minute hand in our our hand, and these are both going to be black instead of red.

So let's change this to be a black color.

Copy that down and now we need to change the heights and the wits are minute hand.

We're going to want this to be seven pixels and 40% tall.

And down here for our hand, we're gonna make this 10 pixels and 35% tall.

Now, if we say that you said that we get all of our different hands being shown up here they look a little bit weird because they're being drawn on top of each other.

But once we jump into the drive a script that will no longer be a problem because most of the time they won't all be lined up directly on top of each other.

The last thing we have left to do is if we go back to a previous example.