Hello Coders, In this article we are going to learn how to create a digital clock using HTML CSS and JavaScript.
JavaScript Date Object
In JavaScript we have an Date Object which can be used to get the current date and time of the system. Using this data object we can easily get today’s data as well as the current time with hours, minutes and seconds values.
We will be using HTML to define the structure of this project and will use CSS to style it and then finally the main Important part is JavaScript to Make the clock actually work.
Build a JavaScript Digital Clock | Video Tutorial
In the above video tutorial, I have shown how to build this project step by step. Consider watching the video tutorial to build this JavaScript Projects. I hope you watched the video and understood.
Build a JavaScript Digital Clock | Source Codes
Below I have provided the HTML CSS and JavaScript Source code of Digital Clock. You can also download complete source code by clicking on the download button at the bottom of this article.
How do I create Digital Clock in HTML? HTML Source Code
Create an index.html file and copy the below code.
<!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" />
<title>Digital Clock</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="clock">
<div id="hour">00</div>
<span>:</span>
<div id="minute">00</div>
<span>:</span>
<div id="seconds">00</div>
</div>
<script src="script.js"></script>
</body>
</html>
How do I design Digital Clock in CSS? CSS Source Code
Create an styles.css file and copy the below code
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient(to right, #ff9472, #f2709c);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Open Sans', sans-serif;
}
.clock {
width: 550px;
height: 150px;
display: flex;
align-items: center;
justify-content: space-between;
}
.clock div {
background-color: #fff;
height: 100%;
width: 150px;
display: flex;
align-items: center;
justify-content: center;
font-size: 60px;
color: #202020;
border-radius: 5px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
letter-spacing: 3px;
}
.clock span {
font-weight: bolder;
font-size: 60px;
color: #fff;
}
How do I Build Digital Clock in JavaScript? JavaScript Source Code
Create an script.js file and copy the below codes.
const hour = document.getElementById('hour');
const minute = document.getElementById('minute');
const seconds = document.getElementById('seconds');
const clock = setInterval(function time() {
let dateToday = new Date();
let hr = dateToday.getHours();
let min = dateToday.getMinutes();
let sec = dateToday.getSeconds();
if (hr < 10) {
hr = '0' + hr;
}
if (min < 10) {
min = '0' + min;
}
if (sec < 10) {
sec = '0' + sec;
}
hour.textContent = hr;
minute.textContent = min;
seconds.textContent = sec;
}, 1000);
This is what you will have after completing this project.
