Digital clock

In the HTML file, we have a simple structure for the digital clock. It consists of a

element with the class "clock" that acts as a container for our clock. Inside this container, we have another element with the id "time" where the current time will be displayed.

CSS (styles.css):

The CSS file contains some basic styles to create a visually appealing display for the digital clock. We center the clock on the page by setting display: flex, justify-content: center, and align-items: center on the

element. The clock itself is styled with a white background, a 48px font size, a box shadow effect to add depth, and rounded corners using the border-radius property.

JavaScript (script.js):

The JavaScript file contains the functionality for updating the digital clock's display with the current time. The updateTime() function is responsible for getting the current time using the Date object and formatting it into hours, minutes, and seconds with leading zeros (using padStart() method) to ensure two digits for each value.

We then get the element with the id "time" using document.getElementById("time") and update its textContent property to show the formatted time.

The setInterval() method is used to call the updateTime() function every second (1000 milliseconds) so that the clock continuously updates and displays the accurate time.

Finally, we call updateTime() once initially to set the time correctly when the page loads.

When you open the HTML file in your browser, you'll see a digital clock displaying the current time, and it will update every second to reflect the real-time. The styles applied through CSS give the clock a clean and visually pleasing appearance.