Real-time Digital wall clock using HTML CSS and Javascript
In this tutorial, we will create a real-time clock using JavaScript, CSS, and HTML. We will break down this program into three parts and will explain it so that you can use it easily we also provide a download button to download this in a single click.
- Step 01 HTML: We will create an HTML structure having the basic structure of the webpage
- Step 02 CSS: In this step, we will write CSS, which is just for making the clock actually look. we have centered our clock and we are using an image in the background of the clock div so that it will look real.
- Step 03 JavaScript: In this step, we will create The JavaScript function to provide the logic behind the rotation of hours, minutes, and Seconds hands.
Javascript
function updateClock() {
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const hourHand = document.getElementById('hourHand');
const minuteHand = document.getElementById('minuteHand');
const secondHand = document.getElementById('secondHand');
const hourDegrees = (hours % 12) * 30 + minutes * 0.5;
const minuteDegrees = minutes * 6 + seconds * 0.1;
const secondDegrees = seconds * 6;
hourHand.style.transform = `translate(-50%, -100%) rotate(${hourDegrees}deg)`;
minuteHand.style.transform = `translate(-50%, -100%) rotate(${minuteDegrees}deg)`;
secondHand.style.transform = `translate(-50%, -100%) rotate(${secondDegrees}deg)`;
}
setInterval(updateClock, 1000);
updateClock();
Explanation of JavaScript
The above JavaScript function updateClock() is simply updating the hands of a clock.It happens by retrieving the current time (hours, minutes, and seconds) using the Date object from the system's clock.
Breakdown of the above function:
Get the current time:
It creates a Date object to capture the current date and time.
It extracts the hours, minutes, and seconds components from the Date object using getHours(), getMinutes(),
and getSeconds() methods accordingly.
Retrieve the clock hands elements:
It fetches the HTML elements representing the clock's hour, minute, and second hands using getElementById().
Calculate rotation degrees for each hand:
It calculates the degrees of rotation for each hand based on the current time.
- The hour hand is rotated proportionally to the hours and minutes.
- The minute hand moves according to the minutes and seconds.
- The second hand rotates every second.
Set interval:
setInterval() function repeatedly calls the updateClock() function every 1000 milliseconds (that is 1 second).
This continuous interval makes sure that the clock hands are updated in real-time and reflect the current time accurately on the webpage.
In Short, Here the function updateClock() dynamically adjusts the rotation of the clock hands based on the system time.
HTML
<div class="clock">
<div class="hour-hand" id="hourHand"></div>
<div class="minute-hand" id="minuteHand"></div>
<div class="second-hand" id="secondHand"></div>
<div class="center-circle"></div>
</div>
CSS
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.clock {
width: 300px;
height: 300px;
position: relative;
background: url('clock-face.png') no-repeat center;
background-size: cover;
}
.hour-hand,
.minute-hand,
.second-hand {
position: absolute;
top: 50%;
left: 50%;
transform-origin: 50% 100%;
}
.hour-hand {
width: 6px;
height: 60px;
background-color: black;
z-index: 3;
}
.minute-hand {
width: 4px;
height: 80px;
background-color: black;
z-index: 2;
}
.second-hand {
width: 2px;
height: 90px;
background-color: red;
z-index: 1;
}
.center-circle {
width: 10px;
height: 10px;
background-color: black;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}