Digital Clock Using HTML CSS and JavaScript

#javascript #webdev #html #css

This article was originally published on my blog WebDevIdea.

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:

<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:

// 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:

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:

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:

*{
    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 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.