In this article I'm going to create a digital clock using html, css and javascript. below is the final output we'll be going to create:
The format of the clock is YYYY/MM/DD HH:MM:SS AM|PM, and our clock is also updating minutes seconds, hours and date accordingly.
To create a digital clock using JavaScript, we can use the setInterval function to update the time display every 1000 milliseconds (1 second). We will be using the Date object to get the current time, and then use methods like getFullYear, getMonth, getDate, getHours, getMinutes, and getSeconds to extract the current year, month, date, hour, minute, and second, so as of now we know what we have to do let’s start, but before that I’m going to split the code in three parts: HTML, CSS and JavaScript each one have their own file and in the end we’ll connect CSS and JavaScript with HTML.
HTML Code
Create a directory called Digital Clock and CD into the Digital Clock directory and open this directory inside any code editor you want.
Once the code editor is loaded create a html file index.html, and paste the following code in that:
<!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 Using HTML, CSS and JavaScript</title>
</head>
<body>
<div class="box">
<div>
<span>
<h1 style="margin-bottom: -30px;">Digital Clock</h1>
by programmingeeksclub
</span>
<p id="digitalClock">2022/12/18 10:22:05</p>
</div>
</div>
</body>
</html>
As of now we don’t have any css file yet create if you still try to open this file in browser you’ll see the following output:
Add CSS
Now let’s add the css into our template to make it look good, for that in the same direcotory let’s create a style.css file and add the following code into it:
@import url('https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Diplomata+SC&display=swap');
body {
background-color: midnightblue;
color: whitesmoke;
font-family: 'Bungee Shade', cursive;
letter-spacing: 0.1em;
}
#digitalClock {
font-size: 5px;
margin-top: -5px;
text-align: center;
font-family: 'Diplomata SC', cursive;
}
.box {
display: flex;
align-items: center;
justify-content: center;
}
h1 {
font-size: 15px;
}
span {
font-size: 5px;
}
Now if you look at the output you’ll see the new look of our digital clock:
Add JavaScript
Below is the javascript code:
// make div gloabally accessable
var containingItem = document.getElementById('digitalClock');
// give us the zero leading values
function ISODateString(d) {
function pad(n) {
return n < 10 ? '0' + n : n
}
return d.getFullYear() + '-' +
pad(d.getMonth() + 1) + '-' +
pad(d.getDate()) + ' ' +
pad(d.getHours()) + ':' +
pad(d.getMinutes()) + ':' +
pad(d.getSeconds()) + ' ' +
pad(d.getHours() >= 12 ? 'PM' : 'AM')
}
let doc = () => {
let t = new Date();
containingItem.innerHTML = ISODateString(t);
}
// set interval 1 sec so our clock
// our clock output can update on each
// second
setInterval(() => { doc() }, 1000);
If you found this helpful then you can give this article a heart, also checkout my website there, I upload more article like that and you'll found it helpful.
My Personal Blogging Website : Programming Geeks Club
My Facebook Page : Programming Geeks Club
My Telegram Channel : Programming Geeks Club
My Twitter Account : Kuldeep Singh
My Youtube Channel: Programming Geeks Club
Top comments (0)