Final product for day 2 clock challenge

Day 2: CSS + JS Clock

I'm pumped that a clock challenge was part of #JavaScript30. The final product is the seconds, minute and hour hands move to reflect the current time.

What did I learn?

There's a cubic bezier editor in Chrome dev tools! Who knew?! I didn't.

When you open your dev tools, go to or add the transition-timing-function CSS property.

CSS transition-timing-function

Then click on the purple icon and you will see the cubic bezier editor to make changes.

Chrome dev tool cubic bezier editor

Lastly, I hadn't used transform-origin before, which was used to identify the origin of the hour, minute and second hands in the center of clock. I love how I'm learning new CSS properties in addition to JS.

Interested in participating in #JavaScript30?

Register here and learn at your own speed.