javascript

Just a Web Code Solution

Step 1. Your question relates to:

Step 2. Type a keyword:

set alarm clock using javascript

2852

Show ResultJAVASCRIPT

<!DOCTYPE html>
<html>
<head>
<style>

form
{
position: absolute;
top: 50%;
left: 50%;
margin-right:-50%;
transform: translate(-50%,-50%);
}

fieldset
{
border-radius: 5px;
background-color: yellow;
}

legend
{
color: #0026ff;
font-weight: bold;
}

#alarmclock_JS
{
font-family: 'Times New Roman';
font-weight: bold;
font-size: 15px;
}

#alarmclock_JS div
{
margin-bottom: 0.8em;
}

#alarmclock_JS div.clockText
{
float: left;
width: 150px;
font-size: 13px;
font-family: 'Times New Roman';
font-size: 15px;
clear: left;
}

#alarmclock_JS span
{
margin-right: 5px;
}

</style>

<script>
var triggerAlarm={
padfield:function(f){
return (f<10)? "0" + f : f
},
Currenttime:function(){
var getDate=new Date()
var ct=this.padfield(getDate.getHours()) + ":" + this.padfield(getDate.getMinutes()) + ":"
+ this.padfield(getDate.getSeconds())
this.ctref.innerHTML=ct
this.ctref.setAttribute("title", ct)
if (typeof this.hourwake!="undefined"){ // check if alarm is set
if (this.ctref.title==(this.padfield(this.hourwake) + ":" + this.padfield(this.minutewake) + ":"
+ this.padfield(this.secondwake))){
clearInterval(triggerAlarm.timer)
window.location=document.getElementById("setMusic").value
}
}
},
setAlarm:function(){
this.hourwake=this.hourselect.value
this.minutewake=this.minuteselect.value
this.secondwake=this.secondselect.value
this.hourselect.disabled=true
this.minuteselect.disabled=true
this.secondselect.disabled=true
},
alarmAction:function(){
var getDate=new Date()
this.ctref=document.getElementById("triggerAlarm_js")
this.submitref=document.getElementById("submitBtn")
this.submitref.onclick=function(){
triggerAlarm.setAlarm()
this.value="Alarm Set"
this.disabled=true
return false
}
this.resetref=document.getElementById("resetBtn")
this.resetref.onclick=function(){
triggerAlarm.submitref.disabled=false
triggerAlarm.hourwake=undefined
triggerAlarm.hourselect.disabled=false
triggerAlarm.minuteselect.disabled=false
triggerAlarm.secondselect.disabled=false
return false
}
var selections1=document.getElementById("aHour")
var selections2=document.getElementById("aMinutes")
var selections3=document.getElementById("aSeconds")

this.hourselect=selections1
this.minuteselect=selections2
this.secondselect=selections3

for (var i=0; i<60; i++){
if (i<24) // check if within range of hours field: 0-23
this.hourselect.value=getDate.getHours()
this.minuteselect.value=getDate.getMinutes()
this.secondselect.value=getDate.getSeconds()
}
triggerAlarm.Currenttime()
triggerAlarm.timer=setInterval(function(){triggerAlarm.Currenttime()}, 1000)
}
}
</script>
</head>
<body>

<form>
<fieldset>
<legend>Javascript Alarm Clock</legend>
<div id="alarmclock_JS">
<div>
<div class="clockText">Current Time:</div> <span id="triggerAlarm_js" style="letter-spacing: 3px"></span></div>
<div style="letter-spacing: 2px">
<div class="clockText">Your Alarm:</div>
<span><input id="aHour" type="number" min="0" max="23" /> Hour</span>
<span><input id="aMinutes" type="number" min="0" max="59" /> Minutes</span>
<span><input id="aSeconds" type="number" min="0" max="59" /> Seconds</span>
</div>
<input type="text" id="setMusic" size="56" value="https://www.freespecialeffects.co.uk/soundfx/sirens/alarm_01.wav" hidden/>
<input type="submit" value="Set Alarm!" id="submitBtn" /> <input type="reset" value="Reset" id="resetBtn" />
</div>
</fieldset>
</form>

<script>
triggerAlarm.alarmAction();
</script>

</body>
</html>