Adjusting how the hands work
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()''
interesting, im following along with this project atm, but i will def have a look as soon as ive completed !!