Set Alarm In Oracle Apex Using HTML, CSS, JavaScript

Few days ago I had a plan to make a alarm clock in Oracle Apex. So I tried to find out something to do it. And finally did it using HTML,CSS, JavaScript. I feel it works very well. So I am going to share my tricks and code to you. You can try or use it if needed. Even you may customize it your self according to your requirement.  Follow below steps. 

Step 1. Create a new page and a region using static content type. 

Step 2. Copy-Paste this CSS and Java Codes into Page properties >> HTML Header 

<style>

/* (A) FONT */

#ctime, #tpick {

  font-family: Impact, sans-serif;

}

.header {

  text-align: center;

  font-weight: normal;

  margin: 5px 0 10px 0;

}

/* (B) 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;

}

/* (C) 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;

}

</style>

<script>

var ac = {

  // (A) INITIALIZE ALARM CLOCK

  init : function () {

    // (A1) GET THE CURRENT TIME - HOUR, MIN, SECONDS

    ac.chr = document.getElementById("chr");

    ac.cmin = document.getElementById("cmin");

    ac.csec = document.getElementById("csec");

    // (A2) CREATE 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);

    // (A3) CREATE 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);

    // (A4) GET ALARM SOUND

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

    // (A5) START THE CLOCK

    ac.alarm = null;

    setInterval(ac.tick, 1000);

  },

  // (B) SUPPORT FUNCTION - CREATE SELECTOR FOR HR, MIN, SEC

  createSel : function (max) {

    var selector = document.createElement("select");

    for (var i=0; i<=max; i++) {

      var opt = document.createElement("option");

      i = ac.padzero(i);

      opt.value = i;

      opt.innerHTML = i;

      selector.appendChild(opt);

    }

    return selector

  },

  // (C) SUPPORT FUNCTION - PREPEND HR, MIN, SEC WITH 0 (IF < 10)

  padzero : function (num) {

    if (num < 10) { num = "0" + num; }

    else { num = num.toString(); }

    return num;

  },

  // (D) UPDATE CURRENT TIME

  tick : function () {

    // (D1) CURRENT TIME

    var now = new Date();

    var hr = ac.padzero(now.getHours());

    var min = ac.padzero(now.getMinutes());

    var sec = ac.padzero(now.getSeconds());

    // (D2) UPDATE HTML CLOCK

    ac.chr.innerHTML = hr;

    ac.cmin.innerHTML = min;

    ac.csec.innerHTML = sec;

    // (D3) CHECK AND SOUND ALARM

    if (ac.alarm != null) {

      now = hr + min + sec;

      if (now == ac.alarm) {

        if (ac.sound.paused) { ac.sound.play(); }

      }

    }

  },

  // (E) SET ALARM

  set : function () {

    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;

  },

  // (F) RESET ALARM

  reset : function () {

    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;

  }

};

// (G) START CLOCK ON PAGE LOAD

window.addEventListener("load", ac.init);

</script>

Step 3.  Copy-Paste this code into Page properties >> Region>> Source

<!-- (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>

  <div>

    <input type="button" value="Set" id="tset"/>

    <input type="button" value="Reset" id="treset" disabled/>

  </div>

</div>

<!-- (C) ALARM SOUND -->

<audio id="alarm-sound" loop>

  <source src="#APP_IMAGES#Arekbar.mp3" type="audio/mp3">

</audio>

Step 4.  Upload a ringtone in  

Shared Components

Static Application Files

  then copy the reference for use as your ringtone source. 

Step 5. Change the music directory source form Step 3 code. Use here new directory of your ringtone. 

<audio id="alarm-sound" loop>

  <source src="#APP_IMAGES#Arekbar.mp3" type="audio/mp3">

</audio>

That's All. Now Just Set Alarm And Enjoy It. Thank You.  :)