So, Today we are going to build a digital greeting clock using javascript so lets start,lets see the folder structure
DIGITAL CLOCK ├───css └───js
in the project root make an index.html file and make a css file in css folder and a js file in js folder open root folder in code editor
code .
now lets start codding the entire html file

after that we have to code the css

now the main part the javascript open the js file code the js
lets code the clock
const clock = () => {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var midday;
hours = updateTime(hours);
minutes = updateTime(minutes);
seconds = updateTime(seconds);
var name = "Hacker";
// if else condition
midday = (hours >= 12) ? "PM" : "AM";
document.getElementById("clock").innerHTML =
""+hours+"" + ":" + ""+minutes+"" + ":" + ""+seconds+"" + ""+midday+"";
var time = setTimeout(function () {
clock();
}, 1000);
// Good Morning and Good Night Conditions
if (hours < 12) {
var greeting = "Good Morning " + name + " Hurry Up!";
}
if (hours >= 12 && hours <= 18) {
var greeting = "Good Afternoon " + name;
}
if (hours >= 18 && hours <= 24) {
var greeting = "Good Evening " + name;
}
document.getElementById("greetings").innerHTML = greeting;
}
now lets update the time and call the clock function
const updateTime = (k) => {
if (k < 10) {
return "0" + k;
} else {
return k;
}
}
// call clock function
clock();
there you have it it is done please follow me on github the code is also on github
github: https://github.com/Sadman-Sakib2234/
code: https://github.com/Sadman-Sakib2234/Greetings-clock-js
twitter: https://twitter.com/SakibDev
Top comments (0)