Description
So I took WebDevSimplified's code and tried to tinker it so that on the final output, the hands of the clock would move like how a normal clock moves.
I changed the CSS and JS. With the JS, I got rid of three variables and based fixing the rotations around only having the second hand moving initially.
What I came up with doesn't work, but hopefully someone can look at what I wrote and debug it.
``
const hourHand = document.querySelector('[data-hour-hand]')
const minuteHand = document.querySelector('[data-minute-hand]')
const secondHand = document.querySelector('[data-second-hand]')
const begin = document.getElementById('top')
const leverage = minuteHand.style.transform
const constant = hourHand.style.transform
const manos = document.getElementsByClassName('.number').innerText // get all the numbers on the clock and their inner text
const typeclock = Array.from(manos) // create an array out of all the numbers collected
function setMinuteHand () {
while (secondHand.style.transform === 'rotate(360deg)') {
minuteHand.style.position = begin.style.position // the minute hand starts at 12
if (secondHand.style.position === begin.style.position) { // Once the second hand hits "12" again...
leverage.style.transform = 'rotateZ(30deg)' // the minute hand should shift 30 degrees right
}
for (var i = 0; i < typeclock.length; i++) {
minuteHand.style.position = typeclock[i]++ // Buffer in case the leverage statement doesn't work (we shift from "12" to "1")
}
}
}
setMinuteHand()
function setHourHand () {
while (secondHand.style.transform === 'rotate(360deg)') {
hourHand.style.position = begin.style.position // the hour hand starts at 12
if (secondHand.style.position === begin.style.position) { // Once the second hand hits "12" again...
constant.style.transform = 'rotateZ(30deg)'// the hour hand should shift 30 degrees right
}
for (var i = 0; i < typeclock.length; i++) {
hourHand.style.position = typeclock[i]++ // Buffer in case the statement with constant above doesn't work (we shift from "12" to "1")
}
}
}
setHourHand()''