Apply Now

Create a Stunning Analog Clock Using HTML, CSS, and JavaScript

Awinash Keshav January 29, 2025

 Introduction

In this tutorial, I will show you how to create a beautiful analog clock using HTML, CSS, and JavaScript. This clock features a modern design with smooth animations, and I have provided the complete source code for you to try it yourself.

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Analog Clock</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div class="clock">

        <div class="hand hour" id="hour-hand"></div>

        <div class="hand minute" id="minute-hand"></div>

        <div class="hand second" id="second-hand"></div>

        <div class="center-dot"></div>

    </div>

    <script src="script.js"></script>

</body>

</html>

CSS

body {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    margin: 0;

    background-color: #222;

}


.clock {

    width: 250px;

    height: 250px;

    border: 10px solid #00ff00;

    border-radius: 50%;

    position: relative;

    background: radial-gradient(circle, #111, #333);

    box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);

}


.hand {

    position: absolute;

    bottom: 50%;

    left: 50%;

    transform-origin: bottom;

    border-radius: 5px;

}


.hour {

    width: 8px;

    height: 60px;

    background: #00ff00;

}


.minute {

    width: 4px;

    height: 80px;

    background: #0ff;

}


.second {

    width: 2px;

    height: 90px;

    background: #ff0000;

}


.center-dot {

    width: 14px;

    height: 14px;

    background: #fff;

    border-radius: 50%;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}

Javascript

function updateClock() {
    const now = new Date();
    const hours = now.getHours() % 12;
    const minutes = now.getMinutes();
    const seconds = now.getSeconds();
    
    const hourDeg = (hours * 30) + (0.5 * minutes);
    const minuteDeg = (minutes * 6) + (0.1 * seconds);
    const secondDeg = seconds * 6;

    document.getElementById('hour-hand').style.transform = `translateX(-50%) rotate(${hourDeg}deg)`;
    document.getElementById('minute-hand').style.transform = `translateX(-50%) rotate(${minuteDeg}deg)`;
    document.getElementById('second-hand').style.transform = `translateX(-50%) rotate(${secondDeg}deg)`;
}

setInterval(updateClock, 1000);
updateClock();

Live Demo

I have also recorded a video explaining the coding process step by step. If you haven't watched it yet, check it out on my YouTube channel. The full source code is available below, or you can download it from my website.

Features of the Analog Clock

✔️ Smooth ticking second, minute, and hour hands
✔️ Attractive 3D design with a shadow effect
✔️ Responsive layout to fit different screen sizes
✔️ Real-time updates using JavaScript

Tags
Awinash Keshav

Posted by Awinash Keshav

we provide valuable resources to help you succeed in your job search and ace your interviews. From expert tips on crafting the perfect resume to detailed guides on answering HR interview questions, we cover everything you need to stand out to top companies like Amazon, Google, and more. Whether you're looking for work-from-home opportunities or office jobs, our blog is designed to help you navigate the job market with confidence and success."

Post a Comment

0 Comments