Design a Digital Clock with Alarm Using jQuery

In this tutorial, we’ll learn how to create a digital clock with an alarm feature using HTML, CSS, and jQuery. This is an interactive project where you can set multiple alarms, remove them, and stop the alarm sound when it rings.

Features of the Digital Clock with Alarm

Real-Time Clock: Displays the current time in a clean and stylish format.
Set Alarms: Users can set alarms using an intuitive interface.
Alarm Notifications: A sound plays when the current time matches any set alarm.
Manage Alarms: Options to stop the alarm and remove alarms from the list dynamically.

Follow this video for complete guidance:

Complete Source Code

Here’s the complete code. You can copy and paste it into your project to see it in action.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Digital Clock & Alarm</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      background-color: #282c34;
      color: #61dafb;
      margin: 0;
      padding: 0;
    }

    .container {
      margin-top: 50px;
      padding: 20px;
    }

    #clock {
      font-size: 48px;
      margin-bottom: 20px;
    }

    input, button {
      margin: 10px 5px;
      padding: 10px;
      border: none;
      border-radius: 5px;
      font-size: 16px;
    }

    input {
      width: 150px;
    }

    button {
      background-color: #61dafb;
      color: #282c34;
      cursor: pointer;
    }

    button:hover {
      background-color: #21a1f1;
    }

    .alarm-list {
      width:50%;
      margin:0 auto;
    }

    .alarm-item {
      margin: 15px 0;
      padding: 5px;
      background: #444;
      border-radius: 5px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      color: white;
    }

    .stop-btn {
      display: none;
      margin-top: 20px;
      padding: 10px;
      background: red;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .stop-btn:hover {
      background: darkred;
    }
  </style>
</head>
<body>
  <div class="container">
    <div id="clock">00:00:00</div>
    <input type="time" id="alarmInput" />
    <button id="setAlarmBtn">Set Alarm</button>
    <div class="alarm-list" id="alarmList"></div>
    <button class="stop-btn" id="stopAlarmBtn">Stop Alarm</button>
  </div>

  <audio id="alarmSound" src="alarm.mp3" preload="auto"></audio>
<script>
  $(function () {
    const alarms = [];
    const $clock = $('#clock');
    const $alarmInput = $('#alarmInput');
    const $alarmList = $('#alarmList');
    const $stopAlarmBtn = $('#stopAlarmBtn');
    const alarmSound = $('#alarmSound')[0];

    // Update clock
    setInterval(() => {
      const now = new Date();
      $clock.text(now.toLocaleTimeString('en-GB'));
      const currentTime = now.toTimeString().slice(0, 5);
      if (alarms.includes(currentTime)) {
        alarmSound.play();
        $stopAlarmBtn.show();
        alarms.splice(alarms.indexOf(currentTime), 1);
        $alarmList.find(`[data-time="${currentTime}"]`).remove();
      }
    }, 1000);

    // Add alarm
    $('#setAlarmBtn').on('click', () => {
      const time = $alarmInput.val();
      if (time && !alarms.includes(time)) {
        alarms.push(time);
        $alarmList.append(`<div data-time="${time}" class="alarm-item">${time} <button class="remove-btn">Remove</button></div>`);
        $alarmInput.val('');
      } else {
        alert('Enter a valid time or avoid duplicates.');
      }
    });

    // Remove alarm
    $alarmList.on('click', '.remove-btn', function () {
      const time = $(this).parent().data('time');
      alarms.splice(alarms.indexOf(time), 1);
      $(this).parent().remove();
    });

    // Stop alarm
    $stopAlarmBtn.on('click', () => {
      alarmSound.pause();
      alarmSound.currentTime = 0;
      $stopAlarmBtn.hide();
    });
  });
</script>

</body>
</html>

Key Highlights of the Implementation

Interactive Real-Time Clock

The core feature of the project is the clock that updates every second to display the current time accurately. Using jQuery, the time is formatted and dynamically displayed on the page.

ALSO READ Image Grayscale and Zoom effect on hover using CSS

Alarm Functionality

Users can easily set alarms by selecting a specific time from a time input field. When the selected time matches the current time, an audio notification is triggered.

Dynamic Alarm List

The alarms are displayed as a list below the input field, allowing users to track the alarms they have set. Each alarm has a “Remove” button for easy management, ensuring the interface stays clean and user-friendly.

Visual Design and Responsiveness

The interface is designed with a modern, minimalistic style using CSS. Elements like buttons and the alarm list are styled with gradients and animations to enhance the user experience. The responsive design ensures compatibility across devices.

Stop Alarm Button

When the alarm is triggered, users can stop it by clicking the “Stop Alarm” button. This immediately halts the sound and hides the button until the next alarm is triggered.

Why Use jQuery for This Project?

jQuery simplifies DOM manipulation and event handling, making it a perfect choice for building interactive features like updating the clock in real-time and dynamically managing alarms.

This project is a fantastic way to practice combining HTML, CSS, and jQuery to create something both fun and functional. It’s also a great starting point for exploring advanced features, such as recurring alarms or snooze functionality.

By completing this project, you’ll not only enhance your understanding of jQuery but also learn how to design and implement real-world web applications. Happy coding!