Posted on Dec 8, 2021

Let's create a digital clock with CSS & JS

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)