Analog Clock Using HTML,CSS & JS ⚡

Hello Everyone !! In this article, I will try to explain the code of the Analog clock which I made recently !!

Aim: To Develop an Analog Clock Like 👇🏻

HTML CODE

In this section, we are having simple code which consists of a div that has a title.
Below that, there is one section in which the whole clock div is located and inside the clock div, there is a separate div for each hand!

<div class="heading"> 
        <p>ANALOG CLOCK</p>
    </div>
    <section class="page--section"> 
        <div id="clock--box"> 
            <div id="hour--hand"></div> 
            <div id="min--hand"></div>
            <div id="sec--hand">
                <div class="round--dot"></div>
            </div>
        </div>
    </section>

CSS CODE

Let's see the design code part by part

This is CSS code for the body. This has given a flex display to the body so we can align the div to the center of the page. I have selected the background gradient from uigradients.com

body {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  background: #7f7fd5;
  background: -webkit-linear-gradient(to right, #91eae4, #86a8e7, #7f7fd5);
  background: linear-gradient(to right, #91eae4, #86a8e7, #7f7fd5);
}
p {
  margin: 0;
  padding: 0;
}

This is the code block for the heading and page section. I have added width and given display flex to the page section because I can align the clock div to center by flex methods.

.heading {
  text-align: center;
  font-size: 4vmax;
  font-weight: 900;
  color: white;
  text-shadow: 4px 4px black;
}

.page--section {
  width: 98vw;
  height: fit-content;
  margin-top: 5em;
  display: flex;
  justify-content: center;
  align-items: center;
}

This is code for the clock box which has a border-radius of 50% which makes the div box rounded. I have added an image in the background which is a normal image of a clock.

In this code, position relative plays the most important role this will help us to align the hands in relative to this div box. I have also added an animation effect that changes box-shadow you can have fun by changing the color and size of the shadow 😁

#clock--box {
  height: 30vw;
  width: 30vw;
  background-image: url(../images/circle-cropped.png);
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  border-radius: 50%;
  box-shadow: 4px 4px 32px 32px yellow;
  animation: box 4s infinite;
}

@keyframes box {
  0% {
    box-shadow: 2px 2px 10px 10px #fceabb;
  }
  25% {
    box-shadow: 3px 3px 16px 16px #f8b500;
  }
  50% {
    box-shadow: 4px 4px 32px 32px #f87000;
  }
  75% {
    box-shadow: 3px 3px 16px 16px #f8b500;
  }
  100% {
    box-shadow: 2px 2px 10px 10px #fceabb;
  }
}

In this code, I have made the position of the hour hand absolute so we can align them with respect to the top, bottom, left, the right position of the clock div.
We have to align all hands to the center with the help of these properties.
In this code, the transform-origin is set to the bottom that will help our clock hand to rotate from the bottom. By default, this property is set to center.

#hour--hand,
#min--hand,
#sec--hand {
  position: absolute;
  background-color: black;
  border-radius: 12px;
  transform-origin: bottom;
}

#hour--hand {
  height: 23%;
  width: 1.5%;
  left: 50%;
  top: 26%;
  border-radius: 75%;
}

#min--hand {
  height: 30%;
  width: 1%;
  left: 50.3%;
  top: 20%;
  border-radius: 200%;
}

#sec--hand {
  height: 30%;
  background-color: black;
  width: 0.2%;
  left: 50.5%;
  top: 20%;
  position: relative;
}

.round--dot {
  background-color: red;
  height: 1vmax;
  width: 1vmax;
  left: 50%;
  top: 20%;
  border-radius: 50%;
  display: block;
  opacity: 1;
  position: absolute;
  top: 0vmax;
  left: -0.4vmax;
}

This is CSS code for Small devices.

@media only screen and (max-width: 800px) {
  .page--section {
    padding: 0;
  }
  #clock--box {
    height: 60vw;
    width: 60vw;
    background-image: url(../images/circle-cropped.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    border-radius: 50%;
    box-shadow: 4px 4px 32px 32px yellow;
    animation: box 4s infinite;
  }
}

JS CODE

This is Javascript code in which we have Set Interval function which will repeat itself after every 1000 milliseconds ( 1 sec ). In the variable current date, we are storing the current date with help of the Date Object. By using methods on date object we will be taking current time in hours, minutes & seconds. Then we have defined rotation for each hand.

Hour hand rotation 
Total Hours 12 Rotation of 360 deg So in 1 hour 
It will rotate 30 deg but the minute hand also impact the rotation of the hour hand so if in 60 min it rotates 30 deg then in 1 min it will rotate half deg so we will add this to the total turn 

Minute hand rotation 
Total Min in Hour is 60 with rotation of 360 deg so per min will rotate 6 deg 

Second-Hand rotation 
Total sec in Min is 60 with rotation of 360 deg so per sec will rotate 6 deg

By using the style transform property we will rotate the hand as per time and will update it every sec.

setInterval(() => {
    let currentDate = new Date();
    let timeInHour = currentDate.getHours();
    let timeInMinutes = currentDate.getMinutes();
    let timeInSeconds = currentDate.getSeconds();
    let hourHandTurn = (30 * timeInHour + timeInMinutes / 2);
    let minuteHandTurn = 6 * timeInMinutes;
    let secondHandTurn = 6 * timeInSeconds;
    document.getElementById('sec--hand').style.transform = `rotate(${secondHandTurn}deg)`;
    document.getElementById('min--hand').style.transform = `rotate(${minuteHandTurn}deg)`;
    document.getElementById('hour--hand').style.transform = `rotate(${hourHandTurn}deg)`;
}, 1000);

Great we have created our own analog clock. I hope you enjoyed developing with me. Do tag me if this article helped you in creating your own analog clock and do share on socials !!

Wanna get connected with me 😄
Twitter
LinkedIn