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)