Let's create a digital clock with CSS & JS
Tags: javascript, webdev, beginners, css
Published: 2021-12-08 10:48:46

In this article I will show you how to create a working Digital Clock using CSS and JavaScript.
![css js digital clock](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ycf398guz6jxa68nsptp.gif)
Lets start by creating a **index.html**
```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**
```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
![CSS digital clock design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e6951zi2nh9y21c94u96.png)
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.
```js
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()
```
![get current time using javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1urn9bgo186w3d4sefjd.png)
Now instead of console logging them we simply have to update the text of our **span** and them call the `updateClock` function every seconds
```js
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)
```
![css js digital clock](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ycf398guz6jxa68nsptp.gif)
And its that easy.
Hey did I earned a coffee from you? [Buy Me A Coffee](https://www.buymeacoffee.com/0shuvo0)
 
Make sure you checkout my other articles and YouTube channel
{% user 0shuvo0 %}
{% youtube qcjwkvezZRk %}
## Was it helpful? Support me on Patreon
[![Patreon Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vnw8g7vs5pok3jwgtgv.png)](https://www.patreon.com/0shuvo0)