Responsive analog clock using HTML, CSS and Vanilla JavaScript

Last Updated : 18 Apr, 2025

In this article, we are going to create an Analog Clock. This is mainly based on HTML, CSS & Vanilla JavaScript.

Approach:

Create an HTML file in which we are going to add the main div, further on we are adding 4 div tags for an hour, minute, and second hands & for the pin.
Create a CSS file for styling our web page and for assigning different lengths to the different hands.
Create a JavaScript file for creating a brief logic for the rotation of different clock hands.

The logic for rotation of clock hands:

1. Hour Hand

For Achieving 12hrs,
hour hand moves 360deg.

i.e.  12hrs   ⇢   360degs

so,    1hr    ⇢   30degs

and, 60mins   ⇢   30degs
    
so,    1min   ⇢   0.5degs
    
Total Rotation of hour hand:
    (30deg * hrs) + (0.5deg * mins)

2. Minute Hand

For Achieving 60mins,
hour hand moves 360deg.

i.e.  60mins   ⇢   360degs

so,    1min    ⇢   6degs
    
Total Rotation of minute hand:
        6deg * mins

3. Second Hand

For Achieving 60secs,
hour hand moves 360deg.

i.e.  60secs   ⇢   360degs

so,    1sec    ⇢   6degs
    
Total Rotation of minute hand:
        6deg * secs

Example:

Code Explanation:

First, create an HTML file (index.html).
Now after the creation of our HTML file, we are going to give a title to our webpage using <title> tag. It should be placed inside the <head> section.
Then we link the CSS file that provides all the styles to our HTML. This is also placed in between the <head> tag.
Coming to the body section of our HTML code.
- Firstly, create a main div as a clock.
- In that div add 4divs for an hour, minute, and second hands & for the pin.
- At the end of our body add <script> tag which links the JS file with our HTML file.
The setInterval() function is used for the execution of a function for a specific period of time. For more details click here.
The Date() function is used for returning today's date, and current time(hours, minutes, seconds).

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Analog Clock</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="clock">
        <div class="hr"></div>
        <div class="min"></div>
        <div class="sec"></div>
        <div class="pin"></div>
    </div>
    <script src="index.js"></script>
</body>
  
</html>

CSS

/* Restoring browser effects */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    ;
}

/* All of the same styling to the body */
body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    background-image: linear-gradient(
            70deg, black, white);
}

/* Sizing, positioning of main 
    dial of the clock */
.clock {
    width: 40vw;
    height: 40vw;
    background-image: linear-gradient(
                70deg, black, white);
    background-size: cover;
    box-shadow: 0 3em 5.8em;
    border-radius: 50%;
    position: relative;
}

.hr,
.min,
.sec {
    width: 1%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    transform-origin: bottom;
    z-index: 2;
    border-radius: 2em;
}

.pin {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 1em;
    height: 1em;
    background: rgb(38, 0, 255);
    border: 2px solid #ffffff;
    border-radius: 10em;
    margin: auto;
    z-index: 10;
}

/* Different length of different hands of clock */
.hr {
    height: 25%;
    background-color: #ff0000;
}

.min {
    height: 30%;
    background-color: #ff9900;
}

.sec {
    height: 40%;
    background-color: #99ff00;
    transform-origin: 50% 85%;
}

JavaScript

// Selecting all of the css classes on which
// we want to apply functionalities
const hr = document.querySelector('.hr')
const min = document.querySelector('.min')
const sec = document.querySelector('.sec')

// Setting up the period of working
setInterval(() => {

    // Extracting the current time 
    // from DATE() function
    let day = new Date()
    let hour = day.getHours()
    let minutes = day.getMinutes()
    let seconds = day.getSeconds()

    // Formula that is explained above for 
    // the rotation of different hands
    let hrrotation = (30 * hour) + (0.5 * minutes);
    let minrotation = 6 * minutes;
    let secrotation = 6 * seconds;

    hr.style.transform =
        `translate(-50%,-100%) rotate(${hrrotation}deg)`
    min.style.transform =
        `translate(-50%,-100%) rotate(${minrotation}deg)`
    sec.style.transform =
        `translate(-50%,-85%) rotate(${secrotation}deg)`
});

Output

Age Calculator Design using HTML CSS and JavaScript

rahulmahajann

Improve

Article Tags :

Responsive analog clock using HTML, CSS and Vanilla JavaScript

Similar Reads

Thank You!

What kind of Experience do you want to share?