Geek Logbook

Tech sea log book

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

Leave a Reply

Your email address will not be published. Required fields are marked *.

*
*
You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>