It is quite simple to create a digital clock. This source code is written for anyone who is new to JavaScript and wants to learn to write How To Develop Digital Clock In JS(JavaScript) understood easily.
There are two sorts of clocks analog and digital and We’ll consider producing a digital version.
If utilized correctly, clocks may be a helpful feature in any user interface.
This will teach you how to access the DOM, add action to them, and so much more.
Clocks can be used on sites where time is of the essence, such as booking sites or apps that display rail, bus, and airplane arrival times, among other things.
This useful tool is used to create a digital clock that runs on the web and uses other web-based technologies like HTML and CSS.
HTML
To begin with, create a div with id clock in which you want to display time. We will insert the time into this div using JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Live Digital Clock</title>
</head>
<body>
<section>
<div class="container">
<div class="time">
<div class="time-colon">
<div class="time-text">
<span class="num hour_num">08</span>
<span class="text">Hours</span>
</div>
<span class="colon">:</span>
</div>
<div class="time-colon">
<div class="time-text">
<span class="num min_num">08</span>
<span class="text">Minutes</span>
</div>
<span class="colon">:</span>
</div>
<div class="time-colon">
<div class="time-text">
<span class="num sec_num">08</span>
<span class="text">Seconds</span>
</div>
<span class="am_pm">AM</span>
</div>
</div>
</div>
</section>
</body>
<script src="script.js"></script>
</html>CSS
Cascading Style Sheet is an abbreviation for Cascading Style Sheet.
It is the tool that we use to add designs to our online content, such as colors. It is a web page design, style, and formatting tool.
Our clock has just been positioned in the middle of the page.
Apart from that, it’s only a matter of changing the font size and width to suit your needs.
/* Google fonts import link */
@import url("https://fonts.googleapis.com/css2?family=Orbitron:[email protected];500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Orbitron", sans-serif;
}
section {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #f0f8ff;
}
section .container {
display: flex;
align-items: center;
justify-content: center;
height: 220px;
max-width: 560px;
width: 100%;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
section .container .time {
display: flex;
align-items: center;
/* justify-content: center; */
}
.container .time .time-colon {
display: flex;
align-items: center;
position: relative;
}
.time .time-colon .am_pm {
position: absolute;
top: 0;
right: -50px;
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
}
.time .time-colon .time-text {
height: 100px;
width: 100px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
background-color: #f0f8ff;
border-radius: 6px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.time .time-colon .time-text,
.time .time-colon .colon {
font-size: 35px;
font-weight: 600;
}
.time .time-colon .colon {
font-size: 40px;
margin: 0 10px;
}
.time .time-colon .time-text .text {
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
}
JavaScript
In JavaScript, the Date object represents the date and time.
The date is maintained inside the object as a number in milliseconds.
The Date function Object native code is used to build the Date object. When you create a new Date object, it will return the current date and time.
// creating a function and calling it in every seconds
setInterval(() => {
let date = new Date,
hour = date.getHours(),
min = date.getMinutes(),
sec = date.getSeconds();
let d;
d = hour < 12 ? "AM" : "PM";//if hour is smaller than 12, than its value will be AM else its value will be pm
hour = hour > 12 ? hour - 12 : hour;//if hour value is greater than 12 than 12 will subtracted ( by doing this we will get value till 12 not 13,14 or 24 )
hour = hour == 0 ? hour = 12 : hour; // if hour value is 0 than it value will be 12
// adding 0 tothe front of all the value
hour = hour < 10 ? "0" + hour : hour;
min = min < 10 ? "0" + min : min;
sec = sec < 10 ? "0" + sec : sec;
document.querySelector(".hour_num").innerText = hour;
document.querySelector(".min_num").innerText = min;
document.querySelector(".sec_num").innerText = sec;
document.querySelector(".am_pm").innerText = d;
}, 1000); // 1000 milliseconds = 1sConclusion
Clocks can be used on sites where time is critical, such as booking sites or applications that display arrival times for trains, buses, and airplanes, among other things.
This handy tool is used to construct a web-based digital clock that employs HTML and CSS, as well as other web-based technologies.
Building a digital clock with JavaScript may be a great project for a novice to learn the fundamentals of the language.
