There is all the html code for the digital clock. Now, you can see output without Css and JavaScript. then we write Css for styling the Clock and Use javascript for the getting time digital clock.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

Html Code Output

CSS Code For Digital Clock

Now we have completed our CSS Code section.  Here is our updated output HTML + CSS.

Restaurant Website Using HTML and CSS

Output

window.addEventListener("DOMContentLoaded",() => {
const clock = new BouncyEmbossedClock(".clock");
});
class BouncyEmbossedClock {
constructor(el) {
this.el = document.querySelector(el);
this.els = this.el ? this.el.querySelectorAll(".clock__digit") : [];
this.digits = [];
this.to = null;
this.dto = [
[null,null,null],
[null,null,null],
[null,null],
[null,null,null],
[null,null,null],
[null,null],
[null,null,null],
[null,null,null],
];
this.staticUpdate();
this.update();
}
getTime() {
const time = new Date();
const hms = [
time.getHours(),
time.getMinutes(),
time.getSeconds()
];
return hms.map(u => u < 10 ? `0${u}` : `${u}`).join(":").split("");
}
staticUpdate() {
if (this.els) {
this.digits = this.getTime();
this.digits.forEach((d,i) => {
this.els[i].textContent = d;
});
}
}
update() {
if (this.els) {
// get the time
const display = this.getTime();
const bounce = "clock__digit--bounce";
const baseDelay = 350;
const delayDec = 50;
// display the digits
display.forEach((d,i) => {
if (+d > +this.digits[i] || +d === 0 && +this.digits[i] !== 0) {
const colonElCL = display[i + 1] === ":" ? this.els[i + 1].classList : null;
const el = this.els[i];
const timeout = baseDelay - delayDec * i;
this.dto[i].forEach(t => {
clearTimeout(t);
});
// run the animation
this.dto[i][0] = setTimeout(() => {
el.classList.add(bounce);
}, timeout);
// show the next digit
this.dto[i][1] = setTimeout(() => {
el.textContent = d;
}, timeout + 167);
// kill the animation
this.dto[i][2] = setTimeout(() => {
el.classList.remove(bounce);
}, timeout + 500);
// colon animation (if applicable)
if (colonElCL) {
this.dto[i + 1].forEach(t => {
clearTimeout(t);
});
this.dto[i + 1][0] = setTimeout(() => {
colonElCL.add(bounce);
}, timeout - delayDec);
this.dto[i + 1][1] = setTimeout(() => {
colonElCL.remove(bounce);
}, (timeout - delayDec) + 500);
}
}
this.digits[i] = d;
});
// loop
clearTimeout(this.to);
this.to = setTimeout(this.update.bind(this),1e3);
}
}
}

Final Output Of Digital Clock Using HTML & JavaScript

Weather App Using Html,Css And JavaScript 

Now we have completed our Digital Clock. Here is our updated output with Html, Css, and JavaScript. I hope you like the Digital Clock. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you!

In this post, we learn how to create a Digital Clock Using HTML & JavaScript (Source Code). If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

code by – @jkantner