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).
This was the fun part for me. Taking the
.hand class and adding in
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.