50projectsIn50days – Day 19: Theme clock
The clock container has several classes that referes to the clock elements: needles, hours, minutes and seconds:
<div class="clock-container">
<div class="clock">
<div class="needle hour"></div>
<div class="needle minute"></div>
<div class="needle second"></div>
<div class="center-point"></div>
</div>
<div class="time"></div>
<div class="date"></div>
</div>
We even can find a button wich produce a Dark mode in the clock:
<button class="toggle">Dark mode</button>
But let focus in the clock. Because the interesting part of this idea is that the remarkable difficulty to think how to do it and the straightforward we can understand is the code when we see at the end of the process:
function setTime() {
const time = new Date();
const month = time.getMonth()
const day = time.getDay()
const date = time.getDate()
const hours = time.getHours()
const hoursForClock = hours % 12
const minutes = time.getMinutes()
const seconds = time.getSeconds()
const ampm = hours >= 12 ? 'PM' : 'AM'
hourEl.style.transform = `translate(-50%, -100%) rotate(${scale(hoursForClock, 0, 11, 0, 360)}deg)`
minuteEl.style.transform = `translate(-50%, -100%) rotate(${scale(minutes, 0, 59, 0, 360)}deg)`
secondEl.style.transform = `translate(-50%, -100%) rotate(${scale(seconds, 0, 59, 0, 360)}deg)`
timeEl.innerHTML = `${hoursForClock}:${minutes < 10 ? `0${minutes}`: minutes} ${ampm}`
dateEl.innerHTML = `${days[day]}. ${months[month]} <span class="circle">${date}<span>`
}
The function set time produce the hour and translate the time to the proper angle to the needle. The scale is well known for a solution given in this stackoverflow thread: Scaling between two number ranges
Nice and beautiful.
You can see the code in this GitHub Repository: 19.theme_clock and the demo of the project is here: Theme Clock