THE CURRENT TIME
      

        
00
        
HR
      
      

        
00
        
MIN
      
      

        
00
        
SEC
      
    

    
    

      

        SET ALARM
      
      

      

      

      

        
    

    
    
      

There is not much to the HTML, but please take note that there are 3 sections in this page:

• Right at the top is a “clock” to display the current time, in the 24 hours format of HH:MM:SS.
• Next, we have a time picker to set the alarm in the center. You will notice that the hour, minute, and seconds selectors are missing – We will generate those using Javascript later.
• Finally at the bottom, is a hidden  tag, which we will use to play our alarm sound.

/* [FONT] */
#ctime, #tpick {
  font-family: Impact, sans-serif;
}
.header {
  text-align: center;
  font-weight: normal;
  margin: 5px 0 10px 0;
}

/* [CURRENT TIME] */
#ctime {
  margin: 0 auto;
  max-width: 350px;
  padding: 10px;
  background: #000;
  text-align: center;
}
#ctime .header {
  color: #c61d1d;
}
#ctime .square {
  display: inline-block;
  padding: 10px;
  margin: 5px;
}
#ctime .digits {
  font-size: 24px;
  background: #fff;
  color: #000;
  padding: 20px 10px;
  border-radius: 5px;
}
#ctime .text {
  margin-top: 10px;
  color: #ddd;
}

/* [TIME PICKER] */
#tpick {
  margin: 0 auto;
  max-width: 350px;
  padding: 10px;
  background: #f2f2f2;
  white-space: nowrap;
}
#tpick-h, #tpick-m, #tpick-s {
  display: inline-block;
  width: 32%;
}
#tpick select {
  box-sizing: padding-box;
  width: 100%;
  font-size: 1.2em;
  font-weight: bold;
  margin: 20px 0;
}
#tset, #treset {
  box-sizing: padding-box;
  width: 50%;
  background: #3368b2;
  color: #fff;
  padding: 10px;
  border: 0;
  cursor: pointer;
}
#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 project.
 

THE SCRIPT

var ac = {
  init : function () {
  // ac.init() : start the alarm clock

    // Get the current time - hour, min, seconds
    ac.chr = document.getElementById("chr");
    ac.cmin = document.getElementById("cmin");
    ac.csec = document.getElementById("csec");

    // The time picker - Hr, Min, Sec
    ac.thr = ac.createSel(23);
    document.getElementById("tpick-h").appendChild(ac.thr);
    ac.thm = ac.createSel(59);
    document.getElementById("tpick-m").appendChild(ac.thm);
    ac.ths = ac.createSel(59);
    document.getElementById("tpick-s").appendChild(ac.ths);

    // The time picker - Set, reset
    ac.tset = document.getElementById("tset");
    ac.tset.addEventListener("click", ac.set);
    ac.treset = document.getElementById("treset");
    ac.treset.addEventListener("click", ac.reset);

    // The alarm sound
    ac.sound = document.getElementById("alarm-sound");

    // Start the clock
    ac.alarm = null;
    setInterval(ac.tick, 1000);
  },

  createSel : function (max) {
  // createSel() : support function - creates a selector for hr, min, sec

    var selector = document.createElement("select");
    for (var i=0; i

What the fudge is happening? Here is an overview:

• Remember in the HTML that there are 3 parts? A clock for the current time, time picker, and alarm – This script tie them together.
• When the window is fully loaded, this script will initialize the clock and the time picker:
  • Grab the necessary HTML elements to display the current hour, minute, and seconds.
  • Create the hour, minutes, seconds selectors for the time picker.
  • Attach handling onclick events to the set and reset alarm buttons.
  • Grab the HTML sound element.
  • Set an interval at every 1 second to update the current time, and check for any set alarms.
• As the user sets an alarm, the selected time will be populated into the ac.alarm variable.
• As the clock is being updated every second, a check will be done if ac.alarm matches the current time.
• Finally, we just sound the alarm if the set alarm time matches the current time – Hitting the reset button will silence it.

ALL THE PROPERTIES AND FUNCTIONS

THE DEMO

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.

• Sound Bible
• Orange Free Sounds
• Freesound.org

COUNTDOWN TIMER

Need something even simpler? Check out my other guide on a Javascript countdown timer:

3 Steps Simple Javascript Countdown Timer

SOURCE 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 post 3 Steps Simple Vanilla Javascript Alarm Clock appeared first on Code Boxx.