Deine Aufgabe: Eine APP für eine Aufgabenliste

Code skill

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>

Zurück zur Mission