Hello. I'm working on a Chrome Extension. It's a simple "ToDo" list. I've currently got a variety of buttons (2mins, 5, 10, 15, 30, 60mins) for the user to set an alarm. However I'm not finding a way to replace all the buttons with a user input button instead. That way multiple buttons for the alarm can be avoided, and there would only be one button. Can someone help? The rest of the extension works. It's just figuring out a different way for the button that I'm asking help with. ---manifest.json--- { "name": "To-Do Task List", "description": "Allows user to create a to-do list", "version": "1.0", "manifest_version": 2, "permissions": ["alarms", "notifications", "storage"], "background": { "scripts": ["background.js"] }, "browser_action": { "default_icon": "icon16.png", "default_title": "To-Do List", "default_popup": "popup.html" }, "icons": { "128": "icon128.png", "48": "icon48.png", "32": "icon32.png", "16": "icon16.png" } }

------------------

---popup.html---

To-Do List

Add

---------------- ---popup.js---

'use strict';

// Add new list item javascript command document.addEventListener('DOMContentLoaded', function() { chrome.storage.local.get('result', function(result) { var taskListArr = result.result; var itemArray = taskListArr.split(","); itemArray.forEach(function(task){ if(task != "") { newElement(null, task); } }); }); document.getElementById('addButton').addEventListener('click', newElement); });

// Delete list item javascript command document.addEventListener('DOMContentLoaded', function() { document.body.addEventListener('click', function ( event ) { if(event.srcElement.className == 'close' ) { deleteTask(event.srcElement); }; }); });

// Click on a close button to hide the current list item function deleteTask(element){ var div = element.parentElement; var childElements = div.childNodes; var textToDelete = childElements[0].nodeValue; chrome.storage.local.get('result', function(result) { var taskListArr = result.result; taskListArr = taskListArr.replace(textToDelete, ""); chrome.storage.local.set({'result': taskListArr}); div.remove(); }); }

// Create a new list item when clicking on the "Add" button function newElement(e, data) { var li = document.createElement("li"); var inputValue = document.getElementById("myInput").value; if(data != null || typeof(data) != "undefined"){ inputValue = data; } else { chrome.storage.local.get('result', function(result) { var taskListArr = result.result; taskListArr = taskListArr + "," + inputValue; chrome.storage.local.set({'result': taskListArr}); }); } var t = document.createTextNode(inputValue); li.appendChild(t); if (inputValue === '') { alert("You must write something!"); } else { document.getElementById("myUL").appendChild(li); } document.getElementById("myInput").value = ""; var span = document.createElement("SPAN"); var txt = document.createTextNode("\u00D7"); span.className = "close"; span.appendChild(txt); li.appendChild(span); for (i = 0; i < close.length; i++) { close[i].onclick = function() { var div = this.parentElement; div.style.display = "none"; } }

// Create a "close" button and append it to each list item var myNodelist = document.getElementsByTagName("LI"); var i; for (i = 0; i < myNodelist.length; i++) { var span = document.createElement("SPAN"); var txt = document.createTextNode("\u00D7"); span.className = "close"; span.appendChild(txt); myNodelist[i].appendChild(span); }

// Add a "checked" symbol when clicking on a list item var list = document.querySelector('ul'); list.addEventListener('click', function(ev) { if (ev.target.tagName === 'LI') { ev.target.classList.toggle('checked'); } }, false); } function setAlarm(event) { let minutes = parseFloat(event.target.value); chrome.browserAction.setBadgeText({text: 'ON'}); chrome.alarms.create({delayInMinutes: minutes}); chrome.storage.sync.set({minutes: minutes}); window.close(); }

function clearAlarm() { chrome.browserAction.setBadgeText({text: ''}); chrome.alarms.clearAll(); window.close(); }

//An Alarm delay of less than the minimum 1 minute will fire // in approximately 1 minute incriments if released document.getElementById('sampleSecond').addEventListener('click', setAlarm); document.getElementById('2min').addEventListener('click', setAlarm); document.getElementById('5min').addEventListener('click', setAlarm); document.getElementById('10min').addEventListener('click', setAlarm); document.getElementById('15min').addEventListener('click', setAlarm); document.getElementById('30min').addEventListener('click', setAlarm); document.getElementById('60min').addEventListener('click', setAlarm); document.getElementById('cancelAlarm').addEventListener('click', clearAlarm);

-----------------------------------

---background.js---

'use strict';

chrome.alarms.onAlarm.addListener(function() { chrome.browserAction.setBadgeText({text: ''}); chrome.notifications.create({ type: 'basic', iconUrl: 'icon32.png', title: '', message: 'Work is due soon!', buttons: [ {title: 'Keep up the hard work!'} ], priority: 0}); });

chrome.notifications.onButtonClicked.addListener(function() { chrome.storage.sync.get(['minutes'], function(item) { chrome.browserAction.setBadgeText({text: 'ON'}); chrome.alarms.create({delayInMinutes: item.minutes}); }); });

------------------------------

---style.css---

body { margin: 0; min-width: 250px; }

/* Include the padding and border in an element's total width and height */ * { box-sizing: border-box; }

/* Remove margins and padding from the list */ ul { margin: 0; padding: 0; }

/* Style the list items */ ul li { cursor: pointer; position: relative; padding: 12px 8px 12px 40px; list-style-type: none; background: #eee; font-size: 18px; transition: 0.2s; /* make the list items unselectable */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* Set all odd list items to a different color (zebra-stripes) */ ul li:nth-child(odd) { background: #f9f9f9; }

/* Darker background-color on hover */ ul li:hover { background: #ddd; }

/* When clicked on, add a background color and strike out text */ ul li.checked { background: #888; color: #fff; text-decoration: line-through; }

/* Add a "checked" mark when clicked on */ ul li.checked::before { content: ''; position: absolute; border-color: #fff; border-style: solid; border-width: 0 2px 2px 0; top: 10px; left: 16px; transform: rotate(45deg); height: 15px; width: 7px; }

/* Style the close button */ .close { position: absolute; right: 0; top: 0; padding: 12px 16px 12px 16px; }

.close:hover { background-color: #355d7a; color: white; }

/* Style the header */ .header { background-color: #355d7a; padding: 30px 40px; color: white; text-align: center; }

/* Clear floats after the header */ .header:after { content: ""; display: table; clear: both; }

/* Style the input */ input { border: none; width: 75%; padding: 10px; float: left; font-size: 16px; }

/* Style the "Add" button */ .addBtn { padding: 8.6px; width: 25%; background: #d9d9d9; color: #555; float: left; text-align: center; font-size: 16px; cursor: pointer; transition: 0.3s; }

.addBtn:hover { background-color: #bbb; }

--------------------------- Thanks again to anyone who can help me out!