Search code examples
javascriptyoutubeclockalarm

Alarm Clock with 'German Time' Option - in JavaScript

Paul here. I'm new to JavaScript and trying to build an alarm clock similar to that described in this question:

Why does my alarmclock script stop working?

Working demo from Whakkee: http://www.obviousmatter.com/testso/hours2.html

However I would like to use dropdown select instead of text input.

(my demo of what I mean by 'dropdown select', this is not a working example) http://paulodonovan.net/Experiments/JavaScript/rise-and-shine/rise-and-shine_0.2.html

For an experiment I tried substituting 'text input' with 'select with options' but I don't know how to integrate the select:

    <html>

<body>
    <div>
        <form name="frm">

<select name="hour">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>  
</select>   
<select name="mins">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select>

            <input type="button" value="Set Alarm" onclick="justonce=1;">
        </form>
        <font color=#660000 size=20 face=Tahoma><span id="hours"></span></font>
    </div>


</body>
</html>




<script type="text/javascript">
obj_hours=document.getElementById("hours");
justonce=0;

function wr_hours()
{
    time=new Date();

    time_min=time.getMinutes();
    time_hours=time.getHours();

    time_wr=((time_hours<10)?"0":"")+time_hours;
    time_wr+=":";
    time_wr+=((time_min<10)?"0":"")+time_min;

    obj_hours.innerHTML=time_wr;

    if (justonce==1 && frm.mins.value==time_min && frm.hour.value==time_hours) {
            alert('Hello. Rise and Shine. :-)');
            justonce=0;
    }
}

setInterval("wr_hours();",1000);
</script>

That doesn't work, any thoughts why? Perhaps I need to use index?

I was hoping to personalize this project a bit and also add some other features, e.g.

  • Select a Youtube Video to play as alert, from a list of 10 songs and by pasting a url. I found a similar example in terms of features, but the code is very complex to my eyes..: http://onlineclock.net/video/

  • 'German time mode' checkbox: '(everything is 10min earlier so you'll never be late.)'

If time permits: - Checkbox to 'Vintage Style' switching on an alternative CSS style sheet. That could include an analogue alarm clock I can built in CSS.

Of course I would rather understand and will write from scratch, I don't expect anyone to build it for me but any pointers to relevant tutorials or techniques etc. would be much appreciated.

Thanks, Paul

Solution

  • This question seems to me, to be

    Part 1

    How can I get the chosen value from a <select>?

    The easiest way is to give the <select> an id attribute, for example

    <select id="foobar">
    <option value="00">00</option>
    <option value="01">01</option>
</select>

    Now, in your JavaScript, you can access the chosen value using the following code

    document.getElementById('foobar').value;

    Remember that an id must be unique for the whole page.

    Part 2

    How can I subtract 10 minutes from the time?

    The current code you're using doesn't use a Date object for user's selection nor use Number s, it uses String s (as <option> values). This means that to subtract 10 minutes you'll have to use one (or do something excessively complicated). As you're not using Date in this, I'll avoid it in my answer (though you might want to consider learning about it anyway).

    To do what you want you'll need to add a couple more steps. In the following, form_min and form_hours are the user's selected times.

    Step 1. Convert minutes and hours to Number.

    form_min   = parseInt(form_min,   10);
form_hours = parseInt(form_hours, 10);

    Step 2. Subtract 10 minutes

    form_min = form_min - 10;

    Step 3. If minutes are negative, subtract 1 hour and add 60 minutes.

    if (form_min < 0) {
    form_hours = form_hours - 1;
    form_min = form_min + 60;
}

    Step 4. Convert back to String.

    form_min   = (form_min   < 10 ? "0" : "") + form_min;
form_hours = (form_hours < 10 ? "0" : "") + form_hours;

    If you work with .selectedIndex (60 options starting from 0 for minutes, etc) you can skip Step 1 as you will have the value as a Number due to the fact the option value matches the option's index in this context.