Tick Tock

Following Wes Bos’s tutorials on vanilla javascript is great and he’s such a good teacher. He gave a nice run down of how you can use ES6’s template litearals, CSS animations and math to create a functioning clock.

What I learned

More emphasis on querySelector having it grab the class of each hand of the clock to manipulate it like so:

const hourHand = document.querySelector('.hour-hand');

Once you have this (and minutes, seconds) you can then apply the math to each hand to rotate on a second, minute or hour (sadly math is not my strong suit so I had to really rely on the internet on how to make stuff rotate according to time).

CSS animations

This was the fun part for me. Taking the .hand class and adding in transform and transition I was able to get it to rotate not only around in the center (like a wagon wheel) but at a point of origin where I wanted. (Usually ‘transform-origin’ is at 50% and you have to set it at 100%).

Playing with the cubic-bezier in transition-timing-function is particularly gratifying when playing with it in the console log.

  .hand {
      width:50%;
      height:6px;
      background:black;
      position: absolute;
      top:50%;
      transform-origin: 100%;
      transform: rotate(90deg);
      transition: all 0.05s;
      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
    }
    

The Result

Here is the code for my clock interface. I didn’t focus much on style and left it more for Javascript (will get to more styled and well designe stuff, later.)

See the Pen Clock Face Javascript by scott thigpen (@sthig) on CodePen.