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

Alizeh Codes January 27, 2025

 

Creating an Analog Clock Using HTML, CSS, and JavaScript

Are you looking to enhance your web development skills by building a creative project? Learning how to create an analog clock using HTML, CSS, and JavaScript is a fantastic way to practice your coding abilities. This step-by-step tutorial will guide you through the process of making a fully functional and visually appealing analog clock. Let’s get started!

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

Click Here

Why Create an Analog Clock? 

An analog clock project is perfect for developers who want to:

  • Understand the interaction between HTML, CSS, and JavaScript.

  • Learn how to use CSS transformations.

  • Practice real-time updates using JavaScript.

By the end of this tutorial, you’ll have a deeper understanding of these technologies and a project you can showcase in your portfolio.

Step 1: Set Up the HTML Structure

Your HTML file provides the basic framework for the clock. Here’s the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Analog Clock</title>
</head>
<body>
    <div class="container">
        <div class="clock">
            <div style="--clr: #ff3d58; --h:70px;" id="hour" class="hand"><i></i></div>
            <div style="--clr: #00a6ff; --h:72px;" id="min" class="hand"><i></i></div>
            <div style="--clr: #fff; --h:84px;" id="sec" class="hand"><i></i></div>

            <span style="--i:1;"><b>1</b></span>
            <span style="--i:2;"><b>2</b></span>
            <span style="--i:3;"><b>3</b></span>
            <span style="--i:4;"><b>4</b></span>
            <span style="--i:5;"><b>5</b></span>
            <span style="--i:6;"><b>6</b></span>
            <span style="--i:7;"><b>7</b></span>
            <span style="--i:8;"><b>8</b></span>
            <span style="--i:9;"><b>9</b></span>
            <span style="--i:10;"><b>10</b></span>
            <span style="--i:11;"><b>11</b></span>
            <span style="--i:12;"><b>12</b></span>
        </div>
    </div>

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

This code creates a container for the clock and three hands: hour, minute, and second.

Step 2: Style the Clock with CSS

The CSS file is where you’ll design the clock’s appearance. Below is an example:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    color: #fff;
}
body{
    background: #121212;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.container{
    position: relative;
}
.clock{
    width: 300px;
    height: 300px;
    background: #212121;
    border: 2px solid #212121;
    border-radius: 50%;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
}
.clock span{
    position: absolute;
    transform: rotate(calc(30deg * var(--i)));
    inset: 12px;
    text-align: center;
}
.clock span b{
    position: absolute;
    transform: rotate(calc(-30deg * var(--i)));
    display: inline-block;
    font-size: 18px;
}
.clock::before{
    content: '';
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    z-index: 2;
    position: absolute;
}
.hand{
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.hand i{
    position: absolute;
    width: 4px;
    height: var(--h);
    background: var(--clr);
    border-radius: 8px;
}

This CSS ensures the clock is centered, styled, and visually appealing.

Step 3: Add Functionality with JavaScript

JavaScript will handle the dynamic movement of the clock hands. Here’s the script:

let hr = document.getElementById('hour');
let min = document.getElementById('min');
let sec = document.getElementById('sec');

function displayTime(){
    let date = new Date();

    let hh = date.getHours();
    let mm = date.getMinutes();
    let ss = date.getSeconds();

    let hRotation = 30*hh + mm/2;
    let mRotation = 6*mm;
    let sRotation = 6*ss;

    hr.style.transform = `rotate(${hRotation}deg)`;
    min.style.transform = `rotate(${mRotation}deg)`;
    sec.style.transform = `rotate(${sRotation}deg)`;
}

setInterval(displayTime, 1000);

This code calculates the rotation angles of the clock hands based on the current time and updates them every second.

Step 4: Combine Everything

Save the HTML, CSS, and JavaScript files in the same folder. Open the HTML file in a web browser to view your analog clock in action.

Conclusion

Building an analog clock using HTML, CSS, and JavaScript is a rewarding project for web developers. It not only improves your coding skills but also enhances your portfolio. Follow this tutorial to create your clock, and don’t forget to experiment with different styles and features. Happy coding!

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

Watch Full Tutorial On YouTube


Tags:

Post a Comment

0 Comments