How to create a digital wall clock using HTML, CSS, and JavaScript

Kariuki Maina
By Kariuki Maina 2 Min Read

Here is an example of how you can create a digital wall clock using HTML, CSS, and JavaScript:

<!-- HTML Markup -->
<div id="clock">
<div id="hours">00</div>
<div id="minutes">:00</div>
<div id="seconds">:00</div>
</div>
/* CSS Styles */
#clock {
font-size: 36px;
text-align: center;
}

#clock > div {
display: inline-block;
}

#hours {
margin-right: 12px;
}

- Advertisement -

#minutes {
margin-right: 12px;
}

// JavaScript Code
const clock = document.getElementById("clock");
const hours = document.getElementById("hours");
const minutes = document.getElementById("minutes");
const seconds = document.getElementById("seconds");

function updateClock() {
const now = new Date();
const h = now.getHours().toString().padStart(2, "0");
const m = now.getMinutes().toString().padStart(2, "0");
const s = now.getSeconds().toString().padStart(2, "0");
hours.textContent = h;
minutes.textContent = `:${m}`;
seconds.textContent = `:${s}`;
}

setInterval(updateClock, 1000);
updateClock();

This code will create a digital wall clock that displays the current time in hours, minutes, and seconds. The HTML code defines the structure of the clock, with three <div> elements for the hours, minutes, and seconds. The CSS code styles the clock and the individual time units. The JavaScript code uses the setInterval() function to update the clock every second and the Date object to get the current time.

I hope this helps! Let me know if you have any questions.

Share this Article
By Kariuki Maina Kariuki Maina
Follow:
In a world full of worriers, be the warrior.
Leave a comment
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x
adbanner