Time picker for Alarm Clock

A Clock will be displayed showing changing time with Hour , minutes and seconds.

User should able to use time picker to select three fields - hour , minutes and seconds. Each field will have one up and one down button to set the value. Hour field can be set between 0 - 23, minutes can be set from 0-59 and seconds can be set to 0-59.

<table><tr><td><a href=# OnClick=update_alarm('h','up')><img src=images/up.jpg border='0'></a></td><td><a href=# OnClick=update_alarm('m','up')><img src=images/up.jpg border='0'></a></td><td><a href=# OnClick=update_alarm('s','up')><img src=images/up.jpg border='0'></a></td></tr>

<tr><td><input type=text size=2 id='h1' name='h1' value=00 onBlur=update_alarm('h','none')></td><td><input type=text size=2 id='m1' name='m1' value=00 onBlur=update_alarm('m','none')></td><td><input type=text size=2 id='s1' name='s1' value=00 onBlur=update_alarm('s','none')></td></tr>
<tr><td><a href=# OnClick=update_alarm('h','down')><img src=images/down.jpg border='0'></a></td><td><a href=# OnClick=update_alarm('m','down')><img src=images/down.jpg border='0'></a></td><td><a href=# OnClick=update_alarm('s','down')><img src=images/down.jpg border='0'></a></td></tr>
</table>

User can directly enter the value in respective fields without using the buttons.

Displaying the alarm set value.

While selecting the data for the alarm we will display the values for user. While setting the data we will keep the background colour of the display as Yellow. Once the alarm is set we will display Green color background. Once time is over the background color we will change to red.

After fixing all the values user has to use Set Alarm button to activate the alarm.

How the Alarm Clock Script work

To set the alarm we will have three fields ( hour , minutes, Seconds ). Each field will have one pair of buttons, one for incrementing value and other for decrementing value. Each click of this button will carry two parameters to a function update_alarm(). One is type of button ( Hour , Minutes or Seconds ) , other one is direction ( Up, Down ).

Here is one sample button used for incrementing minutes field (type=m, direction = Up)

<a href=# OnClick=update_alarm('m','up')><img src=images/up.jpg border='0'></a>

Inside the function update_alarm() we will use one switch function to execute different code blocks for each field. First we will read the data from the respective field after converting to integer by using parseInt() function.

var h =parseInt(document.getElementById('h1').value);

Based on the type of button pressed ( up or down ) we will add or subtract 1 from the value we read. We will keep one upper limit and lower limit for the value.

if(direction =='up' && h < 24){
h=h+1;}
if(direction =='down' && h > 0){
h=h-1;}

If the user directly enteres the value in hour field then we have to check and restrict the data between 0 & 23

if(h >24){h=24;}
if(h <0){h=0;}

While displaying we will have to add 0 before single digit values. For example we have to display 5 hours as 05 and not like 5. So we will convert the data to string and then based on the length we will add one 0 before it.

h=h.toString();
if(h.length < 2){
var h='0'+h;
}

Finally we will store the formatted output in the field.

document.getElementById('h1').value = h;
break;

Same way we will store Minutes and seconds value in the field.

How to set the Alarm

After selecting the time components user will click the button saying ‘Set Alarm’. This will trigger the function set_alarm() Inside the function set_alarm() we will read the Hour, minutes and seconds from the time picker ( selection ) and using this a new date & time object is created.

function set_alarm(){
var dt_alarm= new Date();
dt_alarm.setHours(parseInt(document.getElementById('h1').value));
dt_alarm.setMinutes(parseInt(document.getElementById('m1').value));
dt_alarm.setSeconds(parseInt(document.getElementById('s1').value));
....

Then we will collect the getTime() value of this date object ( our alarm set values) and store it in a global variable we declared earlier.

global_dt_alarm_sec=dt_alarm.getTime();
document.getElementById('ct3').style.background='#00f040';
}

Now our Alarm clock time is set so background color of our Alarm display is set to green.

Matching time with Clock

In our displaying clock tutorial you have seen how a clock is displayed. Here we are using a refreshing rate of 1 second. The function display_ct() runs in every second and it display the changing clock showing time and date. Then we calculate the getTime() value of present time and compare it with getTime() value alarm set value calculated earlier and stored in a global variable. If the alarm set value is more, then it is time to give the alarm, we can change the background color of displayed alarm clock and give one alert message saying time is over. Otherwise continue to show the clock by displaying changing time. Each second the cycle repeats and new date object getTime() value is compared with alarm set value.

function display_ct() {
var dt = new Date();
document.getElementById('ct4').innerHTML = dt;
if((dt.getTime() >= global_dt_alarm_sec) && (global_dt_alarm_sec > 1000)){
document.getElementById('ct3').style.background='#f00040';
global_dt_alarm_sec=0;
alert('Time over');
}
tt=display_c();
}

 

Thank You!