DEV Community

loading...
Cover image for Analog Clock Using HTML,CSS & JS ⚡

Analog Clock Using HTML,CSS & JS ⚡

Rohan Kulkarni
|| Fresher at SITS, PUNE || Learning to Code || Exploring Open-Source & Cloud ||
・4 min read

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

Code ( GitHub Repository ) Website Preview

Aim: To Develop an Analog Clock Like 👇🏻

ezgif.com-gif-maker(2).gif

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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.circle-cropped.png

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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

Discussion (1)

Collapse
lukeshiru profile image
LUKESHIRU

Instead of doing all the arithmetics and setting the transform from JS, what you can do is use CSS custom properties and calc to do the vast majority directly from CSS, and using JS just to set the custom properties to the current hours, minutes and seconds.

Something like this in JS:

setInterval(() => {
    const currentDate = new Date();
    const documentStyle = document.documentElement.style;
    documentStyle.setProperty("--hour", `${currentDate.getHours()}`);
    documentStyle.setProperty("--minutes", `${currentDate.getMinutes()}`);
    documentStyle.setProperty("--seconds", `${currentDate.getSeconds()}`);
}, 1e3);
Enter fullscreen mode Exit fullscreen mode

And this in css:

.hour--hand {
    transform: rotate(calc(30deg * var(--hour, 0) + var(--minutes, 0) / 2));
}

.min--hand {
    transform: rotate(6deg * var(--minutes, 0));
}

.sec--hand {
    transform: rotate(6deg * var(--seconds, 0));
}
Enter fullscreen mode Exit fullscreen mode

Cheers!