Digital Clock Project with Html, Css and Javascript (Part 3)

Hello Friends, We are going to built Client site real time Digital clock with the help of Html, CSS and Javascript.

So, Let's get started.

Digital Clock

Real Time Digital Clock

Javascript Section;

In this section we are going to add functionalty to our clock with help of Javascript library new date and funcation. We are getting element by id from our Html file and changing them as our time should change in our digital clock. Creating a function appling conditions in it changing elements triger our funcation and boom... our clock is ready.

const hourEL = document.getElementById("hours");

const mintEL = document.getElementById("minutes");

const secEL = document.getElementById("seconds");

const ampmEL = document.getElementById("ampm");

const dateEL = document.getElementById("dates");

function updateclock() {

let h = new Date().getHours();

let m = new Date().getMinutes();

let s = new Date().getSeconds();

let dEL = new Date().toDateString();

let ampm = "AM"

if (h > 12) {

h = h - 12;

ampm = "PM";

}

h = h < 10 ? "0" + h : h;

m = m < 10 ? "0" + m : m;

s = s < 10 ? "0" + s : s;

hourEL.innerText = h;

mintEL.innerText = m;

secEL.innerText = s;

ampmEL.innerText = ampm;

dateEL.innerText = dEL;

setTimeout(() => {

updateclock()

}, 1000)

}

updateclock()

Html Section

CSS Section