In this article I will show you how to create a working Digital Clock using CSS and JavaScript.
Lets start by creating a index.html
<!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>Document</title>
</head>
<body>
<div class="clock">
<span>
<!-- this text will be updated using JS -->
12:23:01 PM
</span>
</div>
<script src="main.js"></script>
</body>
</html>
And now style it using style.css
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
body{
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(26, 25, 25);
}
.clock{
padding: .75em;
background-color: rgb(26, 25, 25);
border-radius: 5px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 2em;
position: relative;
color: transparent;
}
.clock span{
background: linear-gradient(135deg, rgb(255, 145, 0), rgb(255, 0, 221), blue);
background-clip: text;
-webkit-background-clip: text;
}
.clock::before, .clock::after{
content: "";
display: block;
width: 108%;
height: 120%;
background-image: linear-gradient(135deg, rgb(255, 145, 0), rgb(255, 0, 221), blue);
position: absolute;
top: -10%;
left: -4%;
z-index: -1;
border-radius: 5px;
}
.clock::after{
filter: blur(5px);
}
Now if you open it up in a browser it should look like this
Now we just have to updated the text using JS.
In our main.js JavaScript file let's create a function that will get the current time.
const clock = document.querySelector('.clock span')
function updateClock() {
// creating a new date object
const now = new Date()
// getting the current hour
let hours = now.getHours()
// getting the current minute
let minutes = now.getMinutes()
// getting the current second
let seconds = now.getSeconds()
// getting the AM/PM
let am_pm = hours >= 12 ? 'PM' : 'AM'
// converting 24 hours format to 12 hours
if(hours > 12) hours -= 12
// adding a zero in front of the times
hours = hours < 10 ? '0' + hours : hours
minutes = minutes < 10 ? '0' + minutes : minutes
seconds = seconds < 10 ? '0' + seconds : seconds
console.log(hours, minutes, seconds, am_pm);
}
updateClock()
Now instead of console logging them we simply have to update the text of our span and them call the updateClock function every seconds
const clock = document.querySelector('.clock span')
function updateClock() {
const now = new Date()
let hours = now.getHours()
let minutes = now.getMinutes()
let seconds = now.getSeconds()
let am_pm = hours >= 12 ? 'PM' : 'AM'
if(hours > 12) hours -= 12
hours = hours < 10 ? '0' + hours : hours
minutes = minutes < 10 ? '0' + minutes : minutes
seconds = seconds < 10 ? '0' + seconds : seconds
// displaying the time
clock.innerHTML = `${hours}:${minutes}:${seconds} ${am_pm}`
}
// calling the function every second
setInterval(updateClock, 1000)
And its that easy.
Hey did I earned a coffee from you? Buy Me A Coffee
Make sure you checkout my other articles and YouTube channel
Was it helpful? Support me on Patreon
Top comments (0)