# Day 2 of JavaScript30

Solved the second challenge from Wes Bos “JavaScript30”.
I followed along with the video until he said stop and then continued to solve the rest, it was maybe a bit too easy after he showed the second-hand of the clock.

However, after finishing the clock I continued to refactor it and made it much more optimized than the original solution.
I choose to lift out the actual rotation of each and, setting the date only 1 time and then just add 1 second to the date for each interval instead of creating new date objects every second…

At last I fixed the minute bug by removing a class “trans” that adds the transition and adding it back in if it doesn’t exist.

Edited CSS

.hand {
width:50%;
height:6px;
background:black;
position: absolute;
top:50%;
transform-origin:100%;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
transition-timing-function: cubic-bezier(1, 0.01, 0.24, 1.28)
}
.trans {
transition: all 0.3s;
}

JS

const secondHand = document.querySelector('.second-hand');
const hourHand = document.querySelector('.hour-hand');
const minHand = document.querySelector('.min-hand');
var now = new Date();

//Make the clock tick by adding 1 second and set each clock hand to its current position
function rotateClock(){
now.setSeconds(now.getSeconds() + 1);
setHand(secondHand, now.getSeconds(), 60);
setHand(minHand, now.getMinutes(), 60);
setHand(hourHand, now.getHours(), 24);
}
//Accepts the clockhand, timing and the parts the clock-hand is divided by for full circle
function setHand(hand, timing, dividedBy ){
const degrees = ((timing / dividedBy) * 360) + 90;
//avoid transition bug when it changes minute
if(hand == secondHand && degrees == 90){
hand.classList.remove('trans');
}else if(hand == secondHand && hand.classList.contains('trans') !== true) {