Digital Clock Using HTML CSS and JavaScript
Tags: javascript, webdev, html, css
Published: 2021-04-09 03:00:50


This article was originally published on my blog [WebDevIdea](https://webdevidea.com/blog/javascript-digital-clock/).

Building a digital clock is a good idea if you want to improve your JavaScript skills as a beginner. You will learn a lot about how to use JavaScript dates and timing functions. So this is a very useful project for beginners.

It was one of the projects that I have tried in my 100 days of code challenge. Honestly, It's easy to build a digital clock, you just need some HTML/CSS basics and of course a little bit of JavaScript, especially date methods and manipulating the DOM.

In this article, we will use HTML CSS and vanilla JavaScript in order to build a simple real-time digital clock. So let's get started.

## The HTML Code
When it comes to HTML code, it's very simple. We just need one div that contains a heading where we will display the time in hours, minutes, and seconds using JavaScript.

Here is the code example:
```html
<div class="parent">
    <h1></h1>
 </div>
```

As you can see, that's all we need in HTML. For the heading `h1`, we will leave it empty because we will use JavaScript later to display the time on it.

## The JavaScript logic
Now we will use JavaScript to display an updated time in hours, minutes, and seconds. We will also add a simple animation for our digital clock.
Firstly, let's select our HTML elements:
```javascript
// Selecting The HTML elements.
const parentDiv = document.querySelector('.parent');
const h1 = document.querySelector('h1');
```
After that, we will create a function called `digitalClock`. Inside that function, we will access the Date object to get the time in hours, minutes, and seconds.
Here is the example:
```javascript
const digitalClock = () => {
    const dateObj = new Date();
    let hours = dateObj.getHours();
    let minutes = dateObj.getMinutes();
    let secondes = dateObj.getSeconds();
  
  //Adding a zero to the left of the time if it's less or equal to 9.
    if(+hours <= 9){
        hours = `0${hours}`;
    }
   if(+minutes <= 9){
        minutes = `0${minutes}`;
    }
   if(+secondes <= 9){
        secondes = `0${secondes}`;
    }

//display the time on the h1 element.
 h1.innerHTML = `${hours}:${minutes}:${secondes}`;

//Toggling the animate class.
parentDiv.classList.toggle('animate');
}
```
In the example above, we added the time to the h1 with the property `innerHTML`. In addition to that,  we have also toggled the class `animate` that we have created in CSS in order to create an animation that changes the color of the clock’s border.

Now in order to have a real-time clock that updates the time every second, we will need to use `setInterval` in order to execute the function `digitalClock` every 1000 milliseconds(1 second). As a result, the time will get updated every 1 second.
Here is an example:
```javascript
setInterval(digitalClock, 1000);
```


## The CSS part
After adding JavaScript, the clock is functional now. We just need to add some styling to it.
Read the CSS code below to see our stylesheet:
```css
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: rgb(36, 35, 35);
    color: rgb(63, 252, 63);
}
.parent{
    width: 400px;
    height: 400px;
    background: rgb(22, 22, 22);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border:  rgb(63, 252, 63) 10px solid;
}
/* Creating the class for our animation. */
.animate{
    border:  rgb(245, 39, 32) 10px solid;
}
/*the time styles*/
.parent h1{
    font-weight: 900;
    font-size: 60px;
}
```
That's it. We built a simple digital clock using HTML CSS and JavaScript.
## JavaScript Clock
Here is a Codepen example of the [Project Demo](https://codepen.io/MehdiAoussiad/full/BaLVpab?editors=1010) to check it out.

## Conclusion
As you can see, building a clock is not difficult. Also, if you practice a lot, you will definitely get better because practice is what makes the perfect. It's the only to grow and become a good developer.
Thank you for reading this article.