JavaScript 30 — Day 2 & 3

While I didn’t take Sunday off from coding I didn’t end up writing anything for the day’s challenge.

In any case it was more or less uneventful.

Challenge # 2 — JS and CSS Clock

Simple clock using CSS and JS.

Essentially just moving the hands of a clock using JS to change the rotation transform of each hand.

The crux of the JS was to parse out the different parts of a Date object (seconds, minutes, hours) and set a rotation in degrees based on the value.

Some simple math makes it pretty straight forward.

Oddities

One thing to note is that if you have transitions for your hands, when the seconds, minutes, or hours, go past the max and back around to 0 (seconds 59 -> 0) you’ll see some odd flickering of the animations since it is going all the way around rather than just ticking one more second forward.

You can get around that by disabling the transitions just at that point or the more simple but less pleasing disabling the transitions all together.

Challenge # 3 — CSS Variables

A fairly simple but cool feature to use range input sliders and some quick JS to manipulate an image.

A simple set of tools and the JS to live update the image based on user input.

This was fun and a great learning experience for those who have not used CSS variables before.

While I happened to have already come across CSS variables (shout out to Kevin Powell always using them) and how to manipulate them, it was great practice and a reminder on how useful they can be.