To-Do-Liste


Klicken Sie auf einen Eintrag, um ihn zu entfernen.

Quellcode
<html>
<head>

<style type="text/css">
form {width: 30%;}
button, label, {width: 70%;padding: 0.2em;margin: 0.2em;}
.input {width: 200%;padding: 0.2em; margin: 0.2em;}
.label {width: 100%;padding: 0.2em;margin: 0.2em;}
input {width: 86%; margin-bottom: 2em;}
ul#eintraege {width: 60%;border: 1px solid #a9a9a9; border-radius: 5px; margin-top: 10px;padding: 0px; list-style-type: none;}
ul#eintraege li {border-bottom: 1px solid #a9a9a9; padding: 10px; background-image: linear-gradient(#f9f9f9, #e3e3e3);}
ul#eintraege li:last-child {border-bottom: none; border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;}
ul#eintraege li:first-child {border-top-right-radius: 5px; border-top-left-radius: 5px;}
</style>
<head>

<body >
<table align="center" style="width: 80%">
<tr><td>

<form>
<label class="label" for="eingabe">Geben Sie einen neuen Termin hinzu:</label><input class="input" id="eingabe" value="" type="text">
<button id="mehr">Termin eintragen</button> <button id="loeschen">Alle Termine löschen </button>
</form>
</td></tr>
<tr><td>
<ul id="eintraege"> </ul><p>Klicken Sie auf die Einträge, um sie zu entfernen.</p>
<script>
window.onload = init;
function init() {
var button = document.getElementById('mehr');
button.onclick = ToDoHinzufügen;
var clearButton = document.getElementById('loeschen');
clearButton.onclick = allesLöschen;
var eintraegeArray = HolEinträge();
for (var i = 0; i < eintraegeArray.length; i++) {
var aufgabeNr = eintraegeArray[i];
var value = JSON.parse(localStorage[aufgabeNr]);
insDOMschreiben(aufgabeNr, value); } }
function HolEinträge() {
var eintraegeArray = localStorage.getItem('eintraegeArray');
if (!eintraegeArray) {
eintraegeArray = [];
localStorage.setItem('eintraegeArray', JSON.stringify(eintraegeArray));
} else {eintraegeArray = JSON.parse(eintraegeArray);}
return eintraegeArray;}
function ToDoHinzufügen() {
var eintraegeArray = HolEinträge();
var value = document.getElementById('eingabe')
.value;
if (value != '') {
var currentDate = new Date();
var aufgabeNr = 'aufgabe_' + currentDate.getTime()
var aufgabeText = { 'value': value };
localStorage.setItem(aufgabeNr, JSON.stringify(aufgabeText));
eintraegeArray.push(aufgabeNr);
localStorage.setItem('eintraegeArray', JSON.stringify(eintraegeArray));
insDOMschreiben(aufgabeNr, aufgabeText);
document.getElementById('eingabe')
.value = ' ';} else { alert('Bitte geben Sie etwas ein!');}}
function toDoLöschen(e) {
var aufgabeNr = e.target.id;
var eintraegeArray = HolEinträge();
if (eintraegeArray) {
for (var i = 0; i < eintraegeArray.length; i++) {
if (aufgabeNr == eintraegeArray[i]) {eintraegeArray.splice(i, 1);} }
localStorage.removeItem(aufgabeNr);
localStorage.setItem('eintraegeArray', JSON.stringify(eintraegeArray));
ausDOMentfernen(aufgabeNr); }}
function insDOMschreiben(aufgabeNr, ItemObj) {
var eintraege = document.getElementById('eintraege');
var eintrag = document.createElement('li');
eintrag.setAttribute('id', aufgabeNr);
eintrag.innerHTML = ItemObj.value;
eintraege.appendChild(eintrag);
eintrag.onclick = toDoLöschen;}
function ausDOMentfernen(aufgabeNr) {
var eintrag = document.getElementById(aufgabeNr);
eintrag.parentNode.removeChild(eintrag);}
function allesLöschen() {
localStorage.clear();
var ItemList = document.getElementById('eintraege');
var eintraege = ItemList.childNodes;
for (var i = eintraege.length - 1; i >= 0; i--) {
ItemList.removeChild(eintraege[i]); }
var eintraegeArray = HolEinträge();}
</script>
</td></tr>
</table>
</body>

</html>