Master 08: Interaktive Task-App (MVC & Clean Architecture)

📂 Dateien dieser Einheit:

📄 aufgabe.js (Startercode) 🧪 test_aufgabe.js (Tests) 💡 musterloesung.js (Lösung) 🚀 app.js (Browser-App) 📖 README.md

1. 🏆 Dein Meisterstück: Das Master-Abschlussprojekt

Herzlichen Glückwunsch! Du hast moderne JavaScript-Grundlagen, funktionale Array-Transformationen und statische Typsicherheit mit TypeScript gemeistert.

In diesem Master-Abschlussprojekt vereinst du alle Konzepte in einer professionell strukturierten Aufgabenverwaltungs-App. Das Projekt folgt dem Model-View-Controller (MVC)-Muster, dem Industriestandard moderner Web-Architektur.

🌱 1. ES6+ & Arrays

Unveränderliche Arrays, Filterung mit .filter(), Suchen mit .find() / .findIndex() und Template Strings.

🛡️ 2. Type Safety & Interfaces

Definierte Datenstrukturen (TaskPriority, FilterStatus, TaskStatistics) und robuste Input-Validierung.

🚀 3. State & UI-Sync

Zentrales State Management in der Klasse TaskManager, Event-Delegation und 100% Unittest-Abdeckung!

2. 🏛️ Die Architektur: Model-View-Controller (MVC)

Strikte Trennung von Geschäftslogik und Anzeige verhindert schwer wartbaren Code („Spaghetti-Code“):

1. Das Model (State & Logik)

Klasse `TaskManager`

Verwaltet das interne tasks-Array, vergibt IDs, schaltet Status um, filtert nach Kriterien und berechnet Aggregat-Statistiken.

💡 100% Headless: Funktioniert komplett ohne DOM im Testrunner!

2. Die View (DOM-Renderer)

HTML-Widgets & Badges

Rendert Formular, Status-Karten (Zähler), Filter-Buttons, Suchleiste und Task-Karten mit Prioritätsfarben.

👀 Dumb View: Zeigt nur den aktuellen State an.

3. Der Controller (Event-Handler)

Klasse `TaskApp`

Lauscht auf Klicks, Tastatur-Eingaben und Form-Submits, delegiert Aktionen an den TaskManager und löst Neuzeichnungen aus.

🛡️ Sicher: Fängt Fehleingaben über Exceptions ab.

3. 🚀 Interaktive Live-Applikation

So sieht die fertige Anwendung aus – teste sie hier direkt interaktiv aus:

4. 🎯 Aufgaben & Checkliste

Öffne die Datei aufgabe.js und implementiere die TaskManager-Klasse:

TODO 1: addTask(title, priority, dueDate) – Validierung, ID-Vergabe (1, 2, ...), Default-Werte und Rückgabe des Tasks.

TODO 2: toggleTask(id) – Umschalten von task.completed (true <-> false) und Rückgabe oder null.

TODO 3: deleteTask(id) – Entfernen aus dem Array, Rückgabe true bei Erfolg, sonst false.

TODO 4: getFilteredTasks(filterStatus, searchQuery) – Filter nach 'all'/'active'/'completed' + Volltextsuche im Titel.

TODO 5: getStatistics() – Rückgabe von { total, active, completed, highPriorityCount }.

💻 In Web-IDE öffnen & Unittests starten →