Fixing the hands
As I see it, the function scale shout range between 0 and 12 and between 0 and 60. Comparing it to real clocks or just comparing degrees to hours the difference is clearly noticeable, especially the hours, since its divided in only 12 parts. Let me know what you think..:) Thanks for this great course btw, I'm learning a lot!
This commit is contained in:
parent
2c455d26f3
commit
d1aa35a806
@ -30,9 +30,9 @@ function setTime() {
|
|||||||
const seconds = time.getSeconds()
|
const seconds = time.getSeconds()
|
||||||
const ampm = hours >= 12 ? 'PM' : 'AM'
|
const ampm = hours >= 12 ? 'PM' : 'AM'
|
||||||
|
|
||||||
hourEl.style.transform = `translate(-50%, -100%) rotate(${scale(hoursForClock, 0, 11, 0, 360)}deg)`
|
hourEl.style.transform = `translate(-50%, -100%) rotate(${scale(hoursForClock, 0, 12, 0, 360)}deg)`
|
||||||
minuteEl.style.transform = `translate(-50%, -100%) rotate(${scale(minutes, 0, 59, 0, 360)}deg)`
|
minuteEl.style.transform = `translate(-50%, -100%) rotate(${scale(minutes, 0, 60, 0, 360)}deg)`
|
||||||
secondEl.style.transform = `translate(-50%, -100%) rotate(${scale(seconds, 0, 59, 0, 360)}deg)`
|
secondEl.style.transform = `translate(-50%, -100%) rotate(${scale(seconds, 0, 60, 0, 360)}deg)`
|
||||||
|
|
||||||
timeEl.innerHTML = `${hoursForClock}:${minutes < 10 ? `0${minutes}` : minutes} ${ampm}`
|
timeEl.innerHTML = `${hoursForClock}:${minutes < 10 ? `0${minutes}` : minutes} ${ampm}`
|
||||||
dateEl.innerHTML = `${days[day]}, ${months[month]} <span class="circle">${date}</span>`
|
dateEl.innerHTML = `${days[day]}, ${months[month]} <span class="circle">${date}</span>`
|
||||||
|
Loading…
Reference in New Issue
Block a user