Digital Clock & Alarm

DIGITAL CLOCK

–:–:–

—

— –, —-

|

–°F / –°C

Alarm Setter (Local Device Time)

:

Real-time digital clock and date display

This file includes the same features:

  1. Real-time digital clock and date display.
  2. Dynamic dark/light mode background based on the time of day.
  3. An interactive alarm setter with dropdowns.
  4. A full-screen modal notification when the alarm is triggered.

Sound to your Real-time digital clock!

To ensure the sound works reliably across browsers, I’m using the Web Audio API to generate a noticeable, sharp beep when the alarm is triggered. The sound will repeat every second while the alarm is sounding.

The alarm now has an audible beep that sounds along with the visual modal when the set time is reached! I’ve also made sure the AudioContext is initialized on a user click (when you first set the alarm) to comply with modern browser autoplay policies.

  1. State management for setting, tracking, and triggering an alarm.
  2. Dropdown inputs for selecting the alarm hour, minute, and AM/PM.
  3. Alarm logic that checks the current time against the set alarm every second.
  4. A visual notification (modal style) that appears and flashes when the alarm is triggered.

Here is the updated file:

You can now select the hour, minute, and AM/PM, set the alarm, and watch for the full-screen notification when the set time arrives! When the alarm sounds, just click the “Snooze / Stop” button (or anywhere on the screen) to dismiss the notification.

What would you like to add next? Maybe a countdown timer or a multi-timezone display?

A Beginner’s Guide using HTML, CSS, and JavaScript

This project is one of the most fundamental exercises in web development. It teaches you how to structure content (HTML), style it (CSS), and use JavaScript’s built-in timing functions (Date() and setInterval()) to create a dynamic, constantly updating interface element.

📁 Project Setup

Create a new folder and three files inside it:

  1. index.html (The structure)
  2. style.css (The appearance)
  3. script.js (The real-time functionality)

Step 1: HTML Structure (index.html)

The HTML provides the containers that will hold the time and date. We use <div> elements and assign them unique IDs so JavaScript can easily target and update their content.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Digital Clock</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div id="clock-container">
        <div id="time-display"></div>
        
        <div id="date-display"></div>
    </div>

    <script src="script.js"></script>
</body>
</html>

Step 2: CSS Styling (style.css)

This CSS provides the “digital” look and ensures the clock is centered on the screen, improving the presentation.

CSS

body {
    /* Full screen dark background */
    background-color: #1a1a1a; 
    /* Centers the clock container */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    /* A common font for a digital/tech look */
    font-family: monospace; 
}

#clock-container {
    text-align: center;
    /* Classic digital green color */
    color: #00ff00; 
    padding: 30px 40px;
    border: 3px solid #00ff00;
    border-radius: 8px;
    /* Subtle glow for effect */
    box-shadow: 0 0 25px rgba(0, 255, 0, 0.5); 
}

#time-display {
    font-size: 6em; /* Large size for the main time */
    letter-spacing: 5px;
    font-weight: bold;
}

#date-display {
    font-size: 1.8em; /* Smaller size for the date */
    margin-top: 10px;
}

Step 3: JavaScript Functionality (script.js)

This is the core of the project. It uses the Date object to fetch the current system time and the setInterval function to ensure the time updates precisely every second.

JavaScript

// Function to get the current time and update the display
function updateClock() {
    // 1. Create a new Date object to get the current moment
    const now = new Date();

    // 2. Format the time (Hours, Minutes, Seconds)
    // toLocaleTimeString is efficient for getting a localized, clean time string.
    const timeOptions = { 
        hour: '2-digit', 
        minute: '2-digit', 
        second: '2-digit', 
        hour12: true // Set to false for 24-hour format
    };
    const currentTime = now.toLocaleTimeString('en-US', timeOptions);

    // 3. Format the date (Weekday, Month, Day, Year)
    const dateOptions = { 
        weekday: 'long', 
        year: 'numeric', 
        month: 'long', 
        day: 'numeric' 
    };
    const currentDate = now.toLocaleDateString('en-US', dateOptions);

    // 4. Update the content of the HTML elements using their IDs
    document.getElementById('time-display').innerText = currentTime;
    document.getElementById('date-display').innerText = currentDate;
}

// 5. Initial call to display the clock immediately without waiting 1 second
updateClock();

// 6. Call the updateClock function every 1000 milliseconds (1 second) 
// to ensure the clock is running in real-time.
setInterval(updateClock, 1000);

How to Run the Real-Time Digital Clock

Real-Time Digital Clock and Date Display, Alarm
Real-Time Digital Clock and Date Display, Alarm
  1. Save all three files in the same folder.
  2. Right-click on index.html and select “Open with…” your preferred web browser (Chrome, Firefox, Edge, etc.).
  3. The real-time digital clock and date will appear on the screen and update every second.