JavaScript30 — Day 2 Study Notes

https://javascript30.com/

The Clock project involved working with CSS transitions and using the JavaScript Date object.

First, to set the clock hands to 12 o’clock and set the timing function so the hands will move.

transform: rotate(90deg);
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);

Accessing the Date object and converting seconds, minutes, and hours to corresponding clock hand movements.

function setDate(){
const now = new Date();
const seconds = now.getSeconds();
const secondsDegrees = ((seconds/60)*360) + 90; 
/*converts seconds to second hand movement in degrees. Need to add 90 to account for offset of clock hands*/
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)`;
}

A neat little project.

View my notes as I complete JavaScript 30 by Wes Bos.

JavaScript 30–01 Drum Kit

JavaScript 30- Day 8 Study Notes