Simple Vanilla Javascript Alarm Clock (Free Source Code)

Welcome to a tutorial on how to create a simple vanilla Javascript alarm clock. Once upon a time in the stone age of the Internet, it was an absolute pain to even play an alarm sound. We had to use 3rd party Java or Flash scripts, and fight dragons with keyboards just to make some noise.

So if you looking to create a simple alarm clock web app, maybe for a school project or just to satisfy your own curiosity. You are in luck. Gone are those dark days and this guide will walk you through how to create an alarm clock – Using only vanilla Javascript and HTML. Read on!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TABLE OF CONTENTS

Download & Demo Javascript Alarm Useful Bits & Links
The End

 

DOWNLOAD & DEMO

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

THE DEMO

THE CURRENT TIME

00
HR
00
MIN
00
SEC

SET ALARM

 

 

JAVASCRIPT ALARM CLOCK

All right, let us now get into the details of the Javascript alarm clock itself.

 

1) HTML LAYOUT

js-alarm-clock.html
<!-- (A) CURRENT TIME -->
<div id="ctime">
  <h1 class="header">THE CURRENT TIME</h1>
  <div class="square">
    <div class="digits" id="chr">00</div>
    <div class="text">HR</div>
  </div>
  <div class="square">
    <div class="digits" id="cmin">00</div>
    <div class="text">MIN</div>
  </div>
  <div class="square">
    <div class="digits" id="csec">00</div>
    <div class="text">SEC</div>
  </div>
</div>

<!-- (B) SET ALARM -->
<div id="tpick">
  <h1 class="header">SET ALARM</h1>
  <div id="tpick-h"></div>
  <div id="tpick-m"></div>
  <div id="tpick-s"></div>
  <input type="button" value="Set" id="tset"/>
  <input type="button" value="Reset" id="treset" disabled/>
</div>

The HTML may look rather complicated at first, but there are only 2 parts to the alarm clock:

  1. Right at the top is a “clock” to display the current time, in the 24 hours format of HH:MM:SS.
  2. Next, we have a time picker to set the alarm. You will notice that the hour, minute, and second selectors are missing – We will generate those with Javascript later.

 

 

2) ALARM CLOCK CSS

js-alarm-clock.css
/* (A) SHARED */
#ctime *, #tpick * {
  font-family: Impact, sans-serif;
  box-sizing: border-box;
  text-align: center;
}
#ctime, #tpick, .square { padding: 10px; }
#ctime, #tpick {
  margin: 0 auto;
  max-width: 350px;
  display: flex;
  flex-wrap: wrap;
}
.header {
  font-weight: normal;
  width: 100%;
  margin: 10px 0;
}
.square, #tpick-h, #tpick-m, #tpick-s { width: 33%; }
.text, #tset, #treset { margin-top:10px; }
.digits, .square select {
  font-size: 24px;
  background: #fff;
  color: #000;
  border: 0;
  border-radius: 5px;
  width: 100%;
  padding: 10px 0;
}
 
/* (B) CURRENT TIME */
#ctime { background: #000; }
#ctime .header { color: #c61d1d; }
#ctime .text { color: #ddd; }
 
/* (C) TIME PICKER */
#tpick { background: #f2f2f2; }
#tset, #treset {
  width: 50%;
  background: #3368b2;
  color: #fff;
  border: 0;
  padding: 15px 0;
  cursor: pointer;
  font-size: 18px;
}
#tset:disabled, #treset:disabled {
  background: #aaa;
  color: #888;
}

Heck. This looks like a whole bucket of confusion, but it is actually nothing more than some cosmetics. Feel free to change these styles to fit the theme of your own project.

 

 

3) ALARM CLOCK JAVASCRIPT

3A) PROPERTIES

js-alarm-clock.js
// (A) HTML ELEMENTS & PROPERTIES
// (A1) CLOCK HOUR, MIN, SEC
chr : null, cmin : null, csec : null,
 
// (A2) TIME PICKER HOUR, MIN, SEC, SET, RESET
thr : null, thm : null, ths : null,
tset : null, treset : null,
 
// (A3) ALARM TIME & SOUND
alarm : null, sound : null,

In the first section of var ac, we start by defining a whole load of properties – Looks confusing, but these are nothing but references to the respective HTML elements.

 

3B) INIT

js-alarm-clock.js
// (B) INITIALIZE ALARM CLOCK
init : () => {
  // (B1) GET HTML CURRENT TIME - HOUR, MIN, SECONDS
  ac.chr = document.getElementById("chr");
  ac.cmin = document.getElementById("cmin");
  ac.csec = document.getElementById("csec");
 
  // (B2) CREATE HTML TIME PICKER - HR, MIN, SEC
  ac.thr = ac.createSel(23);
  ac.thm = ac.createSel(59);
  ac.ths = ac.createSel(59);
  document.getElementById("tpick-h").appendChild(ac.thr);
  document.getElementById("tpick-m").appendChild(ac.thm);
  document.getElementById("tpick-s").appendChild(ac.ths);
 
  // (B3) CREATE HTML TIME PICKER - SET, RESET
  ac.tset = document.getElementById("tset");
  ac.treset = document.getElementById("treset");
  ac.tset.onclick = ac.set;
  ac.treset.onclick = ac.reset;
 
  // (B4) ALARM SOUND
  ac.sound = new Audio("wake-up-sound.mp3");
 
  // (B5) START THE CLOCK
  ac.alarm = null;
  setInterval(ac.tick, 1000);
},
 
// (C) SUPPORT FUNCTION - CREATE SELECTOR FOR HR, MIN, SEC
createSel : (max) => {
  let selector = document.createElement("select"), opt;
  for (let i=0; i<=max; i++) {
    opt = document.createElement("option");
    i = ac.padzero(i);
    opt.value = i;
    opt.innerHTML = i;
    selector.appendChild(opt);
  }
  return selector;
},
 
// (D) SUPPORT FUNCTION - PREPEND HR, MIN, SEC WITH 0 (IF < 10)
padzero : (num) => {
  if (num < 10) { num = "0" + num; }
  else { num = num.toString(); }
  return num;
},

// (H) START CLOCK ON PAGE LOAD
window.addEventListener("load", ac.init);

ac.init() will run on page load. Basically, grab all the necessary HTML elements, create the interface.

 

 

3C) TICKER

js-alarm-clock.js
// (E) UPDATE CURRENT TIME
tick : () => {
  // (E1) CURRENT TIME
  let now = new Date(),
      hr = ac.padzero(now.getHours()),
      min = ac.padzero(now.getMinutes()),
      sec = ac.padzero(now.getSeconds());
 
  // (E2) UPDATE HTML CLOCK
  ac.chr.innerHTML = hr;
  ac.cmin.innerHTML = min;
  ac.csec.innerHTML = sec;
 
  // (E3) CHECK AND SOUND ALARM
  if (ac.alarm != null) {
    now = hr + min + sec;
    if (now == ac.alarm && ac.sound.paused) { ac.sound.play(); }
  }
},

ac.tick() runs on an interval timer every second to update the HTML, and sound the alarm if necessary.

 

3D) SET & RESET

js-alarm-clock.js
// (F) SET ALARM
set : () => {
  ac.alarm = ac.thr.value + ac.thm.value + ac.ths.value;
  ac.thr.disabled = true;
  ac.thm.disabled = true;
  ac.ths.disabled = true;
  ac.tset.disabled = true;
  ac.treset.disabled = false;
},
 
// (G) RESET ALARM
reset : () => {
  if (!ac.sound.paused) { ac.sound.pause(); }
  ac.alarm = null;
  ac.thr.disabled = false;
  ac.thm.disabled = false;
  ac.ths.disabled = false;
  ac.tset.disabled = false;
  ac.treset.disabled = true;
}

Well, set and reset the alarm.

 

 

USEFUL BITS & LINKS

Finally, here are a few extras that may be useful.

 

FREE ALARM SOUNDS

Need more alarm sounds? Check out these websites for more free goodies. But please do take note of the usage licenses – Some of these are free for non-commercial use only.

 

COMPATIBILITY CHECKS

This alarm clock will work on all modern browsers.

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

6 thoughts on “Simple Vanilla Javascript Alarm Clock (Free Source Code)”

  1. I’m trying to create a code that alerts me to do some chores at different time intervals, been struggling with this…pls can I get the code

  2. Ok thanks for the feedback. What were trying to do is have the current time displayed on a screen as a large clock. Each Time a new alarm is going to happen we would like to display it on the left with an option to cancel if needed. This is a very helpful blog just trying to understand all the pieces. Got the site working now just need to add the next piece.

  3. Thanks for this post. Question is there a way to add an additional Set alarms box to the left? This to have a list of more than one expected alarm?

    1. Consider doing this:
      1) Create an array to contain multiple selected times. ac.alarms = []
      2) Change the ac.set() function to push to the array instead. ac.alarms.push(SELECTED TIME)
      3) Change ac.tick() to check the current time against the set alarms. for (let al of ac.alarms) { if (TIME NOW >= AL) ... }
      4) Of course, the HTML interface and ac.reset() have to be changed as well.

Leave a Comment

Your email address will not be published. Required fields are marked *