diff --git a/courses/javascript/03_objekte_und_destructuring/README.md b/courses/javascript/03_objekte_und_destructuring/README.md
new file mode 100644
index 0000000..53e9175
--- /dev/null
+++ b/courses/javascript/03_objekte_und_destructuring/README.md
@@ -0,0 +1,118 @@
+# JS 03: Objekte, Destructuring & Rest/Spread 📦
+
+Willkommen zu **Modul 03** des JavaScript-Kurses!
+
+Objekte sind der Herzschlag von JavaScript: Fast alles in JavaScript ist ein Objekt oder verhält sich wie eines. In diesem Modul lernst du, wie du strukturierte Daten erstellst, mit modernem **ES6-Destructuring** blitzschnell entpackst und Daten mit dem **Spread- & Rest-Operator (`...`)** elegant transformierst.
+
+---
+
+## 💡 1. Das Wichtigste in Kürze
+
+### A. Object Literals & Property Shorthand
+Ein Objekt speichert Daten als **Schlüssel-Wert-Paare** (*Key-Value Pairs*):
+
+```javascript
+// Klassische Deklaration
+const person = {
+ name: "Max",
+ alter: 25,
+ istEntwickler: true
+};
+
+// ES6 Property Shorthand (Wenn Variablenname und Key identisch sind)
+const name = "Anna";
+const email = "anna@example.com";
+const user = { name, email };
+// Entspricht: { name: name, email: email }
+```
+
+### B. Destructuring Assignment (Objekte & Arrays entpacken)
+Mit Destructuring kannst du Werte direkt aus Objekten oder Arrays extrahieren, ohne wiederholt `objekt.eigenschaft` schreiben zu müssen:
+
+```javascript
+const dev = { name: "Sarah", sprache: "JavaScript", erfahrung: 5 };
+
+// 🎯 Object Destructuring:
+const { name, sprache } = dev;
+console.log(name); // "Sarah"
+console.log(sprache); // "JavaScript"
+
+// 🎯 Alias (Umbennen) & Standardwerte (Default Values):
+const { alter = 18, name: vorname } = dev;
+console.log(alter); // 18 (Default-Wert, da 'alter' im Objekt fehlt)
+console.log(vorname); // "Sarah" (unter neuem Namen verfügbar)
+
+// 🎯 Array Destructuring:
+const farben = ["#ff0000", "#00ff00", "#0000ff"];
+const [rot, gruen] = farben;
+console.log(rot); // "#ff0000"
+```
+
+### C. Spread- & Rest-Operator (`...`)
+Die drei Punkte `...` haben je nach Kontext zwei mächtige Funktionen:
+
+1. **Spread-Operator (Ausbreiten / Zusammenfügen):**
+ Erzeugt eine flache Kopie (*Shallow Copy*) oder kombiniert mehrere Objekte/Arrays ohne Mutation:
+ ```javascript
+ const basisInfo = { name: "Tom", alter: 30 };
+ const kontakt = { email: "tom@web.de", stadt: "Berlin" };
+
+ // Neues Objekt mit allen Eigenschaften beider Objekte:
+ const vollstaendig = { ...basisInfo, ...kontakt, premium: true };
+ ```
+
+2. **Rest-Operator (Einsammeln des Rests):**
+ Sammelt verbleibende Eigenschaften in einem neuen Objekt/Array:
+ ```javascript
+ const { email, ...andereDaten } = vollstaendig;
+ console.log(email); // "tom@web.de"
+ console.log(andereDaten); // { name: "Tom", alter: 30, stadt: "Berlin", premium: true }
+ ```
+
+### D. Hilfsmethoden: `Object.keys()`, `Object.values()`, `Object.entries()`
+```javascript
+const auto = { marke: "Tesla", modell: "Model 3", baujahr: 2024 };
+
+console.log(Object.keys(auto)); // ["marke", "modell", "baujahr"]
+console.log(Object.values(auto)); // ["Tesla", "Model 3", 2024]
+console.log(Object.entries(auto)); // [["marke", "Tesla"], ["modell", "Model 3"], ["baujahr", 2024]]
+console.log(Object.keys(auto).length); // 3 (Anzahl der Eigenschaften)
+```
+
+---
+
+## 🧰 Die didaktische Analogie: "Die Werkzeugkiste & Auspack-Station"
+
+- **Das Objekt als Werkzeugkiste:**
+ Ein Objekt `{ hammer: "500g", saege: "Holz", bohrer: "Akku" }` ist wie eine strukturierte Werkzeugkiste mit beschrifteten Fächern.
+- **Destructuring als gezieltes Herausgreifen:**
+ Statt die ganze schwere Kiste an die Baustelle zu tragen (`werkzeugkiste.hammer`), greifst du mit `const { hammer, saege } = werkzeugkiste;` genau die Werkzeuge heraus, die du für die aktuelle Arbeit brauchst.
+- **Spread (`...`) als Zusammenlegen in eine neue Kiste:**
+ Mit `{ ...kiste1, ...kiste2, multimeter: "digital" }` schüttest du zwei Werkzeugkisten in eine neue, größere Kiste um und packst noch ein neues Werkzeug dazu – die ursprünglichen Kisten bleiben unberührt (*Immutability*)!
+
+---
+
+## 🎯 Aufgaben & Teilziele in `aufgabe.js`
+
+Öffne die Datei `aufgabe.js` und löse die 5 Teilziele:
+
+1. **TODO 1:** `erstelleBenutzer(name, email, rolle = "user")`
+ Erstelle und gib ein Objekt mit `{ name, email, rolle }` unter Verwendung des Property Shorthands zurück.
+
+2. **TODO 2:** `extrahiereDetails(benutzerObjekt)`
+ Extrahiere `name` und `email` mit Destructuring und gib den String `"${name} (${email})"` zurück.
+
+3. **TODO 3:** `fuegeAdresseHinzu(benutzerObjekt, adresseObjekt)`
+ Erzeuge mit Spread (`...`) ein neues, zusammengeführtes Objekt `{ ...benutzerObjekt, ...adresseObjekt }`, ohne `benutzerObjekt` zu verändern.
+
+4. **TODO 4:** `zaehleEigenschaften(objekt)`
+ Ermittle die Anzahl der Eigenschaften eines Objekts mit `Object.keys(objekt).length`.
+
+5. **TODO 5:** `berechneWarenkorbGesamtwert(warenkorbItems)`
+ Berechne die Summe aus `preis * anzahl` für alle Items im Array. Nutze Destructuring (`const { preis, anzahl = 1 }`) im Schleifendurchlauf oder in `.reduce()`.
+
+---
+
+## 🧪 Tests ausführen
+
+Führe den Test in der interaktiven Web-IDE oder im Runner aus. Deine Lösung ist perfekt, wenn alle Tests erfolgreich durchlaufen!
diff --git a/courses/javascript/03_objekte_und_destructuring/aufgabe.js b/courses/javascript/03_objekte_und_destructuring/aufgabe.js
new file mode 100644
index 0000000..d77196a
--- /dev/null
+++ b/courses/javascript/03_objekte_und_destructuring/aufgabe.js
@@ -0,0 +1,46 @@
+/**
+ * 🌐 JS 03: OBJEKTE, DESTRUCTURING & REST/SPREAD 🌐
+ * ==================================================
+ * Strukturierte Daten & moderne ES6-Operatoren in JavaScript.
+ */
+
+// 🎯 TEILZIEL 1 (TODO 1): erstelleBenutzer(name, email, rolle = "user")
+// Erstelle ein Benutzerobjekt mit Property Shorthand und Default-Parameter.
+// Rückgabe: Ein Objekt mit { name, email, rolle }
+function erstelleBenutzer(name, email, rolle = "user") {
+ // TODO: Nutze ES6 Property Shorthand { name, email, rolle }
+ return null;
+}
+
+// 🎯 TEILZIEL 2 (TODO 2): extrahiereDetails(benutzerObjekt)
+// Extrahiere 'name' und 'email' mittels Object Destructuring: const { name, email } = benutzerObjekt;
+// Rückgabe: Formatierter String im Format: `${name} (${email})`
+function extrahiereDetails(benutzerObjekt) {
+ // TODO: Destructuring anwenden und String im Format "Name (email@domain.de)" zurückgeben
+ return "";
+}
+
+// 🎯 TEILZIEL 3 (TODO 3): fuegeAdresseHinzu(benutzerObjekt, adresseObjekt)
+// Kombiniere Benutzer und Adresse zu einem NEUEN Objekt mittels Spread-Operator: { ...benutzerObjekt, ...adresseObjekt }
+// Wichtig: Das Originalobjekt benutzerObjekt darf NICHT verändert werden (Immutability).
+function fuegeAdresseHinzu(benutzerObjekt, adresseObjekt) {
+ // TODO: Neues Objekt mit Object Spread { ...benutzerObjekt, ...adresseObjekt } erstellen
+ return null;
+}
+
+// 🎯 TEILZIEL 4 (TODO 4): zaehleEigenschaften(objekt)
+// Zähle die Anzahl der eigenen Schlüssel/Eigenschaften eines Objekts mit Object.keys(objekt).length.
+// Bei leeren oder ungültigen Objekten soll 0 zurückgegeben werden.
+function zaehleEigenschaften(objekt) {
+ // TODO: Object.keys() nutzen und Anzahl der Keys zurückgeben
+ return 0;
+}
+
+// 🎯 TEILZIEL 5 (TODO 5): berechneWarenkorbGesamtwert(warenkorbItems)
+// Berechne die Summe aller (preis * anzahl) im Array warenkorbItems.
+// Nutze Destructuring im Loop oder in reduce: for (const { preis, anzahl = 1 } of warenkorbItems)
+// Bei leerem Warenkorb [] soll 0 zurückgegeben werden.
+function berechneWarenkorbGesamtwert(warenkorbItems) {
+ // TODO: Destructuring im Schleifendurchlauf oder reduce nutzen
+ return 0;
+}
diff --git a/courses/javascript/03_objekte_und_destructuring/index.html b/courses/javascript/03_objekte_und_destructuring/index.html
new file mode 100644
index 0000000..5f8f705
--- /dev/null
+++ b/courses/javascript/03_objekte_und_destructuring/index.html
@@ -0,0 +1,171 @@
+
+
+
+
+
+ JS 03: Objekte, Destructuring & Rest/Spread
+
+
+
+
+
+
+
+
🌐 JavaScript Grundlagen
+
JS 03: Objekte, Destructuring & Rest/Spread
+
Lerne strukturierte Datenmodellierung mit Object Literals, ES6-Destructuring und dem Rest/Spread-Operator.
+
+
+
+
+
+
+
💡 1. Object Literals & Property Shorthand
+
Objekte speichern zusammengehörige Informationen als Schlüssel-Wert-Paare. Modernes JavaScript (ES6) bietet mit dem Property Shorthand eine extrem prägnante Syntax, wenn Variablen- und Eigenschaftsname übereinstimmen:
🧰 Didaktische Analogie: Die Werkzeugkiste & Auspack-Station
+
Ein Objekt ist wie eine beschriftete Werkzeugkiste. Destructuring ist das gezielte Herausgreifen von genau dem Werkzeug (z. B. Hammer und Zange), das du jetzt benötigst, ohne die ganze Kiste herumtragen zu müssen. Der Spread-Operator (...) ist wie das Umschütten zweier Kisten in einen neuen Koffer, ohne den Originalinhalt zu beschädigen.
+
+
+
+
+
+
📑 4. Cheat-Sheet: Object & Destructuring Methoden
+
+
+
+
+
Syntax / Methode
+
Beispiel
+
Beschreibung
+
+
+
+
+
{ a, b }
+
const obj = { name, email };
+
Property Shorthand
+
+
+
const { k } = obj
+
const { name, rolle = "user" } = u;
+
Object Destructuring mit Default-Wert
+
+
+
{ ...obj, neu }
+
const klon = { ...original, id: 42 };
+
Spread-Operator zum Klonen & Erweitern
+
+
+
Object.keys(obj)
+
Object.keys({ a: 1, b: 2 }) // ["a", "b"]
+
Array aller Eigenschaftsnamen (Keys)
+
+
+
Object.values(obj)
+
Object.values({ a: 1, b: 2 }) // [1, 2]
+
Array aller Werte (Values)
+
+
+
Object.entries(obj)
+
Object.entries({ a: 1 }) // [["a", 1]]
+
Array aus [key, value]-Paaren
+
+
+
+
+
+
+
+
+
🎯 Aufgaben & Checkliste in aufgabe.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💡 Tipp für Teilziel 5
+
Du kannst Destructuring direkt in der Funktionssignatur von reduce oder im Schleifenkopf nutzen:
+ items.reduce((sum, { preis = 0, anzahl = 1 }) => sum + (preis * anzahl), 0)
🎼 Didaktische Analogie: Der Dirigent des Web-Orchesters
+
HTML ist die Partitur, der Browser das Orchester und dein JavaScript-Code der Dirigent: Selektoren sind der gezielte Blick zu den Instrumentengruppen, DOM-Manipulation ist die Taktstockbewegung für Lautstärke oder Klang, und Event-Listener sind das aufmerksame Lauschen auf den richtigen Takt und Applaus.
+
+
+
+
+
+
📑 4. Cheat-Sheet: DOM-Methoden & Events
+
+
+
+
+
Methode / Eigenschaft
+
Beispiel
+
Wirkung
+
+
+
+
+
document.querySelector(sel)
+
document.querySelector(".btn")
+
Findet das erste passende Element
+
+
+
document.querySelectorAll(sel)
+
document.querySelectorAll("li")
+
Findet alle passenden Elemente
+
+
+
document.createElement(tag)
+
const btn = document.createElement("button")
+
Erstellt ein neues Element im Speicher
+
+
+
element.textContent
+
el.textContent = "Hallo Welt"
+
Liest oder setzt reinen Text
+
+
+
element.classList.add/remove/contains
+
el.classList.contains("aktiv")
+
Manipuliert und prüft CSS-Klassen
+
+
+
element.addEventListener(ev, fn)
+
el.addEventListener("click", () => ...)
+
Registriert Callback bei Ereignis
+
+
+
+
+
+
+
+
+
🎯 Aufgaben & Checkliste in aufgabe.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💡 Architektur-Tipp: Headless-UI & Unittests
+
Indem du DOM-Helfer und Zustandslogik in modulare Funktionen aufteilst, kann dein Code sowohl im Webbrowser als auch in isolierten Testumgebungen (wie Web-Workern und CI-Pipelines) zuverlässig getestet werden.
Element zurückgeben");
+assert.strictEqual(liOffen.textContent, "Milch kaufen", "Listeneintrag-Text sollte 'Milch kaufen' sein");
+assert.strictEqual(liOffen.classList.contains("erledigt"), false, "Unerledigter Eintrag darf nicht die Klasse 'erledigt' haben");
+
+const liErledigt = erstelleListenEintrag("Post abholen", true);
+assert.strictEqual(liErledigt.textContent, "Post abholen", "Erledigter Eintrag Text sollte stimmen");
+assert.strictEqual(liErledigt.classList.contains("erledigt"), true, "Erledigter Eintrag muss die Klasse 'erledigt' besitzen");
+
+// Test 3: filtereElementeNachKlasse
+const el1 = document.createElement("div");
+el1.classList.add("aktiv");
+const el2 = document.createElement("div");
+el2.classList.add("inaktiv");
+const el3 = document.createElement("div");
+el3.classList.add("aktiv");
+el3.classList.add("hervorgehoben");
+
+const gefiltertAktiv = filtereElementeNachKlasse([el1, el2, el3], "aktiv");
+assert.strictEqual(gefiltertAktiv.length, 2, "filtereElementeNachKlasse() sollte 2 aktive Elemente finden");
+assert.strictEqual(gefiltertAktiv[0], el1, "Erstes gefiltertes Element sollte el1 sein");
+assert.strictEqual(gefiltertAktiv[1], el3, "Zweites gefiltertes Element sollte el3 sein");
+
+const gefiltertHervorgehoben = filtereElementeNachKlasse([el1, el2, el3], "hervorgehoben");
+assert.strictEqual(gefiltertHervorgehoben.length, 1, "Sollte 1 hervorgehobenes Element finden");
+
+// Test 4: aktualisiereZaehlerAnzeige
+const statusNormal = aktualisiereZaehlerAnzeige(5, 10);
+assert.deepStrictEqual(
+ statusNormal,
+ { text: "Zähler: 5 / 10", wert: 5, istKritisch: false, statusKlasse: "status-normal" },
+ "aktualisiereZaehlerAnzeige(5, 10) sollte Normalstatus liefern"
+);
+
+const statusKritisch = aktualisiereZaehlerAnzeige(10, 10);
+assert.deepStrictEqual(
+ statusKritisch,
+ { text: "Zähler: 10 / 10", wert: 10, istKritisch: true, statusKlasse: "status-kritisch" },
+ "aktualisiereZaehlerAnzeige(10, 10) bei Erreichen des Schwellenwerts sollte kritisch sein"
+);
+
+const statusUeberlimit = aktualisiereZaehlerAnzeige(15, 10);
+assert.strictEqual(statusUeberlimit.istKritisch, true, "Überlimit sollte istKritisch=true haben");
+assert.strictEqual(statusUeberlimit.statusKlasse, "status-kritisch", "Überlimit sollte 'status-kritisch' haben");
+
+const statusDefault = aktualisiereZaehlerAnzeige(3);
+assert.strictEqual(statusDefault.text, "Zähler: 3 / 10", "Standard-Schwellenwert sollte 10 sein");
+
+console.log("✅ Alle 14 Tests in JS 04 erfolgreich bestanden!");
diff --git a/courses/javascript/05_callbacks_und_promises/README.md b/courses/javascript/05_callbacks_und_promises/README.md
new file mode 100644
index 0000000..078c53b
--- /dev/null
+++ b/courses/javascript/05_callbacks_und_promises/README.md
@@ -0,0 +1,131 @@
+# 🌐 JS 05: Callbacks, Event Loop & Promises
+
+Willkommen zu **Modul 05** des JavaScript-Kurses! In diesem Kapitel lernst du das Herzstück der modernen Web-Entwicklung kennen: **Asynchrone Programmierung mit Promises**.
+
+---
+
+## 📖 1. Synchron vs. Asynchron & Der Event Loop
+
+JavaScript führt Code in einer einzigen Hauptausführungsschleife aus (**Single-Threaded**).
+
+- **Synchrone Ausführung (Blockierend):** Jede Codezeile wird nacheinander ausgeführt. Dauert eine Operation lange (z. B. ein schwerer Rechenschritt oder ein synchrones Warten), friert das gesamte Programm (und die Webseite!) ein.
+- **Asynchrone Ausführung (Nicht-blockierend):** Zeitintensive Aufgaben (z. B. Netzwerk-Anfragen, Timer oder Dateizugriffe) werden im Hintergrund angestoßen. JavaScript läuft währenddessen sofort weiter. Sobald das Ergebnis vorliegt, wird ein Callback in die Warteschlange gelegt und vom **Event Loop** abgearbeitet.
+
+```javascript
+console.log("1. Bestellung aufgeben");
+
+setTimeout(() => {
+ console.log("3. Essen ist fertig!"); // Asynchroner Callback nach 1000ms
+}, 1000);
+
+console.log("2. An den Tisch setzen und plaudern");
+// Ausgabe-Reihenfolge: 1 -> 2 -> 3
+```
+
+---
+
+## 🍔 2. Die Restaurant-Pieper-Analogie
+
+Stell dir vor, du bestellst Burger in einem Selbstbedienungs-Restaurant:
+
+1. **Bestellung:** Du gehst an die Kasse und bestellst dein Menü.
+2. **Der Pieper (`Promise` im Zustand `pending`):** Die Bedienung gibt dir sofort einen elektronischen Pieper in die Hand. Du musst *nicht* stur am Tresen stehen bleiben und die Schlange blockieren.
+3. **Nicht-blockierendes Warten:** Du setzt dich an deinen Tisch, surfst am Smartphone oder unterhältst dich mit Freunden (JavaScript Event Loop verarbeitet andere Ereignisse).
+4. **Erfolg (`resolve` -> `fulfilled`):** Der Pieper vibriert und leuchtet grün! Du holst dein frisches Essen ab (`.then(essen => ...)`).
+5. **Fehler (`reject` -> `rejected`):** Der Pieper piept rot und die Bedienung ruft: *"Die Burger-Patties sind leider aus!"* (`.catch(fehler => ...)`).
+
+---
+
+## ⏳ 3. Was ist ein Promise?
+
+Ein **Promise** (deutsch: *Versprechen*) ist ein Objekt, das einen Wert repräsentiert, der jetzt, in der Zukunft oder nie verfügbar ist.
+
+### Die 3 Zustände eines Promise:
+```
+ ┌───> fulfilled (erfolgreich gelöst) ──> .then(wert)
+ pending ──────┤
+ (schwebend) └───> rejected (fehlgeschlagen) ──> .catch(fehler)
+```
+
+1. **`pending` (schwebend):** Die asynchrone Operation läuft noch. Weder Erfolg noch Fehler.
+2. **`fulfilled` (erfüllt):** Die Operation war erfolgreich, `resolve(wert)` wurde aufgerufen.
+3. **`rejected` (abgewiesen):** Ein Fehler ist aufgetreten, `reject(error)` wurde aufgerufen.
+
+---
+
+## 🛠️ 4. Eigene Promises erstellen
+
+Ein Promise wird mit dem Konstruktor `new Promise(executor)` erzeugt. Die Executor-Funktion erhält zwei Parameter: `resolve` und `reject`.
+
+```javascript
+function simuliereDatenAbruf(erfolgreich) {
+ return new Promise((resolve, reject) => {
+ setTimeout(() => {
+ if (erfolgreich) {
+ resolve({ id: 1, name: "Max Mustermann" });
+ } else {
+ reject(new Error("Netzwerk-Timeout beim Laden!"));
+ }
+ }, 500);
+ });
+}
+```
+
+---
+
+## 🔗 5. Promise-Chaining: `.then()`, `.catch()`, `.finally()`
+
+Promises ermöglichen sauberes Verketten ohne verschachtelte Callback-Pyramiden (*Callback Hell*):
+
+```javascript
+simuliereDatenAbruf(true)
+ .then((daten) => {
+ console.log("Erhaltene Daten:", daten.name);
+ return daten.id; // Rückgabewert wird als nächstes Promise weitergegeben
+ })
+ .then((userId) => {
+ console.log("Lade Details für ID:", userId);
+ })
+ .catch((err) => {
+ console.error("Ein Fehler ist aufgetreten:", err.message);
+ })
+ .finally(() => {
+ console.log("Lade-Indikator ausblenden (wird immer ausgeführt)");
+ });
+```
+
+---
+
+## ⚡ 6. Parallele Ausführung mit `Promise.all()` und `Promise.race()`
+
+### `Promise.all([p1, p2, ...])`
+Führt mehrere Promises parallel aus und wartet, bis **alle** erfolgreich aufgelöst wurden.
+- Gibt ein Array mit allen Einzelergebnissen `[res1, res2, ...]` zurück.
+- **Fail-Fast:** Bricht sofort ab, sobald *auch nur ein einzelnes* Promise rejected!
+
+```javascript
+const p1 = fetchUser();
+const p2 = fetchPosts();
+
+Promise.all([p1, p2])
+ .then(([user, posts]) => {
+ console.log("User & Posts gleichzeitig geladen:", user, posts);
+ })
+ .catch(err => console.error("Mindestens eine Quelle schlug fehl:", err));
+```
+
+### `Promise.race([p1, p2, ...])`
+Liefert das Ergebnis des **allerschnellsten** Promise (egal ob `resolve` oder `reject`). Ideal z. B. für Timeouts.
+
+---
+
+## 🎯 7. Deine Aufgaben in `aufgabe.js`
+
+1. **`verzoegereAusfuehrung(ms, rueckgabeWert)`**:
+ Erzeuge ein Promise, das nach `ms` Millisekunden mittels `setTimeout` den `rueckgabeWert` auflöst.
+2. **`pruefeZahlGroesserNull(zahl)`**:
+ Prüfe die Zahl: Resolve bei `zahl > 0`, Reject mit `new Error("Zahl muss größer als 0 sein")` bei `<= 0`.
+3. **`ladeBenutzerProfil(userId)`**:
+ Asynchrones Profil-Laden: Resolve mit `{ id: userId, name: "Benutzer_" + userId, status: "aktiv" }` bei `userId > 0`, sonst Reject mit `new Error("Ungültige User-ID")`.
+4. **`ladeAlleDatenQuellen(quelleA, quelleB)`**:
+ Nutze `Promise.all([quelleA, quelleB])`, um zwei asynchrone Datenströme parallel zu aggregieren.
diff --git a/courses/javascript/05_callbacks_und_promises/aufgabe.js b/courses/javascript/05_callbacks_und_promises/aufgabe.js
new file mode 100644
index 0000000..a35e2a8
--- /dev/null
+++ b/courses/javascript/05_callbacks_und_promises/aufgabe.js
@@ -0,0 +1,44 @@
+/**
+ * 🌐 JS 05: CALLBACKS, EVENT LOOP & PROMISES 🌐
+ * =============================================
+ * Lerne die Grundlagen der asynchronen Programmierung in JavaScript:
+ * Callbacks, der Event Loop und Promises für nicht-blockierenden Code.
+ */
+
+// 🎯 TEILZIEL 1 (TODO 1): Schreibe verzoegereAusfuehrung(ms, rueckgabeWert)
+// Gibt ein neues Promise zurück, das nach `ms` Millisekunden mit `rueckgabeWert` aufgelöst (resolved) wird.
+// Nutze dafür setTimeout(callback, ms).
+function verzoegereAusfuehrung(ms, rueckgabeWert) {
+ // TODO: Gib ein new Promise((resolve) => ...) zurück
+ return null;
+}
+
+// 🎯 TEILZIEL 2 (TODO 2): Schreibe pruefeZahlGroesserNull(zahl)
+// Gibt ein Promise zurück:
+// - Wenn zahl > 0: resolve mit zahl
+// - Wenn zahl <= 0 oder keine Zahl: reject mit einem Error("Zahl muss größer als 0 sein")
+function pruefeZahlGroesserNull(zahl) {
+ // TODO: Gib ein Promise zurück, das resolve() oder reject() aufruft
+ return null;
+}
+
+// 🎯 TEILZIEL 3 (TODO 3): Schreibe ladeBenutzerProfil(userId)
+// Simuliert das asynchrone Laden eines Benutzerprofils:
+// - Wenn userId ein positiver Wert (> 0) ist:
+// Gibt ein Promise zurück, das nach kurzer Zeit (z.B. 10ms) ein Objekt auflöst:
+// { id: userId, name: `Benutzer_${userId}`, status: "aktiv" }
+// - Wenn userId <= 0 oder ungültig:
+// Gibt ein abgewiesenes Promise (reject) mit Error("Ungültige User-ID") zurück.
+function ladeBenutzerProfil(userId) {
+ // TODO: Implementiere ladeBenutzerProfil mit Promise
+ return null;
+}
+
+// 🎯 TEILZIEL 4 (TODO 4): Schreibe ladeAlleDatenQuellen(quelleA, quelleB)
+// Nimmt zwei Promises quelleA und quelleB entgegen und nutzt Promise.all([...]),
+// um beide Datenquellen parallel abzuwarten.
+// Gibt das Promise von Promise.all zurück, das ein Array [ergebnisA, ergebnisB] liefert.
+function ladeAlleDatenQuellen(quelleA, quelleB) {
+ // TODO: Nutze Promise.all([quelleA, quelleB])
+ return null;
+}
diff --git a/courses/javascript/05_callbacks_und_promises/index.html b/courses/javascript/05_callbacks_und_promises/index.html
new file mode 100644
index 0000000..075b145
--- /dev/null
+++ b/courses/javascript/05_callbacks_und_promises/index.html
@@ -0,0 +1,203 @@
+
+
+
+
+
+ JS 05: Callbacks, Event Loop & Promises
+
+
+
+
+
+
+
+
+
🌐 JavaScript Asynchronität
+
JS 05: Callbacks, Event Loop & Promises
+
Meistere nicht-blockierenden Code, den Event Loop und moderne Promises für robuste Web-Anwendungen.
+
+
+
+
+
+
+
⚡ 1. Synchron vs. Asynchron & Event Loop
+
+ JavaScript ist Single-Threaded. Wenn eine Aufgabe Zeit benötigt (z. B. Timer, Netzwerk-Aufrufe, Dateilesen), darf sie den Hauptthread nicht blockieren.
+
+
+ Der Event Loop sorgt dafür, dass asynchrone Callbacks in einer Warteschlange verwaltet und erst ausgeführt werden, wenn der Haupt-Callstack frei ist.
+
+
+
+
🍔 Die Restaurant-Pieper-Analogie
+
+ Bestellst du in einem Restaurant dein Essen, musst du nicht starr an der Kasse stehen bleiben. Du erhältst sofort einen Bestell-Pieper (ein Promise im Zustand pending). Du setzt dich entspannt an deinen Tisch (der Event Loop verarbeitet andere Dinge).
+
+
+ Ist dein Menü fertig, vibriert der Pieper (resolve → fulfilled). Brennt die Küche, blinkt er rot (reject → rejected).
+
+
+
+
+
+
+
📊 2. Das Promise-Zustandsdiagramm
+
+ Ein Promise ist ein Stellvertreter-Objekt für einen zukünftigen Wert. Es befindet sich immer in genau einem von drei Zuständen:
+
+
+
+
+ ⏳ pending
+ (wartend / schwebend)
+
+
+
+ →
+ resolve(wert)
+ →
+
+ ✅ fulfilled
+ .then(wert => ...)
+
+
+
+ →
+ reject(error)
+ →
+
+ ❌ rejected
+ .catch(err => ...)
+
+
+
+
+
+
+
+
+
🛠️ 3. Eigene Promises & Chaining
+
Ein Promise wird mit new Promise((resolve, reject) => { ... }) erzeugt:
// Lädt quelleA und quelleB parallel und wartet auf beide
+Promise.all([quelleA, quelleB])
+ .then(([resA, resB]) => console.log("Beide fertig:", resA, resB))
+ .catch(err => console.error("Mindestens eine Quelle schlug fehl:", err));
+
+
+
+
+
🎯 Aufgaben & Checkliste
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 💡 Lösungstipps & Hilfestellung
+
+
Nutze return new Promise((resolve, reject) => { ... });.
+
Innerhalb des Executors rufst du resolve(wert) bei Erfolg oder reject(new Error("...")) bei Fehlern auf.
+
Promise.all nimmt ein Array entgegen: Promise.all([quelleA, quelleB]).
+
+
diff --git a/courses/javascript/05_callbacks_und_promises/musterloesung.js b/courses/javascript/05_callbacks_und_promises/musterloesung.js
new file mode 100644
index 0000000..91dfc9e
--- /dev/null
+++ b/courses/javascript/05_callbacks_und_promises/musterloesung.js
@@ -0,0 +1,42 @@
+/**
+ * 🌐 JS 05: MUSTERLÖSUNG – CALLBACKS & PROMISES 🌐
+ * ===============================================
+ */
+
+function verzoegereAusfuehrung(ms, rueckgabeWert) {
+ return new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(rueckgabeWert);
+ }, ms);
+ });
+}
+
+function pruefeZahlGroesserNull(zahl) {
+ return new Promise((resolve, reject) => {
+ if (typeof zahl === "number" && zahl > 0) {
+ resolve(zahl);
+ } else {
+ reject(new Error("Zahl muss größer als 0 sein"));
+ }
+ });
+}
+
+function ladeBenutzerProfil(userId) {
+ return new Promise((resolve, reject) => {
+ if (typeof userId === "number" && userId > 0) {
+ setTimeout(() => {
+ resolve({
+ id: userId,
+ name: `Benutzer_${userId}`,
+ status: "aktiv"
+ });
+ }, 10);
+ } else {
+ reject(new Error("Ungültige User-ID"));
+ }
+ });
+}
+
+function ladeAlleDatenQuellen(quelleA, quelleB) {
+ return Promise.all([quelleA, quelleB]);
+}
diff --git a/courses/javascript/05_callbacks_und_promises/test_aufgabe.js b/courses/javascript/05_callbacks_und_promises/test_aufgabe.js
new file mode 100644
index 0000000..9c8c3b3
--- /dev/null
+++ b/courses/javascript/05_callbacks_und_promises/test_aufgabe.js
@@ -0,0 +1,78 @@
+// Hilfsfunktion zur Rejection-Prüfung
+async function pruefeReject(promise, expectedMsg, beschreibung) {
+ let threw = false;
+ let caughtErr = null;
+ try {
+ await promise;
+ } catch (err) {
+ threw = true;
+ caughtErr = err;
+ if (expectedMsg && !String(err && (err.message || err)).includes(expectedMsg)) {
+ throw new Error(`${beschreibung}: Erwartete Fehlermeldung "${expectedMsg}", aber erhalten: "${err ? err.message : err}"`);
+ }
+ }
+ if (!threw) {
+ throw new Error(`${beschreibung}: Promise sollte abgewiesen werden (reject), wurde aber erfolgreich aufgelöst.`);
+ }
+}
+
+// 1. Test: verzoegereAusfuehrung
+const erg1 = await verzoegereAusfuehrung(20, "Erfolg 20ms");
+assert.strictEqual(erg1, "Erfolg 20ms", "verzoegereAusfuehrung liefert falschen Wert nach Ablauf des Timers");
+
+// 2. Test: pruefeZahlGroesserNull bei positiver Zahl
+const erg2 = await pruefeZahlGroesserNull(42);
+assert.strictEqual(erg2, 42, "pruefeZahlGroesserNull(42) sollte mit 42 resolven");
+
+// 3. Test: pruefeZahlGroesserNull bei 0 und negativer Zahl
+await pruefeReject(
+ pruefeZahlGroesserNull(-5),
+ "Zahl muss größer als 0 sein",
+ "pruefeZahlGroesserNull(-5)"
+);
+await pruefeReject(
+ pruefeZahlGroesserNull(0),
+ "Zahl muss größer als 0 sein",
+ "pruefeZahlGroesserNull(0)"
+);
+
+// 4. Test: ladeBenutzerProfil mit gültiger ID
+const profil = await ladeBenutzerProfil(101);
+assert.deepStrictEqual(
+ profil,
+ { id: 101, name: "Benutzer_101", status: "aktiv" },
+ "ladeBenutzerProfil(101) liefert falsches Profil-Objekt"
+);
+
+// 5. Test: ladeBenutzerProfil mit ungültiger ID
+await pruefeReject(
+ ladeBenutzerProfil(0),
+ "Ungültige User-ID",
+ "ladeBenutzerProfil(0)"
+);
+await pruefeReject(
+ ladeBenutzerProfil(-10),
+ "Ungültige User-ID",
+ "ladeBenutzerProfil(-10)"
+);
+
+// 6. Test: ladeAlleDatenQuellen mit zwei erfolgreichen Promises (Promise.all)
+const pA = verzoegereAusfuehrung(15, "Sensordaten Alpha");
+const pB = verzoegereAusfuehrung(10, "Sensordaten Beta");
+const alleQuellen = await ladeAlleDatenQuellen(pA, pB);
+assert.deepStrictEqual(
+ alleQuellen,
+ ["Sensordaten Alpha", "Sensordaten Beta"],
+ "ladeAlleDatenQuellen sollte alle Ergebnisse im Array zusammenfassen"
+);
+
+// 7. Test: ladeAlleDatenQuellen mit einem abgewiesenen Promise
+const pGut = verzoegereAusfuehrung(10, "Gute Daten");
+const pSchlecht = pruefeZahlGroesserNull(-100);
+await pruefeReject(
+ ladeAlleDatenQuellen(pGut, pSchlecht),
+ "Zahl muss größer als 0 sein",
+ "ladeAlleDatenQuellen mit abgewiesenem Promise"
+);
+
+console.log("✅ Alle 7 Asynchronitäts- und Promise-Tests in JS 05 erfolgreich bestanden!");
diff --git a/courses/javascript/06_async_await_und_fetch/README.md b/courses/javascript/06_async_await_und_fetch/README.md
new file mode 100644
index 0000000..726ef46
--- /dev/null
+++ b/courses/javascript/06_async_await_und_fetch/README.md
@@ -0,0 +1,142 @@
+# 🌐 JS 06: Async/Await & REST APIs (Fetch)
+
+Willkommen zu **Modul 06** des JavaScript-Kurses! Hier lernst du die modernste und eleganteste Art kennen, um mit asynchronen Daten und Web-APIs in JavaScript zu arbeiten: **`async` und `await`**.
+
+---
+
+## 📖 1. Was ist `async` / `await`?
+
+Mit ECMAScript 2017 (ES8) wurde `async/await` eingeführt. Es ist sogenannte *syntaktische Versüßung* (Syntactic Sugar) über JavaScript Promises:
+- Asynchroner Code sieht plötzlich aus und verhält sich wie **linearer, synchroner Code**.
+- Keine unübersichtlichen `.then()`-Ketten mehr.
+- Fehler werden mit gewohntem `try { ... } catch (err) { ... }` abgefangen.
+
+---
+
+## 📚 2. Die Buch-Lese-Analogie
+
+Stell dir vor, wie du ein Buch liest:
+
+- **Mit Callbacks & Chaining (`.then()`):** Es ist wie ein Buch, bei dem jedes Kapitel auf Seite 80 verweist (*„Wenn du wissen willst, wie es weitergeht, lies Fußnote 4 auf Seite 80 und springe dann zu Kapitel 7“*). Du springst ständig hin und her.
+- **Mit `async/await`:** Du liest die Geschichte ganz natürlich **Zeile für Zeile von oben nach unten**. Wenn an einer Stelle ein Briefbote eintrifft (asynchrones Laden via `await`), pausiert der Erzähler kurz, nimmt den Brief entgegen und liest nahtlos im Text weiter.
+
+---
+
+## ⚙️ 3. Die `async`-Funktion
+
+Wird das Schlüsselwort `async` vor eine Funktion gesetzt:
+1. Gibt die Funktion **immer** ein `Promise` zurück.
+2. Jeder `return`-Wert wird automatisch in ein aufgelöstes Promise (`Promise.resolve(...)`) eingepackt.
+3. Jeder nicht abgefangene Fehler (`throw new Error(...)`) wird zu einem abgewiesenen Promise (`Promise.reject(...)`).
+
+```javascript
+async function holeBegruessung(name) {
+ return `Hallo ${name}!`; // Gibt Promise { : "Hallo Anna!" } zurück
+}
+
+holeBegruessung("Anna").then(text => console.log(text));
+```
+
+---
+
+## ⏳ 4. Der `await`-Operator
+
+`await` kann nur innerhalb von `async`-Funktionen verwendet werden. Es pausiert die Ausführung der aktuellen Funktion, bis das Promise aufgelöst oder abgewiesen wurde:
+
+```javascript
+async function ladeBenutzer() {
+ console.log("Starte Abruf...");
+
+ // Pausiert die Funktion 'ladeBenutzer', aber blockiert NICHT den Browser-Thread!
+ const benutzer = await apiCall("/user/1");
+
+ console.log("Fertig:", benutzer.name);
+ return benutzer;
+}
+```
+
+---
+
+## ⚖️ 5. Direktvergleich: Promises vs. Async/Await
+
+### Vorher: Promise-Chaining (`.then()`)
+```javascript
+function holeDatenMitThen() {
+ return fetch("https://api.beispiel.de/daten")
+ .then(response => {
+ if (!response.ok) throw new Error("Netzwerkfehler");
+ return response.json();
+ })
+ .then(daten => {
+ console.log("Ergebnis:", daten);
+ return daten;
+ })
+ .catch(err => {
+ console.error("Fehler:", err.message);
+ });
+}
+```
+
+### Jetzt: Modernes `async/await`
+```javascript
+async function holeDatenMitAsync() {
+ try {
+ const response = await fetch("https://api.beispiel.de/daten");
+ if (!response.ok) throw new Error(`HTTP-Fehler: ${response.status}`);
+
+ const daten = await response.json();
+ console.log("Ergebnis:", daten);
+ return daten;
+ } catch (err) {
+ console.error("Fehler:", err.message);
+ }
+}
+```
+
+---
+
+## 🌐 6. REST-APIs abfragen mit `fetch()`
+
+Beim Abfragen einer REST-API mit `fetch()` laufen in der Praxis zwei asynchrone Schritte ab:
+
+1. **HTTP-Verbindung aufbauen & Statuscode prüfen:**
+ ```javascript
+ const response = await fetch(url);
+ if (!response.ok) {
+ // response.status enthält den HTTP-Code (z. B. 404 Not Found oder 500 Server Error)
+ throw new Error(`Fehler: ${response.status}`);
+ }
+ ```
+2. **JSON-Body asynchron parsen:**
+ ```javascript
+ const jsonData = await response.json();
+ ```
+
+---
+
+## 🛡️ 7. Robuste Fehlerbehandlung mit `try ... catch`
+
+Mit `try ... catch` können sowohl synchrone JavaScript-Laufzeitfehler als auch asynchrone Promise-Rejections an zentraler Stelle abgefangen werden:
+
+```javascript
+async function sichereAktion() {
+ try {
+ const erg = await riskanteOperation();
+ return erg;
+ } catch (err) {
+ console.warn("Operation fehlgeschlagen, verwende Fallback:", err.message);
+ return { status: "fallback_aktiv" };
+ }
+}
+```
+
+---
+
+## 🎯 8. Deine Aufgaben in `aufgabe.js`
+
+1. **`holeWetterDaten(stadtName, mockApiFetcher)`**:
+ Rufe `await mockApiFetcher(stadtName)` auf. Prüfe `response.ok`. Wenn `false`, wirf einen Fehler. Wenn `true`, parse JSON (`await response.json()`) und gib `{ stadt, temperatur, wetterlage }` zurück.
+2. **`aggregiereBenutzerPosts(userId, mockPostApiFetcher)`**:
+ Rufe `await mockPostApiFetcher(userId)` auf. Aggregiere die Posts zu `{ userId, anzahlPosts, postTitel }`.
+3. **`sichererApiAufruf(apiPromiseOderFn, standardFallback)`**:
+ Führe ein Promise oder eine async Funktion im `try`-Block aus. Fange Fehler im `catch`-Block ab und gib `standardFallback` zurück.
diff --git a/courses/javascript/06_async_await_und_fetch/aufgabe.js b/courses/javascript/06_async_await_und_fetch/aufgabe.js
new file mode 100644
index 0000000..0a85b75
--- /dev/null
+++ b/courses/javascript/06_async_await_und_fetch/aufgabe.js
@@ -0,0 +1,42 @@
+/**
+ * 🌐 JS 06: ASYNC / AWAIT & REST-APIS (FETCH) 🌐
+ * ===============================================
+ * Lerne modernes asynchrones JavaScript mit async/await,
+ * robuster try-catch-Fehlerbehandlung und dem Konsumieren von REST-APIs.
+ */
+
+// 🎯 TEILZIEL 1 (TODO 1): Schreibe holeWetterDaten(stadtName, mockApiFetcher)
+// - Ruft mockApiFetcher(stadtName) mit await auf.
+// - Das Response-Objekt enthält { ok: boolean, status: number, json: async () => data }.
+// - Wenn response.ok === false ist: wirf einen Fehler (throw new Error(`Stadt ${stadtName} nicht gefunden`)).
+// - Wenn response.ok === true ist: parse das JSON mit await response.json()
+// - Gib ein formatiertes Objekt zurück:
+// { stadt: data.stadt, temperatur: data.temperatur, wetterlage: data.wetterlage }
+async function holeWetterDaten(stadtName, mockApiFetcher) {
+ // TODO: Nutze await, prüfe response.ok, parse JSON und gib das formatierte Objekt zurück
+ return null;
+}
+
+// 🎯 TEILZIEL 2 (TODO 2): Schreibe aggregiereBenutzerPosts(userId, mockPostApiFetcher)
+// - Ruft mockPostApiFetcher(userId) mit await auf.
+// - Wenn der Fetcher eine Response liefert (response.ok), parse das JSON; wenn direkt ein Array geliefert wird, nutze dieses.
+// - Extrahiere alle Posts des Nutzers.
+// - Gib ein Aggregat-Objekt zurück mit folgendem Aufbau:
+// {
+// userId: userId,
+// anzahlPosts: posts.length,
+// postTitel: posts.map(p => p.titel)
+// }
+async function aggregiereBenutzerPosts(userId, mockPostApiFetcher) {
+ // TODO: Asynchron abrufen und aggregieren
+ return null;
+}
+
+// 🎯 TEILZIEL 3 (TODO 3): Schreibe sichererApiAufruf(apiPromiseOderFn, standardFallback)
+// - Führt das übergebene Promise oder die asynchrone Funktion in einem try-Block mit await aus.
+// - Wenn die Ausführung erfolgreich ist: gib das Ergebnis zurück.
+// - Wenn ein Fehler auftritt (catch): fange den Fehler ab und gib standardFallback zurück.
+async function sichererApiAufruf(apiPromiseOderFn, standardFallback) {
+ // TODO: try-catch Block für sicheren Aufruf mit Fallback-Wert
+ return null;
+}
diff --git a/courses/javascript/06_async_await_und_fetch/index.html b/courses/javascript/06_async_await_und_fetch/index.html
new file mode 100644
index 0000000..e1fc739
--- /dev/null
+++ b/courses/javascript/06_async_await_und_fetch/index.html
@@ -0,0 +1,189 @@
+
+
+
+
+
+ JS 06: Async/Await & REST-APIs (Fetch)
+
+
+
+
+
+
+
+
+
🌐 Modernes JavaScript
+
JS 06: Async/Await & REST-APIs (Fetch)
+
Schreibe asynchronen Code so lesbar und linear wie synchronen Code mit async, await und try/catch.
+
+
+
+
+
+
+
📖 1. Warum Async/Await?
+
+ Mit async/await (ES2017) gehört unübersichtliches Promise-Chaining der Vergangenheit an. Asynchroner Code liest sich nun von oben nach unten wie ganz normaler, synchroner Code.
+
+
+
+
📚 Die Buch-Lese-Analogie
+
+ Vorher (Callbacks & .then()): Wie ein Buch, bei dem jedes Kapitel auf Fußnoten verweist („Lies auf Seite 80 weiter, um die Antwort zu finden“).
+
+
+ Jetzt (Async/Await): Du liest das Buch ganz entspannt Zeile für Zeile von oben nach unten. Bei await pausiert der Erzähler kurz, holt die Information ab und liest genau an der Stelle flüssig weiter!
+
1. 🛡️ Warum TypeScript? Der digitale Sicherheitsgurt
+
+ In reinem JavaScript treten Typfehler oft erst spät zur Laufzeit auf – beispielsweise wenn ein Kunde im Online-Shop auf „Kaufen“ klickt und das Programm mit TypeError: Cannot read properties of undefined abstürzt.
+
+
+ TypeScript erweitert JavaScript um statische Typüberprüfungen. Es wirkt wie ein digitaler Sicherheitsgurt und ein unbestechlicher Bauplan-Wächter: Jeder Parameter, jedes Objekt und jede Schnittstelle wird genau geprüft, noch bevor der Code im Browser ausgeführt wird.
+
+
+
+
🏗️ Die Architekten-Analogie:
+ JavaScript ohne Typen ist wie eine Baustelle ohne Plan: Man merkt erst beim Einzug, dass das Treppenhaus fehlt. TypeScript liefert den geprüften Bauplan: Passt ein Baustein nicht, warnt dich der Compiler sofort im Editor!
+
+
+
+
+
+
2. 📋 TypeScript Cheat-Sheet: Basis-Typen & Union Types
+
TypeScript bietet alle vertrauten Datentypen sowie mächtige Kompositionswerkzeuge:
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: