Analog Clock

by Saksham Malhotra

HTML

<div class="clockFace">
  <div class="hour"></div>
  <div class="minute"></div>
  <div class="second"></div>
  <div class="center"></div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
  background-color: #0a3d62;
}

.clockFace {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 200px;
  width: 200px;
  border: 5px solid #DDD;
  border-radius: 50%;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 10px;
  width: 10px;
  background-color: #fff;
  border-radius: 50%;
}

.hour,
.minute,
.second {
  position: absolute;
  background-color: #fff;
  border-radius: 10px;
  left: 50%;
  transform-origin: bottom;
  transform: translate(-50%, -50%) rotate(0deg);
}

.hour {
  height: 50px;
  width: 5px;
  top: calc(50% - 25px);
  transform: translate(-50%, -50%) rotate(0deg);
}

.minute {
  height: 70px;
  width: 3px;
  top: calc(50% - 35px);
  transform: translate(-50%, -50%) rotate(220deg);
}

.second {
  height: 90px;
  width: 1px;
  top: calc(50% - 45px);
  transform: translate(-50%, -50%) rotate(60deg);
}

JavaScript

$(function() {
  setInterval(function() {
    let currTime = new Date();
    $('.second').css('transform', 'translate(-50%, -50%) rotate(' + (currTime.getSeconds() * 6) + 'deg)');
    $('.minute').css('transform', 'translate(-50%, -50%) rotate(' + (currTime.getMinutes() * 6) + 'deg)');
    $('.hour').css('transform', 'translate(-50%, -50%) rotate(' +
      (currTime.getHours() % 12 * 30) + currTime.getMinutes() / 2 +
      'deg)')
  }, 1000);
})