Deine Aufgabe: Eine APP für eine Aufgabenliste

Programmiere eine App bei der Professor Bairstone in einer Liste Aufgaben eintragen kann. Wenn er eine Aufgabe erledigt hat, kann er sie durch Anklicken aus der Liste entfernen. Sorge dafür, dass die Daten der Liste auf deinem Computer gespeichert werden. Du verwendest die beiden APIs DOM und localStorage. Deine App soll folgende Dinge enthalten:

Eine Funktion, die mit dem DOM Aufgaben in die Liste einträgt
Eine Funktion, die mit dem DOM Aufgaben entfernt
Eine Funktion zum Speichern mit localStorage
Eine Funktion zum Laden mit localStorage
Ein Textfeld zum Eintippen deiner neuen Aufgabe
Einen Button zum Anklicken, damit die Aufgabe eingefügt wird

Wenn du nicht weiterkommst, kannst du diesen Quellcode kopieren. Ändere das Design und das Passwort. So wird die Webseite dein eigenes Werk. Speichere die Datei unter dem Namen listapp.html in deinem Ordner Coding.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Aufgabenliste-App</title>
    <script>
      function einfügenAufgabe() {
        var neueAufgabe = document.createElement("div");
        neueAufgabe.innerHTML = document.getElementById("Feld").value;
        neueAufgabe.onclick = entfernenAufgabe;
        document.getElementById("Liste").appendChild(neueAufgabe);
        speichernListe();
       }
       function entfernenAufgabe() {
         document.getElementById("Liste").removeChild(this);
         speichernListe();
       }
       function speichernListe() {
       localStorage.gespeicherteListe = document.getElementById("Liste").innerHTML;
       }
       function ladenListe() {
         document.getElementById("Liste").innerHTML = localStorage.gespeicherteListe;
         for(var i = 0; i < Liste.children.length; i++) {
           Liste.children[i].onclick = entfernenAufgabe;
       }
     }
    </script>
</head>
<body>
   <p>Juwelier Volkov</p>
   <p>Aufgaben für Sonderausstellung</p>
   <br/>
   <input type="text" id="Feld" value="Aufgabe eintippen"/>
   <br/>
   <input type="button" value="Einfügen" onclick="einfügenAufgabe();"/>
   <br/>
   <div id="Liste"></div>
   <script>
     if(localStorage.gespeicherteListe) {
       ladenListe();
     }
   </script>
</body>
</html>

Beispiel ansehen

Zurück zur Mission