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.

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.