Analog Clock

analog-clock.markdown

Analog Clock

A Pen by K.Mesbah on CodePen.

License.

index.html

<div class="clock">
  <div class="inside">
    <span class="span-1"></span>
    <span class="span-2"></span>
    <span class="span-3"></span>
    <span class="span-4"></span>
    <span class="span-5"></span>
    <span class="span-6"></span>
    <span class="span-7"></span>
    <span class="span-8"></span>
    <span class="span-9"></span>
    <span class="span-10"></span>
    <span class="span-11"></span>
    <span class="span-12"></span>
    <span class="span-13"></span>
    <span class="span-14"></span>
    <span class="span-15"></span>
    <span class="span-16"></span>
    <span class="span-17"></span>
    <span class="span-18"></span>
    <span class="span-19"></span>
    <span class="span-20"></span>
    <span class="span-21"></span>
    <span class="span-22"></span>
    <span class="span-23"></span>
    <span class="span-24"></span>
    <span class="span-25"></span>
    <span class="span-26"></span>
    <span class="span-27"></span>
    <span class="span-28"></span>
    <span class="span-29"></span>
    <span class="span-30"></span>
    <span class="span-31"></span>
    <span class="span-32"></span>
    <span class="span-33"></span>
    <span class="span-34"></span>
    <span class="span-35"></span>
    <span class="span-36"></span>
    <span class="span-37"></span>
    <span class="span-38"></span>
    <span class="span-39"></span>
    <span class="span-40"></span>
    <span class="span-41"></span>
    <span class="span-42"></span>
    <span class="span-43"></span>
    <span class="span-44"></span>
    <span class="span-45"></span>
    <span class="span-46"></span>
    <span class="span-47"></span>
    <span class="span-48"></span>
    <span class="span-49"></span>
    <span class="span-50"></span>
    <span class="span-51"></span>
    <span class="span-52"></span>
    <span class="span-53"></span>
    <span class="span-54"></span>
    <span class="span-55"></span>
    <span class="span-56"></span>
    <span class="span-57"></span>
    <span class="span-58"></span>
    <span class="span-59"></span>
    <span class="span-0"></span>
  </div>
  <div class="hand" id="seconds-hand"></div>
  <div class="hand" id="minutes-hand"></div>
  <div class="hand" id="hours-hand"></div>
  <div class="center"></div>
</div>

script.js

const secondsHand = document.getElementById(`seconds-hand`);
const minutesHand = document.getElementById(`minutes-hand`);
const hoursHand = document.getElementById(`hours-hand`);
const updateTime = () => {
  const d = new Date();
  let milliSecondsHandRotation = d.getMilliseconds() / 1000;
  let secondsHandRotation = (milliSecondsHandRotation + d.getSeconds()) / 60;
  let minutesHandRotation = (secondsHandRotation + d.getMinutes()) / 60;
  let hoursHandRotation = (minutesHandRotation + d.getHours()) / 12;
  secondsHand.style.transform = `rotate(${secondsHandRotation * 360}deg)`;
  minutesHand.style.transform = `rotate(${minutesHandRotation * 360}deg)`;
  hoursHand.style.transform = `rotate(${hoursHandRotation * 360}deg)`;
};
updateTime();
setInterval(updateTime, 1);

style.scss

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
body {
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #333;
}
.clock {
  width: 240px;
  height: 240px;
  background-color: silver;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 25px;
}
.inside {
  border-radius: 50%;
  background-color: #fff;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
span {
  position: absolute;
  width: 2px;
  background-color: #161616;
  transform-origin: 0 90px;
  top: 5px;
}
@for $i from 0 to 60 {
  .span-#{$i} {
    transform: rotate($i * 6deg);
    height: 5px;
    @if ($i % 5 == 0) {
      height: 20px;
      counter-increment: num;
      &::after {
        position: absolute;
        content: counter(num);
        width: 20px;
        height: 20px;
        display: grid;
        place-content: center;
        top: -25px;
        left: -10px;
        transform: rotate(-$i * 6deg) rotate(0); // wonderful trick
      }
    }
  }
}
.hand {
  position: absolute;
  border-radius: 50px;
  background: linear-gradient(#000 51%, 0, transparent);
}
.center {
  position: absolute;
  padding: 2px;
  border-radius: 50%;
  background: #000;
}
#seconds-hand {
  height: 150px;
  width: 1px;
}
#minutes-hand {
  height: 100px;
  width: 2px;
}
#hours-hand {
  width: 3px;
  height: 75px;
}