Notice: Undefined variable: root in /users/basti1012/www/index1.php on line 41
To do liste erstellen

To do liste erstellen

Erstelle dir deine eigene To do Liste. Die Einträge werden in localstorage des Browsers gespeichert

Der hier verwendete Code

<!DOCTYPE HTML> <html lang="de-DE"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=380"> <title>To do list with Notifications and Vibration</title> <style> /* || basic set up + sizing for containers */ html, body { margin: 0; } html { width: 100%; height: 100%; font-size: 10px; font-family: 'Donegal One', serif; background: #FFEE00; } body { width: 50rem; position: relative; background: #FFEE00; margin: 0 auto; border-left: 2px solid #FF6400; border-right: 2px solid #FF6400; } h1, h2 { text-align: center; background: #FF6400; font-family: 'Lily Script One', cursive; } h1 { font-size: 6rem; margin: 0; background: -webkit-linear-gradient(top, #FF9640, #FF6400); background: -moz-linear-gradient(top, #FF9640, #FF6400); background: -ms-linear-gradient(top, #FF9640, #FF6400); background: linear-gradient(top, #FF9640, #FF6400); text-shadow: 1px 1px 1px #FF6400, 2px 2px 1px black; } h2 { font-size: 2.4rem; } /* || bottom toolbar styling */ #toolbar { position: relative; height: 6rem; width: 100%; background: #FF6400; border-top: 2px solid #FF6400; border-bottom: 2px solid #FF6400; } #install, input[type="submit"] { line-height: 1.8; font-size: 1.3rem; border-radius: 5px; border: 1px solid black; color: black; text-shadow: 1px 1px 1px black; border: 1px solid rgba(0,0,0,0.1); box-shadow: inset 0px 5px 3px rgba(255,255,255,0.2), inset 0px -5px 3px rgba(0,0,0,0.2); } #install { position: absolute; bottom: 0.3rem; right: 0.3rem; } #notifications { margin: 0; position: relative; padding: 0.3rem; background: #FFEE00; position: absolute; top: 0rem; left: 0rem; height: 5.4rem; width: 50%; overflow: auto; line-height: 1.2; } #notifications li { margin-left: 1.5rem; } /* || new item form styling */ .form-box { background: #FF6400; width: 85%; padding: 1rem; margin: 2rem auto; box-shadow: 2px 2px 5px rgba(0,0,0,0.7); } form div { margin-bottom: 1rem; } form .full-width { margin: 1rem auto 2rem; width: 100%; } form .half-width { width: 50%; float: left; } form .third-width { width: 33%; float: left; } form div label { width: 10rem; float: left; padding-right: 1rem; font-size: 1.6rem; line-height: 1.6; } form .full-width input { width: 30rem; } form .half-width input { width: 8.75rem; } form .third-width select { width: 13.5rem; } form div input[type="submit"] { clear: both; width: 20rem; display: block; height: 3rem; margin: 0 auto; position: relative; top: 0.5rem; } /* || tasks box */ .task-box { width: 85%; padding: 1rem; margin: 2rem auto; font-size: 1.8rem; } .task-box ul { margin: 0; padding: 0; } .task-box li { list-style-type: none; padding: 1rem; border-bottom: 2px solid #FF6400; } .task-box li:last-child { border-bottom: none; } .task-box li:last-child { margin-bottom: 0rem; } .task-box button { margin-left: 2rem; font-size: 1.6rem; border: 1px solid #eee; border-radius: 5px; box-shadow: inset 0 -2px 5px rgba(0,0,0,0.5); 1px 1px 1px black; } /* setting cursor for interactive controls */ button, input[type="submit"], select { cursor: pointer; } /* media query for small screens */ @media (max-width: 32rem) { body { width: 100%; border-left: none; border-right: none; } form div { clear: both; } form .full-width { margin: 1rem auto; } form .half-width { width: 100%; float: none; } form .third-width { width: 100%; float: none; } form div label { width: 36%; padding-left: 1rem; } form input, form select, form label { line-height: 2.5rem; font-size: 2rem; } form .full-width input { width: 50%; } form .half-width input { width: 50%; } form .third-width select { width: 50%; } #install { right: 1rem; } } </style> </head> <body> <h1>To do list</h1> <div class="task-box"> <ul id="task-list"> </div> </ul> <div class="form-box"> <h2>Add new to do.</h2> <form id="task-form" action="index.html"> <div class="full-width"><label for="title">Task title:</label><input type="text" id="title" required></div> <div class="half-width"><label for="deadline-hours">Hours (hh):</label><input type="number" id="deadline-hours" required></div> <div class="half-width"><label for="deadline-minutes">Mins (mm):</label><input type="number" id="deadline-minutes" required></div> <div class="third-width"><label for="deadline-day">Day:</label> <select id="deadline-day" required> <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></div> <div class="third-width"><label for="deadline-month">Month:</label> <select id="deadline-month" required> <option value="January">January</option> <option value="February">February</option> <option value="March">March</option> <option value="April">April</option> <option value="May">May</option> <option value="June">June</option> <option value="July">July</option> <option value="August">August</option> <option value="September">September</option> <option value="October">October</option> <option value="November">November</option> <option value="December">December</option> </select></div> <div class="third-width"><label for="deadline-year">Year:</label> <select id="deadline-year" required> <option value="2020">2020</option> <option value="2021">2021</option> <option value="2022">2022</option> <option value="2023">2023</option> <option value="2024">2024</option> <option value="2025">2025</option> <option value="2026">2026</option> <option value="2027">2027</option> </select></div> <div><input type="submit" id="submit" value="Add Task"></div> <div></div> </form> </div> <div id="toolbar"> <ul id="notifications"> </ul> <button id="install"> Install on FirefoxOS </button> </div> </body> <script> var button = document.getElementById('install'); if('mozApps' in navigator) { var manifest_url = location.href.substring(0, location.href.lastIndexOf("/")) + "/manifest.webapp"; function install(ev) { ev.preventDefault(); var installLocFind = navigator.mozApps.install(manifest_url); installLocFind.onsuccess = function(data) { }; installLocFind.onerror = function() { alert(installLocFind.error.name); }; }; var installCheck = navigator.mozApps.checkInstalled(manifest_url); installCheck.onsuccess = function() { if(installCheck.result) { button.style.display = "none"; } else { button.addEventListener('click', install, false); }; }; } else { button.style.display = "none"; } var note = document.getElementById('notifications'); var db; var newItem = [ { taskTitle: "", hours: 0, minutes: 0, day: 0, month: "", year: 0, notified: "no" } ]; var taskList = document.getElementById('task-list'); var taskForm = document.getElementById('task-form'); var title = document.getElementById('title'); var hours = document.getElementById('deadline-hours'); var minutes = document.getElementById('deadline-minutes'); var day = document.getElementById('deadline-day'); var month = document.getElementById('deadline-month'); var year = document.getElementById('deadline-year'); var submit = document.getElementById('submit'); window.onload = function() { note.innerHTML += '<li>App initialised.</li>'; window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction; window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange; var DBOpenRequest = window.indexedDB.open("toDoList", 4); DBOpenRequest.onerror = function(event) { note.innerHTML += '<li>Error loading database.</li>'; }; DBOpenRequest.onsuccess = function(event) { note.innerHTML += '<li>Database initialised.</li>'; db = DBOpenRequest.result; displayData(); }; DBOpenRequest.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerHTML += '<li>Error loading database.</li>'; }; var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" }); objectStore.createIndex("hours", "hours", { unique: false }); objectStore.createIndex("minutes", "minutes", { unique: false }); objectStore.createIndex("day", "day", { unique: false }); objectStore.createIndex("month", "month", { unique: false }); objectStore.createIndex("year", "year", { unique: false }); objectStore.createIndex("notified", "notified", { unique: false }); note.innerHTML += '<li>Object store created.</li>'; }; function displayData() { taskList.innerHTML = ""; var objectStore = db.transaction('toDoList').objectStore('toDoList'); objectStore.openCursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listItem = document.createElement('li'); if(cursor.value.day == 1 || cursor.value.day == 21 || cursor.value.day == 31) { daySuffix = "st"; } else if(cursor.value.day == 2 || cursor.value.day == 22) { daySuffix = "nd"; } else if(cursor.value.day == 3 || cursor.value.day == 23) { daySuffix = "rd"; } else { daySuffix = "th"; } listItem.innerHTML = cursor.value.taskTitle + ' — ' + cursor.value.hours + ':' + cursor.value.minutes + ', ' + cursor.value.month + ' ' + cursor.value.day + daySuffix + ' ' + cursor.value.year + '.'; if(cursor.value.notified == "yes") { listItem.style.textDecoration = "line-through"; listItem.style.color = "rgba(255,0,0,0.5)"; } taskList.appendChild(listItem); var deleteButton = document.createElement('button'); listItem.appendChild(deleteButton); deleteButton.innerHTML = 'X'; deleteButton.setAttribute('data-task', cursor.value.taskTitle); deleteButton.onclick = function(event) { deleteItem(event); } cursor.continue(); } else { note.innerHTML += '<li>Entries all displayed.</li>'; } } } taskForm.addEventListener('submit',addData,false); function addData(e) { e.preventDefault(); if(title.value == '' || hours.value == null || minutes.value == null || day.value == '' || month.value == '' || year.value == null) { note.innerHTML += '<li>Data not submitted — form incomplete.</li>'; return; } else { var newItem = [ { taskTitle: title.value, hours: hours.value, minutes: minutes.value, day: day.value, month: month.value, year: year.value, notified: "no" } ]; var transaction = db.transaction(["toDoList"], "readwrite"); transaction.oncomplete = function() { note.innerHTML += '<li>Transaction completed: database modification finished.</li>'; displayData(); }; transaction.onerror = function() { note.innerHTML += '<li>Transaction not opened due to error: ' + transaction.error + '</li>'; }; var objectStore = transaction.objectStore("toDoList"); console.log(objectStore.indexNames); console.log(objectStore.keyPath); console.log(objectStore.name); console.log(objectStore.transaction); console.log(objectStore.autoIncrement); var objectStoreRequest = objectStore.add(newItem[0]); objectStoreRequest.onsuccess = function(event) { note.innerHTML += '<li>Request successful.</li>'; title.value = ''; hours.value = null; minutes.value = null; day.value = 01; month.value = 'January'; year.value = 2020; }; }; }; function deleteItem(event) { var dataTask = event.target.getAttribute('data-task'); var transaction = db.transaction(["toDoList"], "readwrite"); var request = transaction.objectStore("toDoList").delete(dataTask); transaction.oncomplete = function() { event.target.parentNode.parentNode.removeChild(event.target.parentNode); note.innerHTML += '<li>Task \"' + dataTask + '\" deleted.</li>'; }; }; function checkDeadlines() { var now = new Date(); var minuteCheck = now.getMinutes(); var hourCheck = now.getHours(); var dayCheck = now.getDate(); var monthCheck = now.getMonth(); var yearCheck = now.getFullYear(); var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList'); objectStore.openCursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { switch(cursor.value.month) { case "January": var monthNumber = 0; break; case "February": var monthNumber = 1; break; case "March": var monthNumber = 2; break; case "April": var monthNumber = 3; break; case "May": var monthNumber = 4; break; case "June": var monthNumber = 5; break; case "July": var monthNumber = 6; break; case "August": var monthNumber = 7; break; case "September": var monthNumber = 8; break; case "October": var monthNumber = 9; break; case "November": var monthNumber = 10; break; case "December": var monthNumber = 11; break; default: alert('Incorrect month entered in database.'); } if(+(cursor.value.hours) == hourCheck && +(cursor.value.minutes) == minuteCheck && +(cursor.value.day) == dayCheck && monthNumber == monthCheck && cursor.value.year == yearCheck && cursor.value.notified == "no") { createNotification(cursor.value.taskTitle); } cursor.continue(); } } } function createNotification(title) { if (!"Notification" in window) { console.log("This browser does not support notifications."); } else if (Notification.permission === "granted") { var img = '/to-do-notifications/img/icon-128.png'; var text = 'HEY! Your task "' + title + '" is now overdue.'; var notification = new Notification('To do list', { body: text, icon: img }); window.navigator.vibrate(500); } else if (Notification.permission !== 'denied') { Notification.requestPermission(function (permission) { if(!('permission' in Notification)) { Notification.permission = permission; } if (permission === "granted") { var img = '/to-do-notifications/img/icon-128.png'; var text = 'HEY! Your task "' + title + '" is now overdue.'; var notification = new Notification('To do list', { body: text, icon: img }); window.navigator.vibrate(500); } }); } var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList'); var objectStoreTitleRequest = objectStore.get(title); objectStoreTitleRequest.onsuccess = function() { var data = objectStoreTitleRequest.result; data.notified = "yes"; var updateTitleRequest = objectStore.put(data); updateTitleRequest.onsuccess = function() { displayData(); } } } setInterval(checkDeadlines, 1000); } </script> </html>