Let's create a digital clock with CSS & JS

#css #javascript #webdev #beginners

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)