Creating an Analog Clock Using HTML, CSS and JavaScript

Creating an analog clock may seem daunting, but it's surprisingly easy with HTML, CSS, and JavaScript. This tutorial provides step-by-step guidance on how to create a fully functional analog clock that you can add to your website or web app.

Analog Clock Interactive Demo

Creating the HTML file

The first step is to create an HTML file that will contain the structure of our clock. We will need three primary elements: the clock's face and its three hands (hour, minute, and second). You can also add numbers to mark the hours on the clock face.

<div id="clock-container">
    <div id="clock">
        <div id="hour" class="hand" style="--color: #ff3d58; --height: 76px; --width: 4px"><i></i></div>
        <div id="minute" class="hand" style="--color: #00a6ff; --height: 86px; --width: 3px"><i></i></div>
        <div id="second" class="hand" style="--color: #ffffff; --height: 96px; --width: 2px"><i></i></div>
        <span style="--i: 1; --j: 0"><i>|</i></span>
        <span style="--i: 2; --j: 0"><i>|</i></span>
        <span style="--i: 3; --j: 3"><i>3</i></span>
        <span style="--i: 4; --j: 0"><i>|</i></span>
        <span style="--i: 5; --j: 0"><i>|</i></span>
        <span style="--i: 6; --j: 6"><i>6</i></span>
        <span style="--i: 7; --j: 0"><i>|</i></span>
        <span style="--i: 8; --j: 0"><i>|</i></span>
        <span style="--i: 9; --j: 9"><i>9</i></span>
        <span style="--i: 10; --j: 0"><i>|</i></span>
        <span style="--i: 11; --j: 0"><i>|</i></span>
        <span style="--i: 12; --j: 12"><i>12</i></span>
    </div>
</div>

Styling with CSS

Next, we will create a CSS file to style our clock. We will use CSS to position our clock hands and to give them a unique style.

#clock-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
#clock {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1c2731;
    /*background: radial-gradient(ellipse, #506068, #1c2731);*/
    background: linear-gradient(170deg, rgba(49, 57, 73, 0.8) 20%, rgba(49, 57, 73, 0.5) 20%, rgba(49, 57, 73, 0.5) 35%, rgba(41, 48, 61, 0.6) 35%, rgba(41, 48, 61, 0.8) 45%, rgba(31, 36, 46, 0.5) 45%, rgba(31, 36, 46, 0.8) 75%, rgba(49, 57, 73, 0.5) 75%), linear-gradient(45deg, rgba(20, 24, 31, 0.8) 0%, rgba(41, 48, 61, 0.8) 50%, rgba(82, 95, 122, 0.8) 50%, rgba(133, 146, 173, 0.8) 100%) #313949;
}
#clock span {
    position: absolute;
    transform: rotate(calc(30deg * var(--i)));
    inset: 12px;
    text-align: center;
}
#clock span i {
    transform: rotate(calc(-30deg * var(--j)));
    display: inline-block;
    font-size: 20px;
    font-style: normal;
    text-shadow: 1px 1px 0px rgb(0 0 0 / 25%);
    color: #ffffff;
}
#clock::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #fff;
    z-index: 2;
    opacity: 0.6;
}
#clock .hand {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
#clock .hand i {
    position: absolute;
    background-color: var(--color);
    width: var(--width);
    height: var(--height);
    border-radius: 8px;
}

Adding JavaScript Functionality

Finally, we will create a JavaScript file to provide the logic behind our clock hands’ rotation according to the current time. We will use the setInterval() function to run the updateClock() function every second, keeping the time accurate.

function updateClock() {
    const now = new Date();
    const second = now.getSeconds();
    const minute = now.getMinutes();
    const hour = now.getHours();
    document.getElementById('hour').style.transform = `rotate(${30 * hour + minute / 2}deg)`;
    document.getElementById('minute').style.transform = `rotate(${6 * minute}deg)`;
    document.getElementById('second').style.transform = `rotate(${6 * second}deg)`;
}
setInterval(updateClock, 1000);
updateClock();

Once you have created and saved the HTML, CSS, and JavaScript files, you can open the HTML file in a web browser to see your analog clock in action.

Conclusion

Creating an analog clock using HTML, CSS, and JavaScript is a fun and challenging project. This tutorial provides all the necessary steps and code snippets to help you get started. By following this tutorial, you will be able to create a beautiful and functional analog clock that you can add to your website or web app.