Sandeep's Nook: JavaScript Page

Alarm Clock with Snooze

This is an updated version of the Alarm Clock. This Alarm script includes the snooze feature. To avail of snooze just click the checkbox provided and choose the number of minutes from the drop down menu. A small pop-up window will open at the time the alarm is set and the chosen sound file is played. At the given intervals set in minutes the alarm will be repeated. It should be remembered that the pop-up window should not be closed when the alarm first rings, but the pop-up can be minimised. If minimised the pop-up will automatically bring itself to focus at the time set.
Note: The user's browser must have the appropriate plugin installed in order to hear the alarm if the 'Play music' option is chosen!

Current Time

Alarm Time
Hour	Minute	am/pm

Message

Play music?
Snooze? Minutes

Author: Sandeep Gangadharan
Home Page: http://www.sivamdesign.com/home/

The script is given below:

This goes in the HEAD of the html file:

<script language="JavaScript" type="text/javascript">

<!--
var sound = "drumroll.wav";   // change the name of the wave file to be used as the alarm at left. include
                              // the full path to the file. remember not to remove the quotation marks.

function sivamtime() {
	now=new Date();
	hour=now.getHours();
	min=now.getMinutes();
	sec=now.getSeconds();

if (min<=9) { min="0"+min; }
if (sec<=9) { sec="0"+sec; }
if (hour>12) { 
 hour=hour-12;
 add="pm"; }
else {
 hour=hour;
 add="am"; }
if (hour==12) { add="pm"; }
if (hour==00) { hour="12"; }

document.hours.clock.value = (hour<=9) ? "0"+hour : hour;
  document.minutes.clock.value = min;
  document.seconds.clock.value = sec;
  document.ampm.clock.value= add;
 setTimeout("sivamtime()", 1000);
}

function alarm() {
    timer = "";
    note = document.arlm.message.value;
    if (note == '') {note = 'ALARM!!';}

hrs = document.arlm.hr.value;
    min = document.arlm.mts.value;
    apm = document.arlm.am_pm.value;

if (document.arlm.time.selectedIndex==0) { timer = "2"; }
  if (document.arlm.time.selectedIndex==1) { timer = "5"; }
  if (document.arlm.time.selectedIndex==2) { timer = "10"; }
  if (document.arlm.time.selectedIndex==3) { timer = "15"; }
  if (document.arlm.time.selectedIndex==4) { timer = "20"; }
  if (document.arlm.time.selectedIndex==5) { timer = "30"; }

if ((document.hours.clock.value == hrs) &&
    (document.minutes.clock.value == min) &&
    (document.ampm.clock.value == apm) &&
    (document.arlm.snooze.checked == true)) {
   musicwin=window.open("","","width=200,height=50")
  if (navigator.appName=="Explorer")
   musicwin.document.write("<body onLoad=\"setTimeout('location.reload();window.focus()'," + timer*60*1000 + ");\"><bgsound src=" + sound + " loop='finite'>" + note)
  else
   musicwin.document.write("<body onLoad=\"setTimeout('history.go(0);window.focus()'," + timer*60*1000 + ");\"><embed src=" + sound + " hidden='true' border='0' autostart='true' loop='false'>" + note)
   musicwin.document.close(); return false; }

if ((document.hours.clock.value == hrs) &&
    (document.minutes.clock.value == min) &&
    (document.ampm.clock.value == apm) &&
    (document.arlm.music.checked == true)) {
   musicwin=window.open("","","width=200,height=50")
  if (navigator.appName=="Explorer")
   musicwin.document.write("<bgsound src=" + sound + " loop='infinite'>" + note)
  else
   musicwin.document.write("<embed src=" + sound + " hidden='true' border='0' autostart='true' loop='true'>" + note)
   musicwin.document.close(); return false; }

if (document.arlm.snooze.checked == true) { document.arlm.music.checked = true }

if ((document.arlm.snooze.checked == true) && (document.arlm.time.value == "")) {
 alert('You have not set the\nminutes for snooze!'); return false; }

if (document.arlm.snooze.checked == false) {
 document.arlm.time.value = ""; }

if ((document.hours.clock.value == hrs) &&
    (document.minutes.clock.value == min) &&
    (document.ampm.clock.value == apm) &&
    (document.arlm.snooze.checked == false)) {
 alert(note); return false; }

if (hrs == '') {alert('The Hour field is empty'); return false}
 if (min == '') {alert('The Minute field is empty'); return false}
 if (apm == '') {alert('The am/pm field is empty'); return false}

if (hrs.length == 1) {document.arlm.hr.value = '0' + hrs}
 if (min.length == 1) {document.arlm.mts.value = '0' + min}
 if (hrs.length > 2) {alert('The Hour is wrongly typed.'); return false}
 if (min.length > 2) {alert('The Minute is wrongly typed.'); return false}
 if (apm != 'am' && apm != 'pm' ) {alert('The am/pm is wrongly typed.'); return false}

setTimeout("alarm()", 1000);}

//-->
</script>

Note the script in the BODY tag:

<body onLoad="sivamtime()">

This goes in the BODY of the html file:

<table border="0" align="center" bgcolor="#c0c0c0" cellspacing="0" cellpadding="2" width="136">
 <tr>
  <td colspan="4">
   <font size="1" face="verdana, arial, helvetica, ms sans serif">
    <b>Current Time</b>
   </font>
  </td>
 </tr>
 <tr>
  <td>
   <form name="hours">
    <p><input type="text" size="2" name="clock"></p>
   </form>
  </td>
  <td>
   <form name="minutes">
    <p><input type="text" size="2" name="clock" /></p>
   </form>
  </td>
  <td>
   <form name="seconds">
    <p><input type="text" size="2" name="clock" /></p>
   </form>
  </td>
  <td>
   <form name="ampm">
    <p><input type="text" size="2" name="clock" /></p>
   </form>
  </td>
 </tr>
</table>

<table border="0" align="center" bgcolor="#c0c0c0" cellspacing="0" cellpadding="2" width="136">
 <tr>
  <td colspan="3">
   <form name="arlm">
    <font size="1" face="verdana, arial, helvetica, ms sans serif">
     <b>Alarm Time</b>
    </font>
   </td>
 </tr>  
 <tr align="center">
  <td>
   <font size="1" face="verdana, arial, helvetica, ms sans serif">
     Hour 
   </font>
  </td>
  <td>
   <font size="1" face="verdana, arial, helvetica, ms sans serif">
      Minute
   </font>
  </td>
  <td>
   <font size="1" face="verdana, arial, helvetica, ms sans serif">
     am/pm
   </font>
  </td>
 </tr>
 <tr align="center">
  <td>
   <input type="text" size="2" name="hr" onFocus="select()" value="00" />
  </td>
  <td>
     <input type="text" size="2" name="mts" onFocus="select()" value="00" />
  </td>
  <td>
    <input type="text" size="2" name="am_pm" onFocus="select()" value="am" />
  </td>
 </tr>
 <tr align="center">
  <td colspan="3">
   <font size="1" face="verdana, arial, helvetica, ms sans serif">
    Message
   </font>
  </td>
 </tr>
 <tr align="center">
  <td colspan="3">
   <input type="text" size="15" name="message" />
  </td>
 </tr>
 <tr align="center">
  <td colspan="3">
   <input type="checkbox" name="music">
    <font size="1" face="verdana, arial, helvetica, ms sans serif">Play music?</font>
  </td>
 </tr>
 <tr align="center">
  <td bgcolor="#a0a0a0" colspan="3">
   <input type="checkbox" name="snooze">
    <font size="1" face="verdana, arial, helvetica, ms sans serif">Snooze?  <br />
     <select name="time">
      <option value="0">2</option>
      <option value="1">5</option>
      <option value="2">10</option>
      <option value="3">15</option>
      <option value="4">20</option>
      <option value="5">30</option>
     </select> Minutes</font>
  </td>
 </tr>
 <tr>
  <td align="center" colspan="3">
   <input type="button" size="2" value="Set Alarm" onClick="alarm()" />
  </td>
 </tr>
 <tr>
  <td align="center" colspan="3">
   <input type="button" size="2" value="Reset" onClick="reset()" />
   </form>
  </td>
 </tr>
</table>