Digital Clock Using JavaScript with Source Code

In this project, we are going to create a simple Digital clock using JavaScript. Clocks can be used in sites where time is of the essence, such as booking sites or apps that display rail, bus, and aircraft arrival times, among other things. There are two sorts of clocks: analog and digital. We’ll consider making a digital version.

For this, we are going to use HTML, CSS, and JavaScript. Let’s Move on to the tutorial. For this First Let’s Code HTML

HTML Code For Digital Clock


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Digital Clock</title>
</head>
<body>
	<div id="myclock" class="clock" onload="showTime()"> </div>

</body>
</html>

CSS Code For the Digital Clock


<style>
    body {
    background: #738FA7;
}

.clock {
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    color: #071330;
    font-size: 70px;
    top: 50%;
    left: 50%;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 7px;

}
</style>

This Code will Design our Digital Clock. Now Let’s Add the js code to Digital Clock

JS Code For Digital Clock


<script>
setInterval(showTime, 1000);
function showTime() {
    var time = new Date();
    var hour = time.getHours();
    var min = time.getMinutes();
    var sec = time.getSeconds();
    session = "AM";
  
    if (hour > 12) {
        hour -= 12;
        session = "PM";
    }
    if (hour == 0) {
        hr = 12;
        session = "AM";
    }
  
    hour = hour < 10 ? "0" + hour : hour;
    min = min < 10 ? "0" + min : min;
    sec = sec < 10 ? "0" + sec : sec;
  
    let currentTime = hour + ":" 
            + min + ":" + sec + session;
  
    document.getElementById("myclock")
            .innerHTML = currentTime;
}
showTime();
</script>

You can see the whole code for the Project Below


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Simple Digital Clock using Js </title>
</head>
<body>
	<div id="myclock" class="clock" onload="showTime()"> </div>

<style>
    body {
    background: #738FA7;
}

.clock {
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    color: #071330;
    font-size: 70px;
    top: 50%;
    left: 50%;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 7px;

}
</style>
<script>

setInterval(showTime, 1000);
function showTime() {
    var time = new Date();
    var hour = time.getHours();
    var min = time.getMinutes();
    var sec = time.getSeconds();
    session = "AM";
  
    if (hour > 12) {
        hour -= 12;
        session = "PM";
    }
    if (hour == 0) {
        hr = 12;
        session = "AM";
    }
  
    hour = hour < 10 ? "0" + hour : hour;
    min = min < 10 ? "0" + min : min;
    sec = sec < 10 ? "0" + sec : sec;
  
    let currentTime = hour + ":" 
            + min + ":" + sec + session;
  
    document.getElementById("myclock")
            .innerHTML = currentTime;
}
showTime();
</script>
</body>
</html>