How to make beautiful Clock in JavaScript

February 12, 2023

Learn How to Build a Clock using pure HTML, CSS and JavaScript

today I'm going to teach you how to build a beautiful analog clock using HTML, CSS and JavaScript.

Important Formula:

We can get the time using JavaScript. And the hands of the clock rotates in degrees.
so we have to convert the time into degrees for each hands(hour hand, minute hand, seconds hand) of the clock.

(i) Convert hours to degrees:

The hand of an hour clock rotates 360 degrees(1 round) for 12 hours.
12 hours = 360 degree
So how many degrees will rotate in 1 hours?
hour = 360/12 degree
hour = 30 degree
how many degrees will rotate for h hours.

hour = 30*h (h means hour)

The hour hand also depends on the minute hand so we need to time that as well.

we already calculated hour = 30 degree for hour hand.
60 min = 30 degree
1 min = 30/60 => (1/2) degree
How many degrees will rotate for m minutes.
min = (1/2)*m => (m/2)
Hour Rotation = hours + minutes

Hour Rotation Formula = 30*h + m/2

(ii) Convert Minutes to degrees:

The hand of an minutes clock rotates 360 degrees(1 round) for 60 minutes.
60 min = 360 degree
1 min = 360/60 => 6 degree
how many degrees will rotate for m minutes.
min = 6*m (m for minutes)

Minutes Formula = 6*m

Note: The minute hand also depends on the seconds hand but we don't need to calculate for seconds because we will get minor difference.

(iii) Convert Seconds to degrees:

The hand of an seconds clock rotates 360 degrees(1 round) for 60 seconds.
60 seconds = 360 degree
1 seconds = 360/60 => 6 degree
how many degrees will rotate for s seconds.
seconds = 6*s

Seconds Formula = 6*s

Step 1) Add HTML:

Example

<div class="container">
   <div class="clock">
      <div class="hour" id="hour"></div>
      <div class="minute" id="minute"></div>
      <div class="second" id="second"></div>
      <div class="numbers">
         <div class="number number1"><span>1</span></div>
         <div class="number number2"><span>2</span></div>
         <div class="number number3"><span>3</span></div>
         <div class="number number4"><span>4</span></div>
         <div class="number number5"><span>5</span></div>
         <div class="number number6"><span>6</span></div>
         <div class="number number7"><span>7</span></div>
         <div class="number number8"><span>8</span></div>
         <div class="number number9"><span>9</span></div>
         <div class="number number10"><span>10</span></div>
         <div class="number number11"><span>11</span></div>
         <div class="number number12"><span>12</span></div>
      </div>
   </div>
</div>

Step 2) Add CSS:

Example

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	
}
 *{
     box-sizing: border-box;
}
 body{
     font-family: 'Anton', sans-serif;
     font-weight: 500;
}
 .container{
     background: #4f8dff;
     height: 100vh;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
}
 .clock{
     height: 70vmin;
     width: 70vmin;
     background: #001926;
     border-radius: 50%;
     position: relative;
     border: 30px solid #0c2633;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .numbers{
     position: absolute;
     top: 20px;
     bottom: 20px;
     right: 20px;
     left: 20px;
     display: flex;
     justify-content: center;
}
 .number span{
    position: absolute;
}
 .number{
     position: absolute;
     font-size: 2.5rem;
     color: #fff;
     height: 100%;
     width: 100%;
     display: flex;
     justify-content: center;
}
 .number1{
     transform: rotate(30deg);
}
 .number2{
     transform: rotate(60deg);
}
 .number3{
     transform: rotate(90deg);
}
 .number4{
     transform: rotate(120deg);
}
 .number5{
     transform: rotate(150deg);
}
 .number6{
     transform: rotate(180deg);
}
 .number7{
     transform: rotate(210deg);
}
 .number8{
     transform: rotate(240deg);
}
 .number9{
     transform: rotate(270deg);
}
 .number10{
     transform: rotate(300deg);
}
 .number11{
     transform: rotate(330deg);
}
 .number1 span{
     transform: rotate(-30deg);
}
 .number2 span{
     transform: rotate(-60deg);
}
 .number3 span{
     transform: rotate(-90deg);
}
 .number4 span{
     transform: rotate(-120deg);
}
 .number5 span{
     transform: rotate(-150deg);
}
 .number6 span{
     transform: rotate(-180deg);
}
 .number7 span{
     transform: rotate(-210deg);
}
 .number8 span{
     transform: rotate(-240deg);
}
 .number9 span{
     transform: rotate(-270deg);
}
 .number10 span{
     transform: rotate(-300deg);
}
 .number11 span{
     transform: rotate(-330deg);
}
 .clock::before{
     content: '';
     position: absolute;
     height: 10px;
     width: 10px;
     border: 7px solid #fff;
     border-radius: 50%;
     z-index: 50;
     background: #001926;
}
 .hour,.minute,.second{
     position: absolute;
     display: flex;
     justify-content: center;
     transform-origin: bottom;
}
 .hour{
     top: 24%;
     height: 26%;
     width: 10px;
     background: #ff105e;
     border-radius: 5px 5px 0 0;
     transform: rotate(60deg);
}
 .minute{
     top: 20%;
     height: 30%;
     width: 6px;
     background: #fff;
     border-radius: 5px 5px 0 0;
     transform: rotate(180deg);
}
 .second{
     top: 16%;
     height: 34%;
     width: 2px;
     background: #236aee;
     border-radius: 5px 5px 0 0;
     transform: rotate(270deg);
     z-index: 51;
}
 .second::before{
     content: '';
     position: absolute;
     width: 4px;
     height: 25px;
     background: #236aee;
     display: flex;
     justify-content: center;
     align-items: center;
     bottom: -25px;
}
 @media (max-width:600px) {
     .number{
         font-size: 1.5rem;
    }
     .clock{
         border: 20px solid #0c2633;
    }
}

Try this code

Step 3) Add JavaScript:

Example

const hourHand = document.querySelector("#hour");
const minuteHand = document.querySelector("#minute");
const secondHand = document.querySelector("#second");

setInterval(setClock, 1000);

function setClock() {
   //getting time
   const currentDate = new Date();
   const hours = currentDate.getHours();
   const minutes = currentDate.getMinutes();
   const seconds = currentDate.getSeconds();

   //convert time into degree
   const h_rotation = 30 * hours + minutes / 2;
   const m_rotation = 6 * minutes;
   const s_rotation = 6 * seconds;

   //apply degree on clock hands
   secondHand.style.transform = `rotate(${s_rotation}deg)`;
   hourHand.style.transform = `rotate(${h_rotation}deg)`;
   minuteHand.style.transform = `rotate(${m_rotation}deg)`;
}

setClock()

Try this code