JavaScript30 episode2: CSS+JS Clock

OK, OK, episode2… Go!

This time the goal is to make an analog clock tick.

clock.gif

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!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s