I haven’t exactly been able to hit each exercise each day, but I’ll post whenever I do get a chance anyway.

In the Day 2 Javascript 30 exercise, we implement a clock by converting data from a new Date object. The math is pretty straight-forward, converting times to degrees and then using css transforms to rotate the hands. As with Day 1, I learned about document.querySelector and document.querySelectorAll. I’m not sure why I hadn’t run into this before now, but they’re great. I used them to extract the lesson titles from the Wes Bos Courses I’ve signed up for and then dump them into a Trello checklist.

There’s a couple of things I did on this exercise beyond what Wes goes into on the videos. First, I wanted to have different colors for the different hands. This was really simple as expected. Since there were already individual classes on each hand, I just added a CSS background color directive. I also wanted to change the hands to be different sizes. Since the hands are divs I used the width CSS directive. Of course with just this change, the point of rotation is moved to the left. I found that if I made sure to add a CSS left directive to move the div to the right, then the rotation point would go back to the center of the clock. Since I used percent for the width, I found if I make sure the value of width and left add to 50% then everything worked out great.

There is one more “gotcha” that Wes mentioned in the video. That is once the seconds get back to 0 (or the minutes or hours get back to the top) then the animation causes the hand to reverse counter-clockwise all the way back to 0 instead of just ticking forward. I made an adjustment to the code so that when the second hand is moving to point straight up, I turn off the CSS transition, change the value to 0 and then turn it back on. I haven’t yet done this same treatment to the other hands, so there’s still a bit of jumping around, and I think I don’t have the little “jog” animation working just at the top now. One other possibility would be to just keep tracking seconds upwards forever instead of resetting back to 0. I may try that some time.

As far as the biggest takeaway/learning point from this exercise, I didn’t know that you could provide bezier values to make custom easing functions and I also didn’t know there’s a built in bezier curve editor (graphical!) in the browser. That was pretty cool. With that I was able to make the second hand look more like a physical clock where the second hand “ticks” past the spot just a bit and bounces back.

For stuff I’ve left or will do more if I revisit, I would probably update the functions the calculate the angles. The angles for the hour hand should also take the minute and second values into account and the minute value should take the second value into account. It currently doesn’t do that. I’d also add similar logic to handle the animations when the minute and hour hands get back to the top as what the second hand has.

Looking forward to day 3.