📝 Todo-Liste
Ein interaktives Abschlussprojekt mit DOM, Events und Local Storage
🎯 1. Projektziel
Erstelle eine vollständig funktionierende Todo-Liste, die alle bisher gelernten JavaScript-Konzepte vereint: DOM-Manipulation, Events, Arrays, Objekte und Local Storage.
📚 2. W3Schools-Referenz
Für dieses Projekt sind folgende Themen besonders relevant:
🔗 DOM Manipulation
🔗 JavaScript Events
🔗 Local Storage
🔗 Arrays & Objekte
🧠 3. KI-Prompt-Hinweis
Nutze KI als Kooperationspartner – nicht als Code-Lieferant. Formuliere Prompts wie:
💡 Beispiel:
„Ich baue eine Todo-Liste mit Event-Delegation und Local Storage.
Wie vermeide ich XSS bei der Ausgabe von Benutzereingaben,
und wie strukturiere ich den DOM-Update-Mechanismus effizient?“
✅ 4. Funktionale Anforderungen
- Neue Todos hinzufügen – per Button oder Enter-Taste
- Als „erledigt“ markieren – durch Checkbox-Klick
- Todos löschen – mit Löschen-Button pro Todo
- Daten dauerhaft speichern – mit
localStorage - Sichere Ausgabe – kein ungesicherter
innerHTML
⚙️ 5. Technische Anforderungen
- Speichere Todos als Array von Objekten:
{ text: "...", erledigt: false } - Nutze Event-Delegation für dynamische Buttons
- Validiere Local Storage-Initialisierung (auch bei leerem Speicher)
- Erstelle eine responsive, barrierefreie Oberfläche
- Verwende textContent oder bereinigte Eingaben
🔧 6. Empfohlener Arbeitsablauf
- Erstelle die HTML-Struktur (Eingabefeld, Button, leere Liste)
- Implementiere das Hinzufügen von Todos (ohne Speicherung)
- Füge Markierung und Löschen hinzu
- Integriere
localStorage - Teste gründlich – auch nach Neuladen!
🎁 7. Bonus (optional)
- Statistik: „X von Y Todos erledigt“
- Bearbeitung per Doppelklick
- Filter: „Alle“, „Aktiv“, „Erledigt“