Responsive analog clock using HTML, CSS and Vanilla JavaScript - GeeksforGeeks

04 Mar, 2021
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, 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 rotation of different clock-hands.
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, 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 rotation of different clock-hands.
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
HTML Code:
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>
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, second hands & for the pin.At the end of our body add <script> tag which links the JS file with our HTML file.
Firstly, create a main div as a clock.
In that div add 4divs for an hour, minute, second hands & for the pin.
At the end of our body add <script> tag which links the JS file with our HTML file.
CSS Code:
/* 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%;}
Code Explanation: CSS is used to give different types of animations and effects to our HTML page so that it looks interactive to all users. In CSS, we have to include the following points:
Restore all the browser effects.Use classes and id’s to give effects to HTML elements.
Restore all the browser effects.
Use classes and id’s to give effects to HTML elements.
JS Code:
Javascript
// Selecting all of the css classes on which// we want to apply functionalitiesconst hr = document.querySelector('.hr')const min = document.querySelector('.min')const sec = document.querySelector('.sec')  // Setting up the period of workingsetInterval(() => {      // 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)`});
Code Explanation:
The setInterval() function is used for the execution of function for a specific period of time. For more details click here.
The Date() function is used for returning today date, current time(hours, minutes, seconds).
Complete Code:
HTML
<!DOCTYPE html><html lang="en">  <head>    <style>          /* 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%;        }    </style></head>  <body>    <div class="clock">        <div class="hr"></div>        <div class="min"></div>        <div class="sec"></div>        <div class="pin"></div>    </div>      <script>          // 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)`        });    </script></body>  </html>
Output:
CSS-Properties
CSS-Selectors
javascript-math
JavaScript-Questions
Technical Scripter 2020
CSS
HTML
JavaScript
Technical Scripter
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)