Simple alarm clock app update#
D – Captain Obvious to the rescue, ac.tick() runs on an interval timer every second to update the HTML and sound the alarm.B & C – ac.createSel() and ac.padzero(), helper functions to build the HTML interface.Basically, grab all the necessary HTML elements, create the interface. Window.addEventListener("load", ac.init) (C) SUPPORT FUNCTION - PREPEND HR, MIN, SEC WITH 0 (IF < 10) Var opt = document.createElement("option") Var selector = document.createElement("select") (B) SUPPORT FUNCTION - CREATE SELECTOR FOR HR, MIN, SEC (A2) CREATE TIME PICKER - HR, MIN, SECĭocument.getElementById("tpick-h").appendChild(ac.thr) ĭocument.getElementById("tpick-m").appendChild(ac.thm) ĭocument.getElementById("tpick-s").appendChild(ac.ths) Īc.tset = document.getElementById("tset") Īc.tset.addEventListener("click", ac.set) Īc.treset = document.getElementById("treset") Īc.treset.addEventListener("click", ac.reset) Īc.sound = document.getElementById("alarm-sound") (A1) GET THE CURRENT TIME - HOUR, MIN, SECONDSĪc.cmin = document.getElementById("cmin") Īc.csec = document.getElementById("csec") Feel free to change these styles to fit the theme of your own project. This looks like a whole bucket of confusion, but it is actually nothing more than some cosmetics. C – Finally at the bottom, is a hidden tag, which we will use to play our alarm sound.You will notice that the hour, minute, and seconds selectors are missing – We will generate those using Javascript later. B – Next, we have a time picker to set the alarm in the center.A – Right at the top is a “clock” to display the current time, in the 24 hours format of HH:MM:SS.The HTML may look rather complicated at first, but there are essentially 3 parts to the alarm clock: