To display HTML text in Oracle Apex: Use Case of an Setting Alarm

1. Overview

Setting an alarm in Oracle Apex using JavaScript allows us to add time-sensitive notifications or reminders to our web application. By utilizing JavaScript we can trigger specific actions, such as displaying an alert or executing custom code, after a specified time delay. This functionality can be useful for creating reminders, countdowns, or time-based events within our Oracle Apex application.

2. Technologies and Tools Used

The following technologies have been used to achieve the same.

Oracle APEX
JavaScript

3. Use Case

Setting an alarm in Oracle Apex using Java Script:–

Setting an alarm in Oracle Apex using JavaScript can be applied to various use cases in web applications to enhance user experience and provide timely notifications or reminders.

Ex: Reminder Notifications, Countdown, Scheduled Actions, Personalized Alerts, Sports or Gaming Applications ETC.

4. Architecture

A)Crate a static Region and paste the following code in source :-

(A) CURRENT TIME

<h1 class=”header”>THE CURRENT TIME</h1>

</div>

</div>

</div>

Code Describe:-

This section is responsible for displaying the current time on the web page. It consists of a container with the ID “ctime” and three “square” div elements representing the hours, minutes, and seconds of the current time. The time digits are displayed inside the “digits” divs with the corresponding IDs: “chr” for hours, “cmin” for minutes, and “csec” for seconds. The class “header” is applied to show the header “THE CURRENT TIME” at the top.

Set Alarm:-

</h1>

<div>

</div>

Code Describe:-

This section allows the user to set an alarm.

It contains a container with the ID “pick” and three separate div elements inside it,

each representing the hour, minute, and second components of the alarm.

The user can select the desired alarm time using these elements. The class “header” is applied to show the header “SET ALARM” at the top. Below the time pickers, two input buttons are provided: “Set” (with the ID “tset”) to set the alarm and “Reset” (with the ID “reset”) to reset the selected alarm time. The “Reset” button is initially disabled (due to the disabled attribute)

until the user sets an alarm.

Alarm Sound:-

</audio>

CSS For HTML code;-

/* (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: #a71717;

}

#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;

}

Java 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);

Code Explanation:-

Initialize Alarm Clock:-

This section initializes the alarm clock and sets up the necessary components.

(A1): The current time elements for hours, minutes, and seconds are obtained from the HTML using document.getElementById().

(A2): Three time picker selectors are created for hours (ac.thr), minutes (ac.thm), and seconds (ac.ths) using the createSel() function (explained in (B)).

(A3): Event listeners are added to the “Set” (ac.tset) and “Reset” (ac.treset) buttons to trigger the set() and reset() functions when clicked.

(A4): The alarm sound element is obtained from the HTML using document.getElementById(“alarm-sound”).

(A5): The clock is started by setting up an interval using setInterval(). The tick() function (explained in (D)) is executed every 1000 milliseconds (1 second) to update the current time and check for alarms.

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

This function creates a selector (drop-down menu) for hours, minutes, or seconds with options ranging from 0 to the specified maximum value (max).

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

This function pads a number with a leading zero if it is less than 10, converting it to a two-digit string.

(D) UPDATE CURRENT TIME

This function (tick()) is executed every second (as set in (A5)). It updates the current time displayed on the web page and checks if the alarm time matches the current time. If there’s a match, the alarm sound is played.

(E) SET ALARM

This function (set()) is called when the “Set” button is clicked. It stores the selected alarm time in the ac.alarm variable, disables the time picker selectors, and disables the “Set” button while enabling the “Reset” button.

(F) RESET ALARM

This function (reset()) is called when the “Reset” button is clicked. It stops the alarm sound (if playing), resets the alarm variable to null, and enables the time picker selectors and the “Set” button while disabling the “Reset” button.

(G) START CLOCK ON PAGE LOAD

This section starts the alarm clock when the page is loaded. It adds an event listener to the window object to execute the ac.init function (explained in (A)) when the page has finished loading.

Overall, this JavaScript code sets up an interactive alarm clock in the Oracle Apex web application, allowing users to set and reset alarms with an accompanying audio alert.

5. Conclusion

Overall, setting alarms in Oracle Apex using JavaScript adds a valuable feature to web applications, making them more engaging, time-aware, and user-centric.

Screen Shot:-

Javith Hassain Abdul