09-01-2026, 05:09 PM
Zum Einsteigen (oder um den Flow zu halten) drei Mini-Projekte, die man in einer Vibe-Session (ca. 30 Min.) komplett bauen kann. Jedes nutzt typische JavaScript-Muster.
Projekt 1: Todo-App mit localStorage
Ziel: DOM-Manipulation + State-Persistenz.
Prompts:
1. Baue eine Todo-App: Liste, Input, Add/Delete-Buttons, Dark Mode
2. Persistiere den Zustand in localStorage, lade beim Start
3. Fuege eine "Alle loeschen"-Funktion und ein Counter-Element hinzu
Lerninhalt: querySelector, addEventListener, JSON.stringify/parse.
Projekt 2: Wetter-API-Client
Ziel: Async/Await + Fetch + Error-Handling.
Prompts:
1. Lade Wetterdaten von einer oeffentlichen API und zeige Stadt + Temperatur
2. Behandle Timeout, HTTP-Fehler und JSON-Parse-Fehler mit sauberer UX
3. Fuege Lade-Spinner und Offline-Hinweis hinzu
Lerninhalt: fetch, async/await, try/catch, loading-Zustaende.
Projekt 3: Kanban-Board mit Drag & Drop
Ziel: Events + DOM-Struktur + Persistenz.
Prompts:
1. Baue ein 3-Spalten-Kanban-Board mit Cards
2. Mache Cards per drag & drop zwischen Spalten verschiebbar
3. Speichere das Board in localStorage
Lerninhalt: drag/drop-API, event delegation, State-Sync.
Die Meta-Lektion: Bei allen dreien ist der Code nicht das Ziel, der Prompt-Loop (bauen, testen, verfeinern) ist das Ziel. Nach 3 Projekten hat man ein Gefuehl dafuer, wie viel man delegiert und wo man selbst prueft.
Viel Spass beim Viben – teilt eure Versionen im Thread!
Projekt 1: Todo-App mit localStorage
Ziel: DOM-Manipulation + State-Persistenz.
Prompts:
1. Baue eine Todo-App: Liste, Input, Add/Delete-Buttons, Dark Mode
2. Persistiere den Zustand in localStorage, lade beim Start
3. Fuege eine "Alle loeschen"-Funktion und ein Counter-Element hinzu
Lerninhalt: querySelector, addEventListener, JSON.stringify/parse.
Projekt 2: Wetter-API-Client
Ziel: Async/Await + Fetch + Error-Handling.
Prompts:
1. Lade Wetterdaten von einer oeffentlichen API und zeige Stadt + Temperatur
2. Behandle Timeout, HTTP-Fehler und JSON-Parse-Fehler mit sauberer UX
3. Fuege Lade-Spinner und Offline-Hinweis hinzu
Lerninhalt: fetch, async/await, try/catch, loading-Zustaende.
Projekt 3: Kanban-Board mit Drag & Drop
Ziel: Events + DOM-Struktur + Persistenz.
Prompts:
1. Baue ein 3-Spalten-Kanban-Board mit Cards
2. Mache Cards per drag & drop zwischen Spalten verschiebbar
3. Speichere das Board in localStorage
Lerninhalt: drag/drop-API, event delegation, State-Sync.
Die Meta-Lektion: Bei allen dreien ist der Code nicht das Ziel, der Prompt-Loop (bauen, testen, verfeinern) ist das Ziel. Nach 3 Projekten hat man ein Gefuehl dafuer, wie viel man delegiert und wo man selbst prueft.
Viel Spass beim Viben – teilt eure Versionen im Thread!