How to Create Analog Clock Using HTML, CSS, JS

By Piyush Gupta
Piyush608 top freelancer india 1 2

Creating an analog clock using HTML, CSS, and JavaScript involves creating the clock’s face and hands using HTML and CSS, and then using JavaScript to rotate the hands according to the current time. Here’s a step-by-step guide:

HTML

<!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>ANALOG CLOCK</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="clock">
      <div class="time">
        <div class="twelve">12</div>
        <div class="three">3</div>
        <div class="six">6</div>
        <div class="nine">9</div>
      </div>

      <div class="arrows">
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>
      </div>

      <!-- <img src="https://toppng.com/uploads/preview/titan-vector-logo-download-free-11574029507aj7fv0mril.png" alt="Titan Logo"/> Titan Img -->
    </div>
    <script src="index.js"></script>
  </body>
</html>

 

CSS (styles.css)

body {
  margin: 0;
  padding: 0;
  background-color: rgb(31, 32, 34);
  font-family: "Courier New", Courier, monospace;
  height: 100vh;
  display: flex; /*To horizantly aligned elements.*/
  justify-content: center; /*Horizontally center*/
  align-items: center; /*Vertically center*/
}

/* Titan Img
 img {
  width: 50px;
  position: absolute;
  To make the logo in top-center
  left: 50%;
  transform: translateX(-50%);  To right shift the logo in center
  top: 60px;
  z-index: 2; As we want logo over the clock
} */


.clock {
  /*In order to put logo on the clock we declare clock as relative & img as absolute*/
  position: relative;
  background-color: #FFF;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  border: 15px solid rgb(151, 152, 152);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); /*H, V, BLUR RADIUS, black wih 70% transprency*/
}

.time div {
  position: absolute;
  font-size: 27px;
  font-weight: 600;
  color: rgb(22, 22, 22);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /*H, V, Blur Radius, black with 70% transprency*/
}

.twelve {
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
}

.three {
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}

.six {
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
}

.nine {
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
}

.arrows {
  display: flex; /*To be on center*/
  width: 100%;
  height: 100%;
  justify-content: center; /*Horizontally center*/
  align-items: center; /*Vertically center*/
}

/*To make the center arrows-circle */
.arrows::before{
  content: ""; /*To make the cicle visible. By default we have to use content whenever we use pusedo before.*/
  width: 25px;
  height: 25px;
  background-color: brown;
  border-radius: 50%;
  box-shadow: 1px 1px 2px rgb(0, 0, 0, 0.7);
  z-index: 4; /*we want it to be top of time-hands.*/
}

.arrows div {
  background-color: rgb(95, 8, 129);
  width: 6px;
  position: absolute;
  height: 100px;
  bottom: 50%;
  transform-origin: bottom center; /* To make handles rotate from their bottom-center. */
  z-index: 3; /* to be top of img logo*/
  border-radius: 50% 50% 0 0; /*to make top hand-arrow*/
  box-shadow: 1px 1px 2px rgb(0, 0, 0, 0.7);
}

.arrows .hour {
  height: 120px;
  transform: rotate(
    30deg
  ); /*just to separate hour hand as all hands are overlapped.*/
  background-color: black;
}

.arrows .minute {
  height: 150px;
  transform: rotate(
    60deg
  ); /*just to separate hour hand as all hands are overlapped.*/
  background-color: black;
}

.arrows .second {
  transform: rotate(
    90deg
  ); /*just to separate hour hand as all hands are overlapped.*/
}

 

JavaScript (script.js)

const hourEl=document.querySelector(".hour");
const minuteEl=document.querySelector(".minute");
const secondEl=document.querySelector(".second");
/*
For Cross Checking-
console.log(hourEl);
console.log(minuteEl);
console.log(secondEl);
*/

function updateClock(){
    const currentDate=new Date();
    console.log(currentDate);
    const hour=currentDate.getHours();
    const minute=currentDate.getMinutes();
    const second=currentDate.getSeconds();
   // console.log(hour, minute, second);
    const hourToDegree=(hour/12)*360;
    hourEl.style.transform=`rotate(${hourToDegree}deg)`;
    const minuteToDegree=(minute/60)*360;
    minuteEl.style.transform=`rotate(${minuteToDegree}deg)`;
    const secondToDegree=(second/60)*360;
    secondEl.style.transform=`rotate(${secondToDegree}deg)`;
}

setInterval(updateClock, 1000);

 

Explanation

  1. HTML Structure:
    • The HTML structure includes a div for the clock face, three divs for the hour, minute, and second hands, and a div for the clock’s center.
  2. CSS Styling:
    • The .clock class styles the clock face with a circular border and shadow.
    • The .hand class styles the clock hands with appropriate positioning, length, and rotation origin.
    • The hour, minute, and second classes further refine the styles for each specific hand.
    • The .center class styles the center of the clock.
  3. JavaScript Functionality:
    • The updateClock function calculates the current time and converts it to degrees for rotating the hands.
    • The setInterval(updateClock, 1000); ensures that the updateClock function is called every second.
    • The initial call to updateClock(); sets the clock hands immediately when the page loads.

By following these steps, you’ll create a functional analog clock that updates in real-time based on the current time.

CEO Piyush Gupta


Reviews

There are no reviews yet. Be the first one to write one.

0.0
Rated 0 out of 5
0 out of 5 stars (based on 0 reviews)
Excellent0%
Very good0%
Average0%
Poor0%
Terrible0%

Recent Posts

  CALL

+91 7905834592

Enquiry Now

piyushmnm@gmail.com

piyush.gupta384