Real-Time Analog Clock Using HTML, CSS, and JavaScript

In this project, we have created a real-time analog clock using the power of HTML, CSS, and JavaScript. Analog clocks have been a timeless way of displaying the current time, and by building this analog clock, you’ll gain insights into how web technologies can be used to create dynamic and visually appealing user interfaces.

This project combines the precision of JavaScript for timekeeping with the creativity of CSS for styling, resulting in an elegant clock that provides a seamless and accurate representation of the current time.

Creating a real-time analog clock using HTML, CSS, and JavaScript is a fun and educational project. Below is a step-by-step guide on how to create one:

HTML Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Analog Clock - html Css JS</title>
</head>
<body>
    <div class="clock">
        <div class="hour">
            <div class="hr" id="hr"></div>
        </div>
        <div class="min">
            <div class="mn" id="mn"></div>
        </div>
        <div class="sec">
            <div class="sc" id="sc"></div>
        </div>
    </div>
<script src="script.js"></script>
</body>
</html>

Let’s break down the Html code step by step:

HTML Structure:

<!DOCTYPE html> and <html>: These lines declare the document type and start the HTML document.
<head> Section:
- Metadata, such as character set and viewport settings, is defined in the <head> section.
- An external CSS file (“style.css”) is linked for styling.
- The title of the web page is set to “Analog Clock – html Css JS.”
<body> Section:
- The <body> section contains the content of the web page.
.clock Container:
- A <div> element with the class “clock” is created. This will serve as the container for the clock face.
Clock Hands:
- Inside the clock container, there are three nested <div> elements with classes “hour,” “min,” and “sec.” These represent the hour, minute, and second hands of the clock.
- Each of these hand elements contains a child <div> element with a specific ID (“hr,” “mn,” “sc”). These IDs will be used to target and update the positions of the clock hands using JavaScript.

Let’s break down the CSS code step by step:

CSS Code

CSS

body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #091921;
}
.clock{
    width: 300px;
    height: 300px;
    background-image: url("clock.png");
    border-radius: 50%;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
    inset 0 -15px 15px rgba(255, 255, 255, 0.05), 0 15px 15px rgba(0, 0, 0, 0.3),
    inset 0 15px 15px rgba(0, 0, 0, 0.3);
}
.clock::before{
    content: "";
    width: 15px;
    height: 15px;
    position: absolute;
    background-color: #fff;
    border-radius: 50%;
    z-index: 1000;
}
.hour,
.min,
.sec{
    position: absolute;
}
.hr{
    width: 160px;
    height: 160px;
}
.mn{
    width: 190px;
    height: 190px;
}
.sc{
    width: 230px;
    height: 230px;
}
.hr,
.mn,
.sc{
    display: flex;
    justify-content: center;
}
.hr::before{
    content: "";
    width: 8px;
    height: 80px;
    background-color: #06fd2f;
    z-index: 100;
    border-radius: 5px;
}
.mn::before{
    content: "";
    width: 6px;
    height: 90px;
    background-color: rgba(15, 105, 207);
    z-index: 11;
    border-radius: 5px;
}
.sc::before{
    content: "";
    width: 2px;
    height: 140px;
    background-color: #fff;
    z-index: 10;
    border-radius: 5px;
}

CSS Styling (style.css):

Styling the Body:
- The body is styled to center content both horizontally and vertically on the page.
- The background color is set to “#091921” (a dark blue).
Styling the .clock Container:
- The clock container is given a fixed width and height (300px x 300px).
- A background image (“clock.png”) is applied to the clock face, and background-size is set to “cover” to ensure it fits within the container.
- The container is given a circular shape using border-radius.
- box-shadow properties are used to create a subtle shadow effect both inside and outside the clock face.
Clock Hands Styling:
- The styles for the hour, minute, and second hands are defined within the .hr, .mn, and .sc classes.
- These hand elements are positioned absolutely within the clock container and centered using display: flex, justify-content, and align-items.
Pseudo-elements:
- ::before pseudo-elements are used to create the actual hand elements (lines) for the clock hands.
- Each pseudo-element has specific styles for width, height, and background color, giving them the appearance of clock hands.
- They are positioned using z-index to be visually on top of the clock face.

JavaScript Code

JavaScript

const deg = 6; //360deg / 60(min||sec) => 6
        const hr = document.querySelector("#hr");
        const mn = document.querySelector("#mn");
        const sc = document.querySelector("#sc");

        setInterval(() => {
            let day =  new Date();
            let hh =  day.getHours() * 30; //360deg / 12 hour => 30
            let mm = day.getMinutes() * deg;
            let ss = day.getSeconds() * deg;

            hr.style.transform = `rotateZ(${hh + mm / 12}deg)`;
            mn.style.transform = `rotateZ(${mm}deg)`;
            sc.style.transform = `rotateZ(${ss}deg)`;

        });

Download Full Project with Image

7 KB

Text Particles in Motion with Cursor Interaction Using JS

Solar System Animation in Html & CSS: Sun, Earth and Moon

DNA Animation Using Html & CSS

Let’s break down the JavaScript code step by step:

JavaScript (script.js):

Constants:
- The code defines a constant deg with a value of 6, representing the number of degrees for each minute or second (360 degrees divided by 60).
Selecting DOM Elements:
- The JavaScript code selects the DOM elements that represent the hour, minute, and second hands using their respective IDs (“hr,” “mn,” “sc”).
setInterval Function:
- A setInterval function is used to repeatedly run a block of code every second.
Updating Clock Hands:
- Inside the interval function, it gets the current time using new Date().
- It calculates the rotation angles (in degrees) for the hour, minute, and second hands based on the current time.
- It then uses the style.transform property to apply these rotations, updating the clock hands’ positions.

The end result is an analog clock that displays the current time with moving hour, minute, and second hands. The hands’ positions are updated in real-time, providing a simple yet visually appealing clock display.