DEV Community

Cover image for How to make a digital greeting clock using javascript
professor_2390
professor_2390

Posted on

How to make a digital greeting clock using javascript

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
html
after that we have to code the css
Alt Text
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)