webdevsimplified / javascript-clock Goto Github PK

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()''

So, I downloaded all 3 files to a new folder. Then I opened index.html, and all I see is a column of number 1-10. There's no js clock. What am I doing wrong here? I'm pretty sure the css file and the .js file are being linked to properly in the html file.

Thanks!

All the numbers starting with 6 are backwards can I get help ?

Idk why its showing a wrong hour!