Exnrt Logo
  • Home
  • Technology
    • Artificial Intelligence
    • WordPress
  • Programming
    ProgrammingShow More
    Mistral AI Model
    Mistral-7B Instruct Fine-Tuning using Transformers LoRa
    19 1
    Hugging Face Website
    Hugging Face Transformers Pipeline, what can they do?
    15 1
    AI generated images using SDXL-Lightning huggingface
    SDXL-Lightning model using hugging face Transformers
    14 1
    Gemma AI Model
    Finetune Gemma Models with Transformers
    11 1
    HTML Quiz App
    Quiz App Using HTML, CSS, and JavaScript
    9 1
  • Business
    • Ads
    • SEO
  • AI Tools
    • AI Chatbot For Education
    • Ask a Question
    • News Title Generator
  • My Feed
    • My Interests
    • My Saves
    • History
Notification
Sign In
ExnrtExnrtExnrt
Font ResizerAa
  • Artificial Intelligence
  • Technology
  • Business
  • Ads
  • SEO
Search
  • Blog
  • Ads
  • Programming
  • Technology
  • Artificial Intelligence
  • WordPress
  • SEO
  • Business
  • Education

Top Stories

Explore the latest updated news!
Fine Tuning Siglip2 a ViT on Image Classification Task.

Fine Tuning Siglip2 on Image Classification Task

6
AI-Generated-Image-using-Flux-1

How to Fine-Tune Flux.1 Using AI Toolkit

8
microsoft/Phi-3-mini-128k-instruct

How to fine-tune Microsoft/Phi-3-mini-128k-instruct

12

Stay Connected

Find us on socials
248.1k Followers Like
61.1k Followers Follow
165k Subscribers Subscribe
ProgrammingBlog

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

Ateeq Azam
Last updated: March 17, 2024 10:42 am
By Ateeq Azam 2 comments 3
Share
Real-Time Analog Clock Using HTML, CSS, and JavaScript
Real-Time Analog Clock Using HTML, CSS, and JavaScript
SHARE

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.

Table of Content
HTML CodeHTML Structure:CSS CodeCSS Styling (style.css):JavaScript CodeJavaScript (script.js):

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:

  1. <!DOCTYPE html> and <html>: These lines declare the document type and start the HTML document.
  2. <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.”
  3. <body> Section:
    • The <body> section contains the content of the web page.
  4. .clock Container:
    • A <div> element with the class “clock” is created. This will serve as the container for the clock face.
  5. 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):

  1. 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).
  2. 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.
  3. 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.
  4. 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

Resource ready for free download! Sign up with your email to get instant access.
Text Particles in Motion with Cursor Interaction Using JS
9 Planets Animated Solar System Using Html, CSS, Javascript
DNA Animation Using Html & CSS

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

JavaScript (script.js):

  1. 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).
  2. 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”).
  3. setInterval Function:
    • A setInterval function is used to repeatedly run a block of code every second.
  4. 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.
Analog Clock Using Html

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.

TAGGED:ProgrammingTechnology
Share This Article
Facebook Twitter Copy Link Print
What do you think?
Love2
Sad0
Happy0
Sleepy0
Angry0
2 Comments
Subscribe
Login
Notify of
guest

guest

2 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments

You Might Also Like

Fine Tuning Siglip2 a ViT on Image Classification Task.
Fine Tuning Siglip2 on Image Classification Task
AI-Generated-Image-using-Flux-1
How to Fine-Tune Flux.1 Using AI Toolkit
microsoft/Phi-3-mini-128k-instruct
How to fine-tune Microsoft/Phi-3-mini-128k-instruct
AI Generated: A professional real llama looking like a hacker in a dark lab with light yellow lights
How to Fine-tune Meta Llama-3 8B

Other Posts

Bard AI Image Generation
Google Bard Now Offers Free AI Image Generation
Artificial Intelligence Blog Technology
Mistral AI Model
Mistral-7B Instruct Fine-Tuning using Transformers LoRa
Artificial Intelligence Blog Programming
Hugging Face Team
DeepLearning.AI just announced a course on Hugging Face
Artificial Intelligence Blog
diDNA AdX
diDNA AdX: Website Maximization for Publishers
Ads Blog

Latest Posts

Uncover the Latest stories that related to your interest!
Fine Tuning Siglip2 a ViT on Image Classification Task.
Artificial IntelligenceBlog

Fine Tuning Siglip2 on Image Classification Task

April 14, 2025

At Exnrt.com, we believe in empowering computer science students with the knowledge and skills they need to succeed in their careers. Our goal is to provide accessible and engaging tutorials that help students and professionals develop their skills and advance their careers.

  • Categories:
  • Business
  • Technology
  • Ads
  • SEO

Quick Links

  • Blog
  • Technology
  • Artificial Intelligence
  • Business

About US

  • About Us
  • Contact Us
  • Privacy Policy

Copyright © 2024 All Rights Reserved – Exnrt by ateeq.pk

wpDiscuz
Welcome Back!

Sign in to your account

Register Lost your password?