## DEV Community is a community of 893,678 amazing developers

We're a place where coders share, stay up-to-date and grow their careers. KUMAR HARSH

Posted on • Updated on

# JS+CSS Clock Project demo

In lesson 2 of JavaScript30 I made a real time clock with seconds, minutes and hour hand. This lesson focused mainly on CSS and JS. CSS styles were used to make the clock look like a real clock using transition and transform properties and ticking effect was also added while JavaScript was used to fetch the current time and to rotate the hands of the clock in accordance with the current time.

### Things I Learned

#### CSS

-first thing we did was to change the axis of rotation which by default is the middle i.e 50%, so we'll change it to 100% along the x-axis so that so that the pivot is moved to the very right hand side (the origin).

`````` transform-origin: 100%;
``````

-divs are block by default from right to left (horizontal) due to which the hands were pointing to 9'o clock by default so we'll rotate the entire thing by 90deg so that the hands are set to 12'o clock, we'll use rotate for this.

``````transform: rotate(90deg);
``````

-by default the hands move automatically so to add an effect of moving hands we use transition property, we go a step further to add a ticking
we add cubic bezier to the transition timing function.

``````transition: all 0.05s;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
``````

#### JavaScript

-we create a setDate function and we make it run every second using setInterval.

``````setInterval(setDate, 1000);
``````

-now we need to convert seconds (similar for minutes and hours) to degrees for which we convert it into something that is base 100 that is 0%->0deg and 100%->360deg.We do this by dividing the seconds by 60 which gives us the percentage and then we multiply it by 360 to convert it to degrees. But this will not work correctly because of the rotate 90deg we added in the beginning and to compensate for this lag we'll add a 90deg to the calculated result.Then we use JS to give the second hand the calculated rotation.

``````const now = new Date();
const seconds = now.getSeconds();
const secondsDegrees = (seconds / 60) * 360 + 90;
secondHand.style.transform = `rotate(\${secondsDegrees}deg)`;
``````

The complete JS code looks like this

``````<script>
const secondHand = document.querySelector(".second-hand");
const minuteHand = document.querySelector(".min-hand");
const hourHand = document.querySelector(".hour-hand");

function setDate() {
const now = new Date();

const seconds = now.getSeconds();
const secondsDegrees = (seconds / 60) * 360 + 90;
secondHand.style.transform = `rotate(\${secondsDegrees}deg)`;

const minutes = now.getMinutes();
const minutesDegrees = (minutes / 60) * 360 + 90;
minuteHand.style.transform = `rotate(\${minutesDegrees}deg)`;

const hours = now.getHours();
const hoursDegrees = (hours / 12) * 360 + 90;
hourHand.style.transform = `rotate(\${hoursDegrees}deg)`;
}

setInterval(setDate, 1000);
</script>
``````

This code however has one issue. 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 (they jitter and rotate backwards because they're going from 400 something degrees to 90).
Because the transition is set at 0.05s, a slight hint of this animation is visible.
So we need to do something so that the hands move forward and not backward. We can do this in 2 ways:

1) tally the amount of degrees so that it keeps counting
2) take away the transition temporarily using JS and then remove it afterwards using some if statements inside the setDate function.

I'll use the second method.

-we'll change the transition to ‘all 0s’ using javascript.I created a class called .bypass
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)
if(seconds===1)
secondHand.classList.remove(‘bypass’);
``````

This fixed the issue.

### Conclusion

Overall it was a very fun lesson which helped me better understand CSS transitions and transforms.

GitHub repo:

## Discussion (20) KUMAR HARSH

edit where ? i can see you are a aot fan but not sure what are you tring to ask. Russell

I think you should add a link to the JS 30 site in your article. And add some attribution for the author. Just incase someone who has never heard of it does not mistake this for original content.

javascript30.com/

Learning in public is a great way to solidify your knowledge, keep after it. KUMAR HARSH

Thats a great idea, I'll add the link to the website in all the posts from now as well as the old ones. KUMAR HARSH

How so?? I am currently following his videos and doing things accordingly. KUMAR HARSH

Is there a link that you can provide me, It would be very helpful fir me. Thanks in advance. 