how to create a clock using html css and javascript?

In this article, we look at how to create a clock using the Date object in javascript, we will learn to make the clock step by step knowing what each line of code does, if you are here for the code than copiable code is given at the end of an article.

HTML :

Let’s start with the markup, what we want here is a clock having a clock face with three hands as you can see in the video so to do that we are gonna need 4 divs as shown below,

CSS :

here comes the CSS part, we want the clock in the middle of our screen so to do that we will give flex property to the body by using align-item and justify-content it would be in the center.
now at the center we will have our clock which has position property set to relative and clockface having width and height to 100% with relative positioning with its three hands having some width and height. the O/P is shown below,

to make clock round we will give 50% border radius to the clock and to center the hand we will use the position property and make it absolute having with having top 50% it will make our clock look like this,

here the clock is created but it’s not working yet and the starting point of a clock looks different then a real one so let’s set clock’s hand to 12 o’clock by using transform rotate(90deg) property and transition of 0.05s.
now when it moves it will take that much time for a transition. as we know the hand will move from one direction so to do that we have to shift its origin(center) using transform-origin to 100% it will make the most right point of hand an origin. if we don’t do that clock’s hand will move in the clockwise direction but the origin will be the mid point of hands as given in the gif below.

JAVASCRIPT :

to move the hands we will use setinterval method with the interval of 1s or 1000ms which will call our function named as setDate in which we have defined the amount of rotation in degrees for each hand.
take an example of the second-hand which means the hand which shows us the seconds now let’s see how do we get the degree so as we know that the second-hand will move for 60 times and it has 360 degree to cover.
after moving 60 times it covers 360 degree so for 1 movement it will cover 6 degree we have converted this in general equation and added 90deg to the equation because we did rotate our hands to 90deg to put it in 12 o’clock so for each equation we have to add 90deg. the end product is shown below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>clock</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html {
        font-size: 10px;
      }

      body {
        display: flex;
        flex: 1;
        min-height: 100vh;
        align-items: center;
        font-size: 2rem;
        justify-content: center;
        background-color: white;
      }

      .clock {
        width: 30rem;
        height: 30rem;
        border: 20px solid black;
        border-radius: 50%;
        position: relative;
        padding: 2rem;
        box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), inset 0 0 0 3px #efefef,
          inset 0 0 10px black, 0 0 10px rgba(0, 0, 0, 0.2);
      }

      .clock-face {
        position: relative;
        width: 100%;
        height: 100%;
      }

      .hand {
        width: 50%;
        height: 6px;
        position: absolute;
        background-color: black;

        top: 50%;
        border-radius: 50%;
        transform-origin: 100%;

        transform: rotate(90deg);
        transition: all 0.05s;
        transition-timing-function: cubic-bezier(0.08, 2.29, 0.58, 1);
      }
    </style>
  </head>
  <body>
    <div class="clock">
      <div class="clock-face">
        <div class="hand hour-hand"></div>
        <div class="hand minute-hand"></div>
        <div class="hand second-hand"></div>
      </div>
    </div>

    <script>
      const secondhand = document.querySelector(".second-hand");
      const minutehand = document.querySelector(".minute-hand");
      const hourhand = document.querySelector(".hour-hand");
      function setDate() {
        const now = new Date();
        const seconds = now.getSeconds();
        const secondsdegrees = (seconds / 60) * 360 + 90;
        secondhand.style.transform = `rotate(${secondsdegrees}deg)`;
        const minute = now.getMinutes();
        const minutedegrees = (minute / 60) * 360 + 90;
        minutehand.style.transform = `rotate(${minutedegrees}deg)`;
        const hour = now.getHours();
        const hourdegrees = (hour / 12) * 360 + 90;
        hourhand.style.transform = `rotate(${hourdegrees}deg)`;
      }
      setInterval(setDate, 1000);
    </script>
  </body>
</html>

Leave a Comment

Your email address will not be published.

Scroll to Top