Responsive analog clock using HTML, CSS and Vanilla JavaScript️‍🔥

Q: What is Responsive analog clock using HTML, CSS and Vanilla JavaScript?

In this article, we will learn Responsive analog clock using HTML, CSS and Vanilla JavaScript,This free Javascript tutorial for complete beginners will help you learn Javascript from scratch.

Q: How to use Responsive analog clock using HTML, CSS and Vanilla JavaScript in Javascript?

In this article, we are going to create an Analog Clock

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

Output: Click here to see live code output

Responsive analog clock using HTML, CSS and Vanilla JavaScript