Javascript Multiple Alarm clock

Javascript Multiple Alarm clock
0.0 0


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 -->
                        <br />
<input id="btnAdd" type="button" value="add" onclick="AddTextBox()" />

<script type="text/javascript">
		var room = 1;
		function GetDynamicTextBox(value){
			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("");
		function RemoveTextBox(div) {
		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;


Try localStorage


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


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.

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


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
  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);

  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)));


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 ?


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?


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