ADVERTISEMENT

Digital Clock Using HTML & JavaScript (Source Code)

Telegram Group Join Now

ADVERTISEMENT

Digital Clock Using HTML & JavaScript (Source Code)

Digital Clock Using HTML & JavaScript (Source Code)
Digital Clock Using HTML & JavaScript (Source Code)

 

ADVERTISEMENT

ADVERTISEMENT

Hello Coder! Welcome to the Codewithrandom blog. In this blog, we learn how to create a Digital Clock. We use HTML, CSS, and JavaScript for this Digital Clock.

I hope you enjoy our blog so let’s start with a basic html Structure for a digital Digital Clock.

ADVERTISEMENT

HTML Code For Digital Clock

<div class="clock">
<span class="clock__digit">0</span>
<span class="clock__digit">0</span>
<span class="clock__digit">:</span>
<span class="clock__digit">0</span>
<span class="clock__digit">0</span>
<span class="clock__digit">:</span>
<span class="clock__digit">0</span>
<span class="clock__digit">0</span>
</div>

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.

ADVERTISEMENT

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

Html Code Output

Digital Clock Using HTML & JavaScript
Digital Clock Using HTML & JavaScript

CSS Code For Digital Clock

* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--hue: 223;
--bg: hsl(var(--hue),10%,90%);
--fg: hsl(var(--hue),10%,10%);
--primary: hsl(var(--hue),90%,55%);
--shadow: hsl(var(--hue),90%,35%);
font-size: calc(20px + (40 - 20) * (100vw - 320px) / (1280 - 320));
}
body {
background: var(--bg);
color: var(--fg);
font: 1em/1.5 Spartan, sans-serif;
height: 100vh;
display: grid;
place-items: center;
}
.clock {
background-color: var(--primary);
background-image: linear-gradient(-45deg,hsla(var(--hue),10%,10%,0),hsla(var(--hue),10%,10%,0.2));
border-radius: 0.25rem;
box-shadow: 0 0 0 0.1rem hsla(var(--hue),10%,10%,0.2) inset;
color: hsl(var(--hue),10%,100%);
display: flex;
justify-content: center;
font-size: 2em;
line-height: 1;
padding: 0.25rem 0.5rem;
}
.clock__digit {
display: inline-block;
font-weight: bold;
text-align: center;
text-shadow:
0 0 0 var(--shadow),
0 0 0 var(--shadow),
1px 1px 0 var(--shadow),
2px 2px 0 var(--shadow),
3px 3px 0 var(--shadow),
3px 3px 0 var(--shadow),
4px 4px 0 var(--shadow);
width: 1ch;
}
.clock__digit:not(:nth-child(3n)) {
margin-top: 0.25rem;
}
.clock__digit--bounce {
animation: bounce 0.5s ease-in;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: hsl(var(--hue),10%,10%);
--fg: hsl(var(--hue),10%,90%);
}
}
/* Animations */
@keyframes bounce {
from, to {
animation-timing-function: ease-in;
text-shadow:
0 0 0 var(--shadow),
0 0 0 var(--shadow),
1px 1px 0 var(--shadow),
2px 2px 0 var(--shadow),
3px 3px 0 var(--shadow),
3px 3px 0 var(--shadow),
4px 4px 0 var(--shadow);
transform: translate(0,0);
}
33% {
animation-timing-function: ease-out;
text-shadow:
0 0 0 var(--shadow),
0 0 0 var(--shadow),
0 0 0 var(--shadow),
0 0 0 var(--shadow),
0 0 0 var(--shadow),
1px 1px 0 var(--shadow);
transform: translate(4px,4px);
}
67% {
animation-timing-function: ease-in;
text-shadow:
1px 1px 0 var(--shadow),
2px 2px 0 var(--shadow),
3px 3px 0 var(--shadow),
4px 4px 0 var(--shadow),
5px 5px 0 var(--shadow),
6px 6px 0 var(--shadow);
transform: translate(-2px,-2px);
}
}

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

ADVERTISEMENT

Restaurant Website Using HTML and CSS

Output

Digital Clock Using HTML & JavaScript

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

ADVERTISEMENT

JavaScript Code For Digital Clock

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

ADVERTISEMENT

 

Digital Clock Using HTML & JavaScript
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!

ADVERTISEMENT

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.

ADVERTISEMENT

Written by – Code With Random/Anki 

ADVERTISEMENT

code by – @jkantner

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT