Building a Simple Digital Clock Using HTML, CSS, and JavaScript

Introduction:

In this blog post, we’ll walk through the creation of a minimalist digital clock using HTML, CSS, and JavaScript. This project is not only functional but also visually appealing, making it a great addition to your website. Let’s dive into the code and understand how it works.

HTML Structure: We begin with the basic HTML structure, including meta tags for character set and viewport, a link to an external stylesheet (style.css), and a script reference to our JavaScript file (script.js). Inside the body, we have a container div that centers the digital clock.

JavaScript Functionality: The JavaScript file (script.js) contains a function called calculateTime, which is triggered on the ‘load’ event. This function retrieves the current date and time, calculates the hour, minute, and AM/PM, and updates the corresponding HTML elements. The setTimeout function is used to refresh the time every 200 milliseconds, creating a real-time clock effect.

// Add an event listener to execute calculateTime function when the window has finished loading
window.addEventListener('load', calculateTime);

// Define the calculateTime function
function calculateTime() {
    // Create a new Date object representing the current date and time
    let date = new Date();

    // Get the day of the week as a number (0 for Sunday, 1 for Monday, ..., 6 for Saturday)
    var dayNumber = date.getDay();

    // Get the current hour
    var hour = date.getHours();

    // Get the current minute
    var minute = date.getMinutes();

    // Determine whether it's AM or PM based on the value of the hour
    var ampm = hour >= 12 ? 'PM' : 'AM';

    // Array containing the abbreviated names of the days of the week
    var dayNames = ["SUN", "MON", "TUE", "WED", "THRU", "FRI", "SAT"];

    // Convert the hour to a 12-hour format
    hour = hour % 12;

    // Handle the case when the hour is 12
    hour = hour == 12 ? '12' : hour;

    // Add leading zero if the hour is less than 10
    hour = hour < 10 ? '0' + hour : hour;

    // Add leading zero if the minute is less than 10
    minute = minute < 10 ? '0' + minute : minute;

    // Update the HTML elements with corresponding IDs to display the calculated values
    document.getElementById("day").innerHTML = dayNames[dayNumber];
    document.getElementById("hour").innerHTML = hour;
    document.getElementById("minute").innerHTML = minute;
    document.getElementById("ampm").innerHTML = ampm;

    // Set a timeout to call the calculateTime function every 200 milliseconds
    setTimeout(calculateTime, 200);
}

CSS Styling: The styling is achieved through CSS, utilizing Google Fonts for a unique typeface (Poiret One). The body has a conic gradient background, creating an eye-catching color transition. The container centers the digital clock on the page, and the digital Clock class defines the appearance of the clock with rounded borders and a semi-transparent background.

Media Queries for Responsiveness: To ensure a seamless experience across different devices, media queries are employed. The clock adapts its layout for smaller screens by hiding unnecessary elements (bar1 and bar2) and adjusting font sizes.

Conclusion: By combining HTML, CSS, and JavaScript, we’ve created a simple yet elegant digital clock. This project serves as a great starting point for those looking to enhance their web development skills. Feel free to customize the styling, add features, or integrate it into your website to provide visitors with a visually appealing and functional digital clock. Happy coding!

Digital Clock Preview

Github Link: Muskankumari2002/Digital-Clock (github.com)