clock.jade

extends base

block vars
  - var title = 'JS Clock'

block styles
  link(rel="stylesheet" type="text/css" href="styles/clock.css")

block body

  .clock
    .clock-face
      .hand.hour-hand
      .hand.minute-hand
      .hand.second-hand

  script(type="text/javascript").
    const $secondHand = document.querySelector('.second-hand')
    const $minuteHand = document.querySelector('.minute-hand')
    const $hourHand = document.querySelector('.hour-hand')

    setInterval(() => {
      const now = new Date()

      const seconds = now.getSeconds()
      const minutes = now.getMinutes()
      const hours = now.getHours()

      const secondsDeg = ((seconds / 60) * 360) + 90
      const minutesDeg = ((minutes / 60) * 360) + 90
      const hoursDeg = ((hours / 12) * 360) + 90

      $secondHand.style.transform = `rotate(${secondsDeg}deg)`
      $minuteHand.style.transform = `rotate(${minutesDeg}deg)`
      $hourHand.style.transform = `rotate(${hoursDeg}deg)`

      if (secondsDeg == 438)
        $secondHand.classList.add('notransition')
      else if (secondsDeg == 102)
        $secondHand.classList.remove('notransition')
    }, 1000)