Creating A Clock With HTML, CSS, and JavaScript

For Episode 2 of Wes Bos’s 30 Day Vanilla JavaScript Challenge, Wes shows us how to make a lifelike clock using CSS3 transformations and JavaScript’s setInterval function.

The Challenge

Like the first video, this mini-project kindles the imagination and is a great example of the type of thing I might have spent hours trying to do before watching the video.

By breaking the problem down into a series of minor twists to work out, Wes shows how a solution is attainable with very little code and just a little CSS transform magic.

This post explores the things I learned, as well how I tweaked Wes’s example to create my own CSS & JS Clock example.

What I Learned

By using the CSS transform-origin property, we can alter the focus point around which an element rotates whenever the transform: rotate() property is applied.  This was totally new to me, so I made a CodePen experimenting with transform-origin.

The other ridiculously awesome (and totally new to me) thing that Wes did with CSS in this episode was to use a cubic-bezier value for the transition-timing-function property in order to give the clock a very lifelike ticking effect.

I’m not pretending to know how cubic-bezier works, but it definitely involves math (which I like) and it is pretty fun to play around with.  Here is a nice Cubic Bezier tool I found that provides a UI to experiment and obtain potential values for the CSS transition-timing-function property.

Lastly, Wes touches on ES6 template literals.  He used these in Episode 1 as well, and I suspect they will come into play a lot throughout the series.

What I Did Differently

I did some things differently than Wes because, why not? To me, this is what makes the experience fun and exciting.

1. Styling the hands and adding numbers

My first thought on Wes’s clock was that it was hard to tell the difference between the hour and minute hand, so I made the hands resemble traditional clocks a little more closely.

I also added numbers to my clock; although admittedly I only added the numbers that were in the easiest positions to calculate.

2. Continuous motion for all hands

I can remember sitting in elementary school, watching the minute hand slowly creep up to the next number as the second hand made its sweep around the clock face.

I noticed that Wes’s example makes the minute hand “leap” from one position to the next at the start of each minute, so I thought that continuous motion of the hands would be fun to do.

Basically, what I had to do was add the fraction seconds / 60 to the number of minutes when doing the degree calculation.

In order to make the hours hand update continuously, it’s essentially the same alteration.  The difference is, we need to take into account the progress of both the minutes hand and the seconds hand as they travel around the clock face.

3. Objectify the clock and the hands

As usual, I couldn’t resist the urge to experiment and turn the clock and the hands into something more object-oriented.  I like doing this with other people’s code, especially simple but inspiring code like Wes’s examples in this series.  This is more for practice than anything else, because I think it’s good to attempt refactoring as much as possible in order to work out and improve the different patterns and habits in my code.

Here is how my clock object turned out.  It’s much more code than necessary (see Wes’s original example).  However, for better or worse I think it was a good exercise to go through and was definitely good practice for me.

Did you experiment with refactoring the clock as well?  Do you think I am making things way too complicated by forcing an object-oriented approach where it’s not necessary?  Let me know in the comments!

Demo

If you haven’t already, check out the clock demo that I came up with based on Wes’s tutorial.  Overall this was a short, sweet, and power-packed video with lots of great little nuggets of CSS and JS.