Erstelle dir deine eigene To do Liste. Die Einträge werden in localstorage des Browsers gespeichert
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>