Responsive analog clock using HTML, CSS and Vanilla JavaScript

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 lang="en"> 

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