Real-time wall clock using Javascript and CSS
In this article, we will create a a real-time clock using JavaScript, CSS and HTML. We will break down this programme into three parts and will explain it so that you can use it easily we also provide a download button to dowanload this in single click.
- Step 01: We will create HTML structure having the basic structure of the webpage
- Step 02: In this step we will write CSS, which is just for making the clock actuall look. we have centered our clock and we are using image in the background of the clock div so that it will looks real.
- Step 03: In this step we will create The JavaScript function to provide the logic behind the rotation of Hour, Minuts and Seconds hands.
Step 01: 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>
Step 3: 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%);
}
Step 3: 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 call the updateClock() function in every 1000 milliseconds (that is 1 second).
This continuous interval makes sure that the clock hands are updated in real-time, and reflects 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.