Create analog clock using JavaScript

Creating an analog clock using JavaScript involves HTML to define the clock structure, CSS for styling, and JavaScript to handle the time and animate the clock hands. Here’s a simple guide to creating an analog clock.

Step 1: Set Up Your HTML

First, create the basic HTML structure for the clock.

<!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>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
        }

        .clock {
            width: 300px;
            height: 300px;
            border: 10px solid #333;
            border-radius: 50%;
            position: relative;
            background: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

        .hand {
            width: 50%;
            height: 6px;
            background: #333;
            position: absolute;
            top: 50%;
            transform-origin: 100%;
            transform: rotate(90deg);
            transition: transform 0.05s ease-in-out;
        }

        .hour {
            height: 8px;
            background: #000;
        }

        .minute {
            height: 6px;
            background: #666;
        }

        .second {
            height: 4px;
            background: #c00;
        }

        .center {
            width: 12px;
            height: 12px;
            background: #333;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>

<div class="clock">
    <div class="hand hour" id="hour"></div>
    <div class="hand minute" id="minute"></div>
    <div class="hand second" id="second"></div>
    <div class="center"></div>
</div>

<script src="clock.js"></script>
</body>
</html>

Step 2: Create Your JavaScript File

Next, create a JavaScript file named clock.js. This script will handle updating the position of the clock hands based on the current time.

function updateClock() {
    const now = new Date();
    const second = now.getSeconds();
    const minute = now.getMinutes();
    const hour = now.getHours();

    const secondDeg = ((second / 60) * 360) + 90;
    const minuteDeg = ((minute / 60) * 360) + ((second / 60) * 6) + 90;
    const hourDeg = ((hour / 12) * 360) + ((minute / 60) * 30) + 90;

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

function initClock() {
    updateClock();
    setInterval(updateClock, 1000);
}

document.addEventListener('DOMContentLoaded', initClock);

Step 3: Explanation

HTML Setup: We created a simple structure for the clock with three div elements representing the hour, minute, and second hands, and a central dot.
CSS Styling:
- The .clock class styles the clock’s face with a circular shape and a border.
- The .hand class and its subclasses style the clock hands with different widths and colors.
JavaScript Functionality:
- updateClock function calculates the degree of rotation for each clock hand based on the current time and updates their transform property to rotate them.
- initClock function initializes the clock by calling updateClock immediately and then setting an interval to call updateClock every second.
- We add an event listener to the DOMContentLoaded event to ensure the clock starts as soon as the DOM is fully loaded.

Step 4: Test Your Analog Clock

Open your HTML file in a web browser. You should see an analog clock with the hands moving in real time, accurately reflecting the current time.

By following these steps, you can create a functional and visually appealing analog clock using HTML, CSS, and JavaScript. Feel free to customize the design and functionality to suit your needs!

For more information on adding interactive features to your website, visit this guide on adding mouse hover effects using JavaScript.

If you liked the post, star some of my GitHub repos.

Step 1: Set Up Your HTML

Step 2: Create Your JavaScript File

Step 3: Explanation

Step 4: Test Your Analog Clock

Related Posts

Leave a Comment Cancel Reply