Back with an update for Day 2 of the JavaScript 30 course!

Overview

Today’s lesson focused on a simple clock using JavaScript to get the current time and css to transform the hands.

What I Learned

I don’t have a list of things for you today like I did yesterday. It was a fairly straightforward assignment. I did learn that when adding style.transform to the element, it’ll overwrite the transform properties you set in the css. It was an easy fix since I only had one transform in the css for the individual clock hands to make them distinct from each other, so I added those to the end of the dynamic transform.

Biggest Challenge

The biggest challenge for me today was playing around with how to get the hour hand to display more accurately between numbers on the clock. When I first did the math, the hand was at 3, and then only moved to 4 when it turned 4:00. That was more jarring than I wanted it to be, so I had to figure out how to make it a better ratio.

Future Iterations

The hour adjustment I made mentioned above is not all that pleasant still. In the future, I want to transform the clock to be super smooth instead of more like a tick that I have now. Not sure what challenges that will take, to be honest.

One other idea I had would be to create one of those clock walls with all the different time zones where my friends live scattered about the world.

Conclusion

Today was another fun one that took less than half of my lunch to complete. It was a quick, easy win that reinforced concepts I haven’t touched in awhile. I don’t use transform with css all that often, but I like the strong possibilities out there for uses.