Welcome to Day 2.  This project is involves creating a functioning clock that displays the time.  The code we are given is just the make up of the clock with the seconds, minutes and hours hand.  It’s our job to animate the hands so it works as a real clock.  Some of things to be familiar with in this project is the Date object Javascript provides us with (this is so the clock knows the real time), and how to transform elements with CSS.  So lets go over what these do before getting into the project.

 

Javascript’s Date object gives us a lot of options that allows us to do different things regarding dates and time.  The MDN website says that this object represents a single moment in time.  A cool fact about this is the Date object is based on a time value that is the number of milliseconds since January 1, 1970.  Regarding this Clock project, we are going to need the seconds, minutes, and hours for the current time in order for the clock to work.  The method to get the current time is .now().  This is used on the Date object.  In order to get the seconds, minutes, and hours we will call the getSeconds(), getMinutes(), and getHours() function.

 

 

Now that we are familiar with the Date object, we have to animate the hands so that it works like a real clock.  In order to do this we are going to use the CSS property transform.  And on transform we need to rotate the hand.  Since the transform-origin default property is set to 50%, that makes it rotate in the middle instead at the end like how we want it.  So all we have to do is set transform-origin to 100% to achieve what we want.

 

One last thing we can’t forget to talk about is the setInterval method.  This repeats a given function at every given time-interval.  For this project, we have to set the time to 1 sec.  This will run the code (rotating the hand) every second.  This will give us the ticking functionality and make our clock functional.

 

To conclude, we learned about Javascript’s Date object and setInterval method.  And we learned how to rotate elements using the transform CSS property.  Make sure to stick around and what’s next for Day 3.

 

Here is the source code for this project and link to see the finished project.

Source Code

Finished Project