You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 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")
}
}
}
Activity
briankarmo commentedon Jun 22, 2022
interesting, im following along with this project atm, but i will def have a look as soon as ive completed
!!