JS Clock

#javascript30

by polaszk

HTML

<div class="wall">
  <div class="clock">
    <div class="hand seconds"></div>
    <div class="hand minutes"></div>
    <div class="hand hours"></div>
  </div>
</div>

CSS

.wall {
  background-image: url('https://images.unsplash.com/photo-1526376043067-5af36c35cd6c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=aed342eea1c8593563be90e10c423dfe&auto=format&fit=crop&w=1339&q=80');
  background-size: cover;
  width: 100%;
  height: 600px;
  display: inline-block;
}

.clock {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 8px solid black;
  margin: 30px auto;
  box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.25);
  background-color: rgba(0, 0, 0, 0.04);
  position: relative;
}

.hand {
  top: 3px;
  right: 50%;
  box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);
  position: absolute;
  transform-origin: bottom center;
}

.hand.minutes,
.hand.seconds {
  height: calc(50% - 3px);
  background-color: black;
}

.hand.seconds {
  width: 1px;
}

.hand.minutes {
  width: 3px;
}

.hand.hours {
  top: 20%;
  width: 4px;
  height: 30%;
  background-color: red;
}

JavaScript

const hands = document.querySelectorAll('.hand');

window.setInterval(function() {
  const date = new Date();
  const time = [date.getSeconds(), date.getMinutes(), date.getHours()];

  for (const [index, hand] of hands.entries()) {
    if (index === 2) {
      hand.style.transform = `rotate(${time[index] / 12 * 360}deg)`;
    } else {
      hand.style.transform = `rotate(${time[index] / 60 * 360}deg)`;
    }
  }
}, 1000);