diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index ee7eaefb1f..0b267f0825 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -62,13 +62,13 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.5s; + transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); } - - + diff --git a/02 - JS and CSS Clock/script.js b/02 - JS and CSS Clock/script.js new file mode 100644 index 0000000000..09ec507dea --- /dev/null +++ b/02 - JS and CSS Clock/script.js @@ -0,0 +1,25 @@ +const hourHand = document.querySelector('.hour-hand'); +const minuteHand = document.querySelector('.min-hand'); +const secondHand = document.querySelector('.second-hand'); + +const rotateHand = (degrees) => { + return `rotate(${degrees}deg)`; +}; + +const setDate = () => { + const now = new Date(); + const seconds = now.getSeconds(); + const minutes = now.getMinutes(); + const hours = now.getHours(); + + const secondDegrees = ((seconds / 60) * 360) + 90; + const minuteDegrees = ((minutes / 60) * 360) + 90; + const hourDegrees = ((hours / 12) * 360) + 90; + + secondHand.style.transform = rotateHand(secondDegrees); + minuteHand.style.transform = rotateHand(minuteDegrees); + hourHand.style.transform = rotateHand(hourDegrees); +}; + +setInterval(setDate, 1000); +setDate();