JS30 Challenge Day2 - Clock

Day 2

Github link

This exercise refreshed my memory about the cover parameter for background-size.

background-size: cover;

This fits the image in a way that covers the entire window with that image, while some parts of the image might go out of the window.

rem unit

This is a relative unit which multiplies the font-size of body element with the value specified.

So if the body font size is 10px, 2rem would equal 20px.

transform-origin:100%; //moves the origin of rotation along x-axis

So a 100% transform-origin would shift the origin to the rightmost end of the element (in our case, hand).

In the original exercise, all the hands are the same length and color

I decided to make the hands different colors and lengths

From longest to shortest, I have placed the hands on top of one another in respective order.

Because the dimensions of the hands had to be different, and given that the initial hand we draw is in horizontal position,

I gave 50% width to the second hand which makes the hand touch the center of the dial.

In minute hand however, I made the width 40% and what we get is a hand that does not touch the center of the dial. Hence we need to give it a 10% margin.

Similarly for hour hand, 30% width requires 20% margin.

The logic is that the addition of width of the hand and its left margin should be 50%.

Then, I learned about transition-timing-function

The normal values are ease-in, ease-out, ease-in-out

But we can customize the transition using a cubic bezier curve, like so:

transition-timing-function: cubic-bezier(0.1,2,7,0.58,1);

JS

The setInterval function runs a function passed to it on every interval specified

setInterval(functionName, milliseconds)

We have used it to call setDate function after every second. 

setDate is the function in which all the hours, minutes and seconds are retrieved and degrees for the hands are calculated and applied

For the final extra bit, I was able to remove the glitch that occurs at every 0th second.

When any hand transitions from final state to initial state, because the number of degrees reduce, the hand makes a (reverse) anti-clockwise motion to reach the 0 degree mark.

Because the transition is set at 0.05s, a slight hint of this animation is visible.

To bypass this, just change the transition to ‘all 0s’ using javascript.

I created a class called .fast

It contains the following line of code

transition: all 0s;

At every 0, I add the class and at every 1, I remove the class thus returning the hand to the cubic bezier curve at 0.05s

if(seconds===0)

secondHand.classList.add(‘fast’);

if(seconds===1)

secondHand.classList.remove(‘fast’);

And voila! All done.