Building a Stylish Digital Clock with HTML, CSS, & JavaScript

Published on 17 Feb, 2024

intro-HELLO AND WELCOME TO LSET TECH BITES

Let’s go through the HTML code for a digital clock together.

First, we have the document type declaration, which specifies that this is an HTML5 document. Next, the <html> tag encloses the entire HTML document and includes the “lang” attribute set to “en” to define the language as English.

Moving on to the <head> section:
Within the <head> section, we have the meta tag with the charset attribute set to “UTF-8”, which specifies the character encoding for the document.
Then, the viewport meta tag is used to control the layout on different devices, with the “width=device-width” and “initial-scale=1.0” attributes.
The <title> tag sets the title of the HTML document as “Document”.

Now, let’s take a look at the <body> section:
We start with an <h1> tag that displays “Digital Clock” as the main heading of the page.
Following that, there’s a <div> with the id attribute set to “clock”, which will likely be used to display the actual digital clock content.

Let’s walk through the CSS code for styling the digital clock HTML page.

First, we have the selector “body” which sets the styles for the entire body of the document. We are using the Arial font family, adding some top margin, centring the text, and giving the background a light grey colour.

Moving on to the “#clock” ID selector:
This section styles the element with the ID “clock”, which is the digital clock display. It sets the font size to 3rem (which translates to three times the size of the root element’s font), the text colour to a dark grey, applies a 2px solid dark grey border with a slight border-radius for rounded corners, adds padding inside the element, and sets it to display as an inline block.

Now, let’s delve into the JavaScript code responsible for creating and updating the digital clock.

We will start with a <script> tag, where we define the following function:
The function “updateclock” is created to update the time display. Inside this function:
– The current date and time are obtained using the Date object.
– The hours, minutes, and seconds are extracted from the date and converted to strings. If any of these values are single digits, they are padded with a leading zero using the padStart() method.
– The time is then concatenated in the format “HH:MM:SS”.
– Finally, the text content of the element with the ID “clock” is updated with newly formatted time.

Next, we have the setInterval() method:
This method calls the updateclock function at regular intervals (in this case, every 1000 milliseconds or 1 second), ensuring that the clock display is updated in real-time.

The updateclock function is immediately invoked after its definition:
By calling updateclock() outside of the function, we ensure that the clock display is updated as soon as the page loads.

At the end, you will see that the Digital Clock is fully prepared for use. Please hit the like button and subscribe to our channel for regular updates.

Our Latest Blog

Your Shortcut to IT Success Become an Automation Testing Expert!

January 15, 2025ByFlorence

Our Latest Blog

Your Shortcut to IT Success: Become an Automation Testing Expert!

Docker Desktop Blocked on macOS Due to False Malware Alert

Level Up Your Tech Career with LSET’s Automation Testing Course

Popular Courses

Follow Us