OK, OK, episode2… Go!
This time the goal is to make an analog clock tick.
Again, most of the HTML+CSS is there provided by Wes and I only need to add the “ticking” JS code. The “trick” is to keep applying a CSS transformation to the hands by setting the rotation angle.
What I learned in this course:
- CSS
transform-origin
to position the point where the CSS transformation will apply - CSS
transition-timing-function
for how the transition should play out - The cubic bezier editor in Chrome’s developer tools! Look at that!
- JS’s
element.style.transform
is not a function so, no.transform(rotate(...))
. I intuitively tried to use it as a function, not sure why. - and oh, yeah, forgot to mention the backticks in episode 1. Cool way to embed variables in strings and have them be expanded!
K, this was a quick one but fun anyway. Stay tuned!