Alarm Clock with 'German Time' Option - in JavaScript - 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

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.

Add id attribute to: <select id="hours" name="hours">
This is how you need to get the value from the hours drop down:
var hourField = document.getElementById("hours");
var obj_hours = hourField.options[hourField.selectedIndex].value;
You may need to do the same in your mins dropdown box too.

Related

Focus option without select the value in the option list

I have a requirement which is based on open a "Select" with a lot of options but it should start the selection in the half of the list without select that value in which the component was started
<select>
<option value="1">value 1</option>
<option value="2">value 2</option>
<option value="3">value 3</option>
<option value="4">value 4</option>
<option value="5">value 5</option>
<option value="6">value 6</option>
<option value="7">value 7</option>
<option value="8">value 8</option>
<option value="9">value 9</option>
<option value="10">value 10</option>
When the user opens the list it should start in the middle without select that option, see how the middle option is just focused but not selected:
It's there any way to achieve this using jQuery?
Disclaimer: Styling <select> is tricky business. Tested in Chrome, FF, Edge, Windows10
document.querySelectorAll("select[size]").forEach(EL => {
const h = EL.scrollHeight / EL.options.length; // option height
const i = Math.floor(EL.options.length / 2); // Index of the half-way option
const s = Math.floor(EL.size / 2); // Get the size (also half-way)
EL.options[i].classList.add("highlight"); // (PS: this is bad UX)
EL.scroll(0, h * (i - s));
});
select option.highlight {
background: #0bf;
color: #fff;
}
<select size="3">
<option value="1">value 1</option>
<option value="2">value 2</option>
<option value="3">value 3</option>
<option value="4">value 4</option>
<option value="5">value 5</option>
<option value="6">value 6</option>
<option value="7">value 7</option>
<option value="8">value 8</option>
<option value="9">value 9</option>
<option value="10">value 10</option>
</select>
NOTE: The CSS-.highlight option might be a really bad UI and lead to people thinking that that option is actually selected while it's clearly not.
Avoid doing stuff that users are not used to see in the web world.
Therefore: instead of doing
EL.options[i].classList.add("highlight"); // (PS: this is bad UX)
rather do:
EL.options[i].selected = true;

How to select the next or before value from the dropdown after the selected one?

I have a drop down which contains the Time with 30 min slide for each hour and I want to select the next option fallowing selected one. ex: the currently selected time is 7:30 PM so when I run my scenario if my current time is equal to the currently selected time then I should change the time to next slot i.e 8:00 PM. so how to write an xpth or jquery to select the nnext option?
Here is the html:
<select id="f-cut-off-time" name="f-cut-off-time" aria-invalid="false" class="valid">
<option value="6:00AM">6:00AM</option>
<option value="6:30AM">6:30AM</option>
<option selected="" disabled="" hidden="" value="7:30PM">7:30PM</option>
<option value="7:30AM">7:30AM</option>
<option value="8:00AM">8:00AM</option>
<option value="8:30AM">8:30AM</option>
<option value="9:00AM">9:00AM</option>
<option value="9:30AM">9:30AM</option>
<option value="10:00AM">10:00AM</option>
<option value="10:30AM">10:30AM</option>
<option value="11:00AM">11:00AM</option>
<option value="11:30AM">11:30AM</option>
<option value="12:00PM">12:00PM</option>
<option value="12:30PM">12:30PM</option>
<option value="1:00PM">1:00PM</option>
<option value="1:30PM">1:30PM</option>
<option value="2:00PM">2:00PM</option>
<option value="2:30PM">2:30PM</option>
<option value="3:00PM">3:00PM</option>
<option value="3:30PM">3:30PM</option>
<option value="4:00PM">4:00PM</option>
<option value="4:30PM">4:30PM</option>
<option value="5:00PM">5:00PM</option>
<option value="5:30PM">5:30PM</option>
<option value="6:00PM">6:00PM</option>
<option value="6:30PM">6:30PM</option>
<option value="7:00PM">7:00PM</option>
<option value="7:30PM">7:30PM</option>
<option value="8:00PM">8:00PM</option>
<option value="8:30PM">8:30PM</option>
<option value="9:00PM">9:00PM</option>
<option value="9:30PM">9:30PM</option>
<option value="10:00PM">10:00PM</option>
<option value="10:30PM">10:30PM</option>
<option value="11:00PM">11:00PM</option>
<option value="11:30PM">11:30PM</option>
<option value="12:00AM">12:00AM</option>
<option value="12:30AM">12:30AM</option>
<option value="1:00AM">1:00AM</option>
<option value="1:30AM">1:30AM</option>
<option value="2:00AM">2:00AM</option>
<option value="2:30AM">2:30AM</option>
<option value="3:00AM">3:00AM</option>
<option value="3:30AM">3:30AM</option>
<option value="4:00AM">4:00AM</option>
<option value="4:30AM">4:30AM</option>
<option value="5:00AM">5:00AM</option>
<option value="5:30AM">5:30AM</option>
</select>
You can retrieve the selected index of the select element, make sure there is another option that comes after it, and then locate it by index in the options collection of that select element.
$('#timeslot').on('input', function () {
var i = this.selectedIndex;
if (i + 1 < this.options.length) {
console.log("next option value is " + this.options[i + 1].value);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='timeslot'>
<option value="6:00AM">6:00AM</option>
<option value="6:30AM">6:30AM</option>
<option value="7:00AM">7:00AM</option>
<option value="7:30AM">7:30AM</option>
</select>
You could just change the value like this.
<option value="6:00PM">5:30PM</option>
That way it will appear as if they are selecting 5:30, but it is outputting 6:00
As I understand you , you need to use :
$('option:selected').next() or
$('option:selected').prev()
To select the next or previous option from the dropdown after or before the selected option you can use the following solution:
Next option:
XPath:
//select[#class='valid' and #id='f-cut-off-time']//option[#selected]//following::option[1]
Browser snapshot:
Previous option:
XPath:
//select[#class='valid' and #id='f-cut-off-time']//option[#selected]//preceding::option[1]
Browser snapshot:

Missing after argument on getting select options

I write some code for a project. Now I can't find what is wrong.
This is my code:
$('#zielland').replaceWith('<select id="zielland" name="destination_country">"{herkunfstland}"</select>');
{herkunfstland} output following:
('<select id="zielland" name="destination_country">;
<option value="AFG" data-id="">Afghanistan</option>
<option value="DZA" data-id="">Algeria</option>
<option value="ASM" data-id="">American Samoa</option>
<option value="AGO" data-id="">Angola</option>
<option value="AIA" data-id="">Anguilla</option>
<option value="ATG" data-id="">Antigua and Barbuda</option>
<option value="ARG" data-id="">Argentina</option>
<option value="ARM" data-id="">Armenia</option>
<option value="ABW" data-id="">Aruba</option>
<option value="AUS" data-id="">Australia</option>
<option value="AZE" data-id="">Azerbaijan</option>
<option value="BHS" data-id="">Bahamas</option>
<option value="BHR" data-id="">Bahrain</option>
<option value="BGD" data-id="">Bangladesh</option>
<option value="BRB" data-id="">Barbados</option>
<option value="BLZ" data-id="">Belize</option>
<option value="BEN" data-id="">Benin</option>
"</select>');
I hope that somebody can help me.
Thanks :)
Replace your first code block with
$('#zielland').replaceWith(`<select id=zielland name=destination_country>${herkunfstland}</select>`);
In order for you to use the ${ } syntax you must place it inside backticks.

How to use option from a drop down list many times

i wonder if there's a way to use option from select tag for many drop down list. My html looks like :
<div id="backGround0"></div>
<div id="dropspot0"></div>
<p class="ziua0">LUNI<br/>
<select id="zile0">
<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>
</select>
<select id="luniAn0">
<option value="Ianuarie">Ianuarie</option>
<option value="Februarie">Februarie</option>
<option value="Martie">Martie</option>
<option value="Aprilie">Aprilie</option>
<option value="Mai">Mai</option>
<option value="Iunie">Iunie</option>
<option value="Iulie">Iulie</option>
<option value="August">August</option>
<option value="Septembrie">Septembrie</option>
<option value="Octombrie">Octombrie</option>
<option value="Noiembrie">Noiembrie</option>
<option value="Decembrie">Decembrie</option>
</select>
</p>
And i want to add exactly the same values from above into these select tags:
<div id="backGround1"></div>
<div id="dropspot1"></div>
<p class="ziua1">MARTI<br/>
<select id="zile1">
</select>
<select id="luniAn1">
</select>
</p>
I have tried like this:
function dropDownLists(){
var zileOptions = $.map($('#zile0 option'), function(e) { return e.value; });
var luniAnOptions = $.map($('#luniAn option'), function(e) { return e.value; });
for(var i = 1; i < 7; i++){
zileToAdd = document.getElementById("zile" + i);
luniToAdd = document.getElementById("luniAn" + i);
zileToAdd.append("<option>" + zileOptions + "</option>");
luniToAdd .append("<option>" + luniAnOptions + "</option>");
}
}
Where i tried to take value of first select tag and add in another. But,i couldnt get option value,name or something else for Months...and neither
zileToAdd.append("<option>" + zileOptions + "</option>");
doesnt work :( That for shall add these two drop down lists 6 more times for select tags like id="zile" + i (for days) and id="luniAn" + i for second drop down list (months).
You can try html() function
$('#zile1').html($('#zile0').html());
$('#luniAn1').html($('#luniAn0').html());
Please check this demo
demo: http://jsfiddle.net/8LcVv/
var zile0 = $('#zile0').html();
$('#zile1').html(zile0);
var luniAn0 = $('#luniAn0').html();
$('#luniAn1').html(luniAn0);
you can also use html-defining javascript-variables:
var options = '<option value="01">01</option>' +
'<option value="02">02</option>' +
'<option value="03">03</option>';
$('#zile1').append(options);
$('#luniAn1').append(options);
something like this should work also.
you can add the select block in one file; And include them where ever needed. This link may help you.
Include same header and footer in multiple html files
The benefit of using this technique is it allows you add same code in different pages.

Show/Hide Field Based on Option Value in Select Box

I am trying to use a slightly modified version of this code to show/hide the field Return Time on this page based on Type of Trip:
One Way: Return Time is hidden
Round Trip: Return Time is shown
Here is the Select Box html. Code is autogenerated by cforms on wordpress.
<select name="TripType" id="TripType" class="cformselect" >
<option value="One Way">One Way</option>
<option value="Round Trip">Round Trip</option>
</select>
And here is the form element I'm trying to hide:
<li id="li--8" class=""><label id="label--8" for="DepartLeg2-Time"><span>Return Time</span></label><select name="DepartLeg2-Time" id="DepartLeg2-Time" class="cformselect" >
<option value="12:00am">12:00am</option>
<option value="12:30am">12:30am</option>
<option value="1:00am">1:00am</option>
<option value="1:30am">1:30am</option>
<option value="2:00am">2:00am</option>
<option value="2:30am">2:30am</option>
<option value="3:00am">3:00am</option>
<option value="3:30am">3:30am</option>
<option value="4:00am">4:00am</option>
<option value="4:30am">4:30am</option>
<option value="5:00am">5:00am</option>
<option value="5:30am">5:30am</option>
<option value="6:00am">6:00am</option>
<option value="6:30am">6:30am</option>
<option value="7:00am">7:00am</option>
<option value="7:30am">7:30am</option>
<option value="8:00am">8:00am</option>
<option value="8:30am">8:30am</option>
<option value="9:00am">9:00am</option>
<option value="9:30am">9:30am</option>
<option value="10:00am">10:00am</option>
<option value="10:30am">10:30am</option>
<option value="11:00am">11:00am</option>
<option value="11:30am">11:30am</option>
<option value="12:00pm">12:00pm</option>
<option value="12:30pm">12:30pm</option>
<option value="1:00pm">1:00pm</option>
<option value="1:30pm">1:30pm</option>
<option value="2:00pm">2:00pm</option>
<option value="2:30pm">2:30pm</option>
<option value="3:00pm">3:00pm</option>
<option value="3:30pm">3:30pm</option>
<option value="4:00pm">4:00pm</option>
<option value="4:30pm">4:30pm</option>
<option value="5:00pm">5:00pm</option>
<option value="5:30pm">5:30pm</option>
<option value="6:00pm">6:00pm</option>
<option value="6:30pm">6:30pm</option>
<option value="7:00pm">7:00pm</option>
<option value="7:30pm">7:30pm</option>
<option value="8:00pm">8:00pm</option>
<option value="8:30pm">8:30pm</option>
<option value="9:00pm">9:00pm</option>
<option value="9:30pm">9:30pm</option>
<option value="10:00pm">10:00pm</option>
<option value="10:30pm">10:30pm</option>
<option value="11:00pm">11:00pm</option>
<option value="11:30pm">11:30pm</option>
</select></li>
Here is the javascript I'm using:
$("#TripType").change(function() {
$("#li--8")[$(this).val() == "Round Trip" ? 'show' : 'hide']("fast");
}).change();
I have the code working here on JSFiddle: http://jsfiddle.net/MS4Ck/. However, it is not working on the site. My console is not giving me any errors except for a reference error coming from some logging code I put in there to make sure the javascript is being called (it is). Any ideas? Thank you so much!
Just a guess, but make sure this function is wrapped in a docReady function eg:
$(document).ready(function() {
$("#TripType").change(function() {
$("#li--8")[$(this).val() == "Round Trip" ? 'show' : 'hide']("fast");
}).change();
});

Categories