DEV Community

Cover image for Let's create a digital clock with CSS & JS
Shuvo
Shuvo

Posted on

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.
css js digital clock
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>
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

Now if you open it up in a browser it should look like this
CSS digital clock design
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()
Enter fullscreen mode Exit fullscreen mode

get current time using javascript
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)
Enter fullscreen mode Exit fullscreen mode

css js digital clock
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

0shuvo0 image




Was it helpful? Support me on Patreon

Patreon Logo

Discussion (1)

Collapse
lukeshiru profile image
Luke Shiru

You could just:

const updateClock = clock =>
    setInterval(
        () => (clock.textContent = new Date().toLocaleTimeString()),
        1_000,
    );

updateClock(document.querySelector(".clock span"));
Enter fullscreen mode Exit fullscreen mode

No need to do all that parsing when Date already does that for you.

Cheers!