Analog Clock

Hi guys 😊,

In this section, the aim is to provide a comprehensive explanation on the creation of a small code that not only helps in understanding how to organize the rotation of clock hands, but also how to use JavaScript to accurately calculate seconds, minutes, and hours.

The significance of this code cannot be overemphasized as it provides a basic understanding of the principles and concepts that underlie the workings of clocks. By breaking down these principles into simple and easy-to-understand code snippets, even beginners can gain a solid foundation in the art of clock-making.

Through this code, learners can gain an understanding of how to organize the rotation of clock hands using JavaScript, as well as how to calculate the exact number of seconds, minutes, and hours that have elapsed. The code is designed to be simple and intuitive, making it easy for learners to grasp the concepts and principles involved.

Overall, this section provides a highly informative and practical guide to creating clock mechanisms using JavaScript and is an essential resource for anyone looking to gain an in-depth understanding of clock-making principles.

Like we have css -

.clock .number {
  --rotation: 0;
  position: absolute;
  height: 340px;
  text-align: center;
  transform: rotate(var(--rotation));
}

.clock #num-1 {
  --rotation: 30deg;
}
.clock #num-2 {
  --rotation: 60deg;
}
.clock #num-3 {
  --rotation: 90deg;
}
.clock #num-4 {
  --rotation: 120deg;
}
.clock #num-5 {
  --rotation: 150deg;
}
.clock #num-6 {
  --rotation: 180deg;
}
.clock #num-7 {
  --rotation: 210deg;
}
.clock #num-8 {
  --rotation: 240deg;
}
.clock #num-9 {
  --rotation: 270deg;
}
.clock #num-10 {
  --rotation: 300deg;
}
.clock #num-11 {
  --rotation: 330deg;
}

Here made it to spread numbers properly in all around the circle with a gap of 30deg.

After that added hands with rotation code in setInterval of JavaScript web API.

 const id = setInterval(() => {
      const newDate = new Date();
      const secondsRatio = newDate.getSeconds() / 60;
      const minutesRatio = (secondsRatio + newDate.getMinutes()) / 60;
      const hoursRatio = (minutesRatio + newDate.getHours()) / 12;

      hourHandRef?.current?.style.setProperty(
        '--rotation', 
        hoursRatio * 360
      );
      minuteHandRef?.current?.style.setProperty(
        '--rotation',
        minutesRatio * 360
      );
      secondHandRef?.current?.style.setProperty(
        '--rotation',
        secondsRatio * 360
      );
    }, 1000);

To accurately and effectively determine the position of a hand on a clock or other circular instrument, it is crucial to calculate the appropriate ratios. By understanding these ratios, we can determine how many degrees the hand needs to rotate to indicate a specific time or measurement. This not only ensures accuracy but also allows for consistency in readings and ease of use for both professionals and amateurs alike. Therefore, the calculation of ratios plays a fundamental role in accurately reading and interpreting the position of a hand on a circular instrument.

The Final Output is in this link and also the codebase link which will redirect you to Stackblitz.