Analog Clock Using Pure HTML, CSS, & JavaScript

Analog Clock Using Pure HTML, CSS, & JavaScript

Analog Clock Using Pure HTML, CSS, & JavaScript

Hello everyone. Welcome to today’s tutorial on Codewithrandom. We’ll learn how to make Analog Clock which is used to display time and it is a good project for beginners to improve their front-end development skills. In Today’s session, We will use HTML, CSS, and JavaScript to complete this Analog Clock Project.

Project Description

Step 1

The HTML (Hypertext Markup Language) will help us to create the structure for the list with some necessary attributes and elements to make Analog Clock Project.

Step 2

Then we will use CSS (Cascading Stylesheet) which will help us to style or design the project with suitable padding and alignment in the Analog Clock Project.

Step 3

At last, we will use JS (JavaScript) which will add logic to make the Analog Clock Project responsive from the user end.

I hope you have got an idea about the project.

HTML Code for Analog Clock

<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Analog Clock</title>
    <!-- Stylesheet-->
    <link rel="stylesheet" href="style.css">   
</head>
<body>
    <div class="clock">
        <div class="hour hand" id="hour"></div>
        <div class="minute hand" id="minute"></div>
        <div class="seconds hand" id="seconds"></div>
    </div>
    <!-- Script -->
    <script src="script.js"></script>
</body>
</html>

First, we’ll start with creating the structure of the Analog Clock project for that as you can see in the above code we have used all the necessary elements & attributes to set up the structure. Let us know code the CSS part to add styling and aligned the tags.

15+ Cloud Animation Effect Backgrounds

CSS Code for Analog Clock

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    background: linear-gradient(
        to bottom,
        #2987e4 50%,
        #16191e 50%
    );
}
.clock{
    background: #16191e;
    height: 320px;
    width: 320px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    box-sizing: content-box;
    border-radius: 50%;
    border: 15px solid #242931;
    box-shadow: 15px 15px 35px rgba(0,0,0,0.2),
    inset 0 0 30px rgba(0,0,0,0.4);
}
img{
    position: relative;
}
.hand{
    position: absolute;
    background-color: #ffffff;
    margin: auto;
    left: 0;
    right: 0;
    border-radius: 5px;
    transform-origin: bottom;
}
.hour{
    height: 60px;
    width: 10px;
    top: 100px;
}
.minute{
    height: 80px;
    width: 5px;
    top: 80px;
}
.seconds{
    height: 90px;
    width: 3px;
    top: 70px;
    background-color: #2987e4;
}

Second, comes the CSS code which we have styled for the structure we have padded as well as aligned the Analog Clock project so that it is properly situated and doesn’t get messy with suitable CSS elements. Now, let’s code the JavaScript part to make it responsive.

Task Management Ui Html,CSS And ,Javascript (Source Code)

JavaScript Code for Analog Clock

let hour = document.getElementById("hour");
let minute = document.getElementById("minute");
let seconds = document.getElementById("seconds");

let set_clock = setInterval(() => {
    let date_now = new Date();

    let hr = date_now.getHours();
    let min = date_now.getMinutes();
    let sec = date_now.getSeconds();

    let calc_hr = (hr * 30) + (min / 2);
    let calc_min = (min * 6) + (sec / 10);
    let calc_sec = sec * 6;

    hour.style.transform = `rotate(${calc_hr}deg)`;
    minute.style.transform = `rotate(${calc_min}deg)`;
    seconds.style.transform = `rotate(${calc_sec}deg)`;
}, 1000);

Last stage of the project the JavaScript which we added the logic and coded as per the requirement with some conditions. We have also specified how the clock will be displayed and with hours, minutes & seconds. Let us see the Final Output of the project Analog Clock using HTML, CSS & JavaScript.

Final Output


We have successfully created our Analog Clock using HTML, CSS & JavaScript. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Thank You And Happy Learning!!!

Code Idea – codingartist

Written By – Harsh Sawant

Code By – @harshh9



Tags: , , ,

Leave a Reply