How to Create Analog Clock Using HTML, CSS, and JavaScript

Introduction

Creating an analog clock using HTML, CSS, and JavaScript is an excellent way to understand the basics of web development and how these technologies interact. In this guide, we’ll build a stylish analog clock that dynamically updates every second, demonstrating the power of combining these technologies.

Analog Clock Using HTML, CSS, and JavaScript

Main Description

Code and Explanation

Here’s the code for an analog clock, followed by an explanation of each part:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Analog clock using HTML CSS and JavaScript</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="clock">
        <div class="number" style="--n:1"><b>1</b></div>
        <div class="number" style="--n:2"><b>2</b></div>
        <div class="number" style="--n:3"><b>3</b></div>
        <div class="number" style="--n:4"><b>4</b></div>
        <div class="number" style="--n:5"><b>5</b></div>
        <div class="number" style="--n:6"><b>6</b></div>
        <div class="number" style="--n:7"><b>7</b></div>
        <div class="number" style="--n:8"><b>8</b></div>
        <div class="number" style="--n:9"><b>9</b></div>
        <div class="number" style="--n:10"><b>10</b></div>
        <div class="number" style="--n:11"><b>11</b></div>
        <div class="number" style="--n:12"><b>12</b></div>
        <div class="hour-hand" id="hour-hand"></div>
        <div class="minute-hand" id="minute-hand"></div>
        <div class="second-hand" id="second-hand"></div>
        <div class="center-dot"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: radial-gradient(circle, #0b456b, #021c37);
}

.clock {
    width: 500px;
    height: 500px;
    position: relative;
    background-color: lightgray;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle, #05263c, #000d1a);
}

.clock::before {
    content: "";
    width: 525px;
    height: 525px;
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(#00d9ff, #ee00ff);
    box-shadow: 0 0 15px 15px rgba(0, 0, 0, 0.2);
    z-index: -1;
}

.number {
    transform: rotate(calc(30deg * var(--n)));
    position: absolute;
    text-align: center;
    inset: 20px;
    font-size: 40px;
    color: #00d9ff;
    text-shadow: 0 0 12px #ee00ff;
}

.number b {
    transform: rotate(calc(-30deg * var(--n)));
    display: inline-block;
}

.center-dot {
    position: absolute;
    width: 25px;
    height: 25px;
    background-color: #ee00ff;
    border: 6px solid #00d9ff;
    border-radius: 50%;
}

.hour-hand, .minute-hand, .second-hand {
    --rotate: 0;
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%) rotate(calc(var(--rotate) * 1deg));
    transform-origin: bottom;
    border-radius: 30px 30px 0 0;
}

.hour-hand {
    width: 12px;
    height: 130px;
    background: linear-gradient(#fff200, #ee00ff);
}

.minute-hand {
    width: 12px;
    height: 190px;
    background: linear-gradient(to top, #00d9ff, #ee00ff);
}

.second-hand {
    width: 6px;
    height: 210px;
    background: linear-gradient(to top, #00d9ff, #ee00ff);
}

const secondHand = document.getElementById('second-hand');
const minuteHand = document.getElementById('minute-hand');
const hourHand = document.getElementById('hour-hand');

function clockTick() {
    const date = new Date();
    const seconds = date.getSeconds() / 60;
    const minutes = (seconds + date.getMinutes()) / 60;
    const hours = (minutes + date.getHours()) / 12;

    rotateClockHand(secondHand, seconds);
    rotateClockHand(minuteHand, minutes);
    rotateClockHand(hourHand, hours);
}

function rotateClockHand(element, rotation) {
    element.style.setProperty('--rotate', rotation * 360);
}

setInterval(clockTick, 1000);

Code Explanation

HTML: Defines the structure of the clock with a div element representing the clock face and numbers, and elements for the hour, minute, and second hands.
CSS: Styles the clock, numbers, and hands. It uses position: absolute for precise placement and transform for rotation.
JavaScript: Updates the rotation of the clock hands every second based on the current time.

Output

When this code is executed, it displays an analog clock with a smooth second-hand movement. The clock updates every second to reflect the current time accurately.

Analog Clock Using HTML, CSS, and JavaScript

Related Posts

Leave a Comment Cancel Reply