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
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.”
- Metadata, such as character set and viewport settings, is defined in the
<body>Section:- The
<body>section contains the content of the web page.
- The
.clockContainer:- A
<div>element with the class “clock” is created. This will serve as the container for the clock face.
- A
- 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.
- Inside the clock container, there are three nested
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
.clockContainer:- 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-sizeis set to “cover” to ensure it fits within the container. - The container is given a circular shape using
border-radius. box-shadowproperties 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.scclasses. - These hand elements are positioned absolutely within the clock container and centered using
display: flex,justify-content, andalign-items.
- The styles for the hour, minute, and second hands are defined within the
- Pseudo-elements:
::beforepseudo-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-indexto 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.Let’s break down the JavaScript code step by step:
JavaScript (script.js):
- Constants:
- The code defines a constant
degwith a value of 6, representing the number of degrees for each minute or second (360 degrees divided by 60).
- The code defines a constant
- 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”).
setIntervalFunction:- A
setIntervalfunction is used to repeatedly run a block of code every second.
- A
- 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.transformproperty to apply these rotations, updating the clock hands’ positions.
- Inside the interval function, it gets the current time using
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.
