Emzett Digital

Projekt: Eine Aufgabenliste

Zum Abschluss baust du eine komplette kleine Anwendung, in der fast alles aus dem Kurs steckt: DOM, Events, Formulare, Arrays, JSON und localStorage. Du kannst den Code direkt ausführen und verändern.

Die Anforderungen

Aufgaben hinzufügen (Enter oder Button)
Aufgaben abhaken und löschen
Filter: alle, offen, erledigt
Zähler der offenen Aufgaben
Daten bleiben nach dem Neuladen erhalten

Der komplette Code

Probier es selbst · todo.html

Dein Code

<h1>Aufgaben</h1>
<form id="neu">
  <label class="visually-hidden" for="text" style="position:absolute;left:-9999px">Neue Aufgabe</label>
  <input type="text" id="text" placeholder="Was ist zu tun?" required maxlength="80">
  <button>Hinzufügen</button>
</form>
<div class="filter" role="group" aria-label="Filter">
  <button data-filter="alle" aria-pressed="true">Alle</button>
  <button data-filter="offen" aria-pressed="false">Offen</button>
  <button data-filter="fertig" aria-pressed="false">Erledigt</button>
</div>
<ul id="liste"></ul>
<p id="zaehler" role="status"></p>

function sichtbar() {
    if (filter === "offen") return aufgaben.filter(a => !a.fertig);
    if (filter === "fertig") return aufgaben.filter(a => a.fertig);
    return aufgaben;
  }

function zeichne() {
    const liste = document.getElementById("liste");
    liste.replaceChildren();                           // Liste leeren
    for (const a of sichtbar()) {
      const li = document.createElement("li");
      li.classList.toggle("fertig", a.fertig);
      li.dataset.id = a.id;

const box = document.createElement("input");
      box.type = "checkbox";
      box.checked = a.fertig;
      box.setAttribute("aria-label", "Erledigt: " + a.text);

const text = document.createElement("span");
      text.textContent = a.text;                        // textContent: sicher gegen XSS

const weg = document.createElement("button");
      weg.textContent = "×";
      weg.setAttribute("aria-label", "Löschen: " + a.text);

li.append(box, text, weg);
      liste.append(li);
    }
    const offen = aufgaben.filter(a => !a.fertig).length;
    document.getElementById("zaehler").textContent =
      offen === 1 ? "1 Aufgabe offen" : `${offen} Aufgaben offen`;
  }

document.getElementById("neu").addEventListener("submit", (e) => {
    e.preventDefault();
    const feld = document.getElementById("text");
    const text = feld.value.trim();
    if (!text) return;
    aufgaben.push({ id: Date.now(), text, fertig: false });
    feld.value = "";
    speichere(); zeichne();
  });

// Event Delegation: ein Listener für alle Einträge
  document.getElementById("liste").addEventListener("click", (e) => {
    const li = e.target.closest("li");
    if (!li) return;
    const id = Number(li.dataset.id);
    if (e.target.matches("input[type=checkbox]")) {
      const a = aufgaben.find(x => x.id === id);
      a.fertig = e.target.checked;
    } else if (e.target.matches("button")) {
      aufgaben = aufgaben.filter(x => x.id !== id);
    } else return;
    speichere(); zeichne();
  });

document.querySelector(".filter").addEventListener("click", (e) => {
    const knopf = e.target.closest("button[data-filter]");
    if (!knopf) return;
    filter = knopf.dataset.filter;
    for (const b of document.querySelectorAll(".filter button")) {
      b.setAttribute("aria-pressed", String(b === knopf));
    }
    zeichne();
  });

zeichne();
</script>

Ergebnis

Was du hier wiedererkennst

Baustein	Wo
Arrays und Objekte	`aufgaben` ist ein Array von Objekten
`filter`, `find`, `push`	Aufgaben auswählen, suchen, hinzufügen
DOM erzeugen	`createElement`, `append`, `replaceChildren`
Events und Delegation	ein Klick-Listener für Checkbox und Löschen
Formular	`submit` mit `preventDefault`, `trim`, Validierung
JSON und `localStorage`	Speichern und sicheres Laden mit `try/catch`
Barrierefreiheit	`aria-label`, `aria-pressed`, `role="status"`, echte Buttons
Sicherheit	`textContent` statt `innerHTML`

Die Logik vom Rest trennen

Der Kern lässt sich ohne Browser testen. Trenne Daten und Darstellung:

Probier es selbst

Dein Code

Ergebnis

Ausgabe

[
  { id: 1, text: 'Milch kaufen', fertig: true },
  { id: 2, text: 'Kurs abschließen', fertig: false }
]
1 offen

Reine Funktionen wie diese kannst du mit node --test leicht prüfen.

Ideen zum Weiterbauen

Aufgaben per Doppelklick bearbeiten
Fälligkeitsdatum mit <input type="date"> und Sortierung
Drag and Drop zum Umsortieren (draggable, Ereignisse dragstart, drop)
Alle erledigten Aufgaben auf einmal löschen
Daten über fetch mit einem Server abgleichen
Dunkles Design über prefers-color-scheme
Tastaturkürzel (zum Beispiel / fokussiert das Eingabefeld)

Merke

Ein kleines Projekt verbindet Daten, Darstellung und Ereignisse
Zustand (Array) ändern, danach neu zeichnen: ein einfaches, robustes Muster
Event Delegation, textContent, try/catch beim Speichern und ARIA-Attribute gehören zur Grundausstattung
Trenne reine Logik von DOM-Code, damit du sie testen kannst

Aufgabe

Erweitere die App um eine Schaltfläche "Erledigte löschen" und einen Zähler der erledigten Aufgaben.

Die Anforderungen

Aufgaben hinzufügen (Enter oder Button)
Aufgaben abhaken und löschen
Filter: alle, offen, erledigt
Zähler der offenen Aufgaben
Daten bleiben nach dem Neuladen erhalten

Der komplette Code

Probier es selbst · todo.html

Dein Code

function sichtbar() {
    if (filter === "offen") return aufgaben.filter(a => !a.fertig);
    if (filter === "fertig") return aufgaben.filter(a => a.fertig);
    return aufgaben;
  }

const box = document.createElement("input");
      box.type = "checkbox";
      box.checked = a.fertig;
      box.setAttribute("aria-label", "Erledigt: " + a.text);

const text = document.createElement("span");
      text.textContent = a.text;                        // textContent: sicher gegen XSS

const weg = document.createElement("button");
      weg.textContent = "×";
      weg.setAttribute("aria-label", "Löschen: " + a.text);

zeichne();
</script>

Ergebnis

Was du hier wiedererkennst

Baustein	Wo
Arrays und Objekte	`aufgaben` ist ein Array von Objekten
`filter`, `find`, `push`	Aufgaben auswählen, suchen, hinzufügen
DOM erzeugen	`createElement`, `append`, `replaceChildren`
Events und Delegation	ein Klick-Listener für Checkbox und Löschen
Formular	`submit` mit `preventDefault`, `trim`, Validierung
JSON und `localStorage`	Speichern und sicheres Laden mit `try/catch`
Barrierefreiheit	`aria-label`, `aria-pressed`, `role="status"`, echte Buttons
Sicherheit	`textContent` statt `innerHTML`

Die Logik vom Rest trennen

Der Kern lässt sich ohne Browser testen. Trenne Daten und Darstellung:

Probier es selbst

Dein Code

Ergebnis

Ausgabe

[
  { id: 1, text: 'Milch kaufen', fertig: true },
  { id: 2, text: 'Kurs abschließen', fertig: false }
]
1 offen

Reine Funktionen wie diese kannst du mit node --test leicht prüfen.

Ideen zum Weiterbauen

Aufgaben per Doppelklick bearbeiten
Fälligkeitsdatum mit <input type="date"> und Sortierung
Drag and Drop zum Umsortieren (draggable, Ereignisse dragstart, drop)
Alle erledigten Aufgaben auf einmal löschen
Daten über fetch mit einem Server abgleichen
Dunkles Design über prefers-color-scheme
Tastaturkürzel (zum Beispiel / fokussiert das Eingabefeld)

Merke

Ein kleines Projekt verbindet Daten, Darstellung und Ereignisse
Zustand (Array) ändern, danach neu zeichnen: ein einfaches, robustes Muster
Event Delegation, textContent, try/catch beim Speichern und ARIA-Attribute gehören zur Grundausstattung
Trenne reine Logik von DOM-Code, damit du sie testen kannst

Aufgabe

Erweitere die App um eine Schaltfläche "Erledigte löschen" und einen Zähler der erledigten Aufgaben.