Javascript Multiple Alarm clock

Javascript Multiple Alarm clock
0.0 0

#1

Hi I’m trying to build a web app alarm clock which will be able to feed multiple alarms and able to delete them but I need to do it without using backend technology and the data should not be cleared after the page reloads.
So far now I have created the dynamic inputs with javscript but i don;t know how to get data and create alarm and do not have any idea how to store the data after the page reloads.
This is my code:

 <div id="TextBoxContainer">
                            <!--Textboxes will be added here -->
                        </div>
                        <br />
<input id="btnAdd" type="button" value="add" onclick="AddTextBox()" />

<script type="text/javascript">
		var room = 1;
		function GetDynamicTextBox(value){
			room++;
			return '<div>Alarm ' + room +':</div><input type="number" style="text-align:center;margin:auto;padding:0px;width:200px;" min="0" max="23" placeholder="hour" name="hour[]" value = "' + value + '" /><input type="number" min="0" max="59" placeholder="minute" style="text-align:center; padding:0px; margin:auto; width:200px;" name="minute[]" value = "' + value + '" /><input type="date" style="margin:auto;text-align:center; width:200px; padding:10px"><input type="button" value ="Set" /> <input type="button" value ="Remove" onclick = "RemoveTextBox(this)" />';
		}
		function AddTextBox() {
			var div = document.createElement('DIV');
			div.innerHTML = GetDynamicTextBox("");
			document.getElementById("TextBoxContainer").appendChild(div);
		}
		 
		function RemoveTextBox(div) {
			document.getElementById("TextBoxContainer").removeChild(div.parentNode);
		}
		 
		function RecreateDynamicTextboxes() {
			var values = eval('<%=Values%>');
			if (values != null) {
				var html = "";
				for (var i = 0; i < values.length; i++) {
					html += "<div>" + GetDynamicTextBox(values[i]) + "</div>";
				}
				document.getElementById("TextBoxContainer").innerHTML = html;
				
				sessionStorage.inputBoxes = document.getElementById("TextBoxContainer").innerHTML;
			}
		}
		window.onload = RecreateDynamicTextboxes;
		
		
		</script>

#2

Try localStorage


#3

I’ve tried it but the dynamic inputs are cleared after the page reloads and I’ve also tried cookies but it doen’t works


#4

You need to recreate the alarms based on the data that you save in local storage. I created a sample code for you. It’s very simplistic and you need to refactor it but you should get the idea.
HTML

<div id="alarms"></div>
H:<input id="hour" type="number">
M: <input id="minute" type="number">
<button id="add-alarm">Set</button>

JS

const alarms = document.querySelector('#alarms');
const addAlarm = document.querySelector('#add-alarm');
const hour = document.querySelector('#hour');
const minute = document.querySelector('#minute');
let activeAlarms = 0;

const setAlarm = (h,m) =>{ //save alarms in local storage
  activeAlarms++;
  localStorage.setItem('alarm '+activeAlarms,  JSON.stringify({
    hour: h,
    minute: m
  }));
}
const appendAlarm = (h,m) =>{ //append alarms to page body
  let container = document.createElement('div');
  let hour = document.createTextNode('Hour: '+h);
  let minute = document.createTextNode('Miniute: '+m);
  container.appendChild(hour);
  container.appendChild(minute);
  alarms.appendChild(container);
}

addAlarm.addEventListener('click',function(){
  setAlarm(hour.value, minute.value);
  appendAlarm(hour.value, minute.value);
});

window.onload = function(){ //when window loads check the local storage for saved alarms and recreate them
  activeAlarms = localStorage.length;
  for (let i=0; i<localStorage.length; i++){
    const alarm = JSON.parse(localStorage.getItem(localStorage.key(i)));
    appendAlarm(alarm['hour'],alarm['minute']);
  }
}

#5

but I need to store dynamic inputs value and I’m bit off, I didn’t know how will i store these values and then create a alert, can you help me to complete this ?


#6

I don’t understand what you want to achieve. Isn’t it enough to store an hour and minute at which the alarm should be set off?


#7

what do you mean you need to store dynamic input values? can you be more concrete? better yet provide an example.