Alarm Clock In HTML Javascript (Free Download)

Once upon a time, a student is tasked to create a “classic alarm clock web app” as an exercise. He confidently told Master Coffee that “it’s just an interval time”, but came asking for tips the very next day… So here it is, let Master Coffee walk you through a simple example. Let’s go.

CODE DOWNLOAD

ZIP File

I have released this under the MIT license, feel free to use it in your own project – Personal or commercial. Some form of credits will be nice though. 🙂

VIDEO TUTORIAL

ALARM CLOCK DEMO

PART 1) THE HTML

alarm.html

<form id="aWrap" onsubmit="return alarm.toggle()">
  <!-- (PART A) CURRENT TIME -->
  <div id="aNow"></div>

  <!-- (PART B) SET ALARM -->
  <input type="time" id="aSet" required>
  <input type="submit" id="aToggle" value="Set Alarm">
</form>

This should be pretty self-explanatory.

<form id="aWrap"> A form to set the alarm, and doubles up as the alarm clock wrapper.
<div id="aNow"> To display the current time.

<input type="time" id="aSet"> Time picker to set the alarm time.

PART 2) THE JAVASCRIPT

alarm.js

var alarm = {
  // (PART A) PROPERTIES
  sound : null, // alarm sound
  aWrap : null, // html alarm clock wrapper
  aNow : null, // html current time
  aSet : null, // html set alarm time
  aToggle : null, // html toggle alarm button
  aTime : null, // set alarm time

  // (PART B) INITIALIZE
  init : () => {
    // (B1) ALARM SOUND
    alarm.sound = new Audio("ALARM.mp3");
    alarm.sound.loop = true;

    // (B2) GET HTML ELEMENTS
    alarm.aWrap = document.getElementById("aWrap");
    alarm.aNow = document.getElementById("aNow");
    alarm.aSet = document.getElementById("aSet");
    alarm.aToggle = document.getElementById("aToggle");

    // (B3) TICKER
    setInterval(alarm.tick, 1000);
  },

  // (PART C) TICKER
  tick : () => {
    // (C1) CURRENT TIME
    let now = new Date(),
    h = now.getHours(),
    m = now.getMinutes(),
    s = now.getSeconds();

    // (C2) SHOW IN HH:MM:SS FORMAT
    let hm = (h<10 ? "0"+h : h) + ":" + (m<10 ? "0"+m : m),
    hms = hm + ":" + (s<10 ? "0"+s : s);
    alarm.aNow.innerHTML = hms;

    // (C3) CHECK ALARM TIME
    if (hm == alarm.aTime && alarm.sound.paused) {
      alarm.sound.play();
      alarm.aToggle.value = "Stop Alarm";
      alarm.aWrap.classList.add("sounding");
    }
  },

  // (PART D) TOGGLE ALARM
  toggle : () => {
    // (D1) STOP ALARM
    if (alarm.aTime) {
      alarm.aTime = null;
      alarm.sound.pause();
      alarm.sound.currentTime = 0;
      alarm.aSet.disabled = false;
      alarm.aToggle.value = "Set Alarm";
      alarm.aWrap.classList.remove("sounding");
    }

    // (D2) SET ALARM
    else {
      alarm.aTime = alarm.aSet.value;
      alarm.aSet.disabled = true;
      alarm.aToggle.value = "Alarm Set";
    }
    return false;
  }
};

// (PART E) START
window.addEventListener("load", alarm.init);

This can be a little intimidating for the beginners, but trace through in this order:

We create an var alarm = { ... } object to contain all the mechanics.
(E & B) On window load, we call alarm.init() to initialize the “alarm clock widget”.
- (B1) Create a new Audio() object to play the alarm sound, set the alarm to loop infinitely.
- (B2) Get the HTML elements.
- (B3) Create an interval timer, call alarm.tick() every second.

(C) This will deal with “show the current time” and “sound the alarm”.
- (C1) Get the current time – The hour, minute, seconds.
- (C2) Display the current time in the HTML, in a “nice pretty format”.
- (C3) This part works in tandem with (D) alarm.toggle().
(D) Deals with the alarm.
- (D2) On clicking the “set alarm” button, we will set the selected time into alarm.aTime.
- (C3) When the “current time matches alarm.aTime“, we sound the alarm.
- (D1) Clicking on the button again will stop/disable the alarm.

PART 3) THE CSS

alarm.css

/* (PART A) WHOLE PAGE */
* {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}

/* (PART B) ALARM CLOCK WRAPPER */
#aWrap {
  text-align: center;
  max-width: 400px; padding: 20px;
  border-radius: 10px;
  border: 2px solid #ececec;
  background: #f7f7f7;
}
#aWrap.sounding {
  border: 2px solid #fcd0d0;
  background: #fff6f6;
}

/* (PART C) CURRENT TIME */
#aNow {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 48px;
  margin-bottom: 20px;
}

/* (PART D) SET ALARM */
#aWrap input { padding: 10px; border: 0; }
#aSet:disabled { background: #c1d0ff; }
#aToggle {
  color: #fff; background: #1d53b4;
  margin-left: 20px; cursor: pointer;
}

Lastly, these are just some CSS cosmetics for the alarm clock. Feel free to style the alarm clock however you wish.

THE END – NOT SO PRACTICAL & ALARM SOUNDS

That’s all for this quick tutorial. A quick note before we end – It is impossible to run web apps in the background at the time of writing. That is, the alarm clock page must be kept open. Anyway, there are plenty of “free sound effects” sites to download more alarm sounds. But be careful the licenses, some are “free for personal use only”. Here are a few sites that provide “free for commercial use”:

Pixabay Sound Effects