Lab 2: Kanban-Board per Chat

Iteratives Verfeinern in zwei Stufen

← Zurück zur Übersicht

Modus: Chat Dauer: ca. 15-20 Minuten Zeigt: iteratives Verfeinern, mehrstufige Ausführung

Dieses Lab läuft in zwei Stufen: zuerst ein funktionierendes Board ohne Drag & Drop (Karten per Buttons verschieben), danach erweitern wir es um Drag & Drop. Alles läuft komplett lokal mit HTML/CSS/Vanilla JavaScript — ohne externe Bibliotheken.

Ziel

Ein Kanban-/Task-Board bauen und durch Folge-Prompts iterativ verbessern. Die Teilnehmer erleben, dass Kiro auf einem bestehenden Ergebnis aufbaut (mehrstufige Ausführung), statt jedes Mal neu zu starten.

Vorbereitung

  • Leerer Ordner als Projekt (in Kiro über Open a project).
  • Kiro im Chat-Modus (Standard).

Stufe 1 – Board OHNE Drag & Drop

Prompt 1

Erstelle ein Kanban-Board als eine einzige HTML-Datei (index.html)
mit HTML, CSS und Vanilla JavaScript – ohne externe Bibliotheken oder Frameworks.

Anforderungen:
- Drei Spalten: "To Do", "In Progress", "Done"
- Ein Eingabefeld + Button, um eine neue Aufgabe anzulegen (landet in "To Do")
- Jede Karte hat zwei Pfeil-Buttons (◀ ▶), um sie eine Spalte nach links/rechts zu verschieben
- Jede Karte hat einen Lösch-Button (✕)
- Die Pfeil-Buttons sind am Rand deaktiviert (◀ in To Do, ▶ in Done)
- Aufgaben werden im localStorage gespeichert und beim Neuladen wiederhergestellt
- Sauberes, modernes Layout

So öffnest du index.html im Browser: Im Kiro-Explorer Rechtsklick auf index.html → Reveal in File Explorer / Im Datei-Explorer anzeigen, dann im Windows-Explorer doppelklicken (Adresse beginnt mit file:///). Für dieses Lab inkl. localStorage reicht das völlig aus. Nach Änderungen mit F5 neu laden.

Testen (Stufe 1)

  • index.html im Browser öffnen.
  • Zwei, drei Aufgaben anlegen.
  • Karten mit ◀ / ▶ zwischen den Spalten verschieben.
  • Seite neu laden → Aufgaben sind noch da (localStorage).
  • Eine Karte löschen.

Stufe 2 – Drag & Drop ergänzen

Jetzt bauen wir auf dem bestehenden Board auf (Folge-Prompt im selben Chat!).

Prompt 2

Erweitere das bestehende Kanban-Board um Drag & Drop:
- Karten lassen sich mit der Maus in eine andere Spalte ziehen
- Nutze ausschließlich die native HTML5 Drag-and-Drop API (draggable, dragstart, dragover, drop)
- Keine externen Bibliotheken
- Die Spalte hebt sich optisch hervor, während eine Karte darübergezogen wird
- Nach dem Ablegen wird die neue Spalte im localStorage gespeichert
- Die Pfeil-Buttons aus Stufe 1 bleiben zusätzlich erhalten

Testen (Stufe 2)

  • index.html erneut öffnen bzw. die Seite aktualisieren.
  • Eine Karte mit der Maus von "To Do" nach "Done" ziehen und ablegen.
  • Während des Ziehens hebt sich die Zielspalte hervor.
  • Seite neu laden → die Karte bleibt in "Done" (localStorage).
  • Prüfen, dass die ◀ / ▶ Buttons weiterhin funktionieren.

Optionale weitere Iterationen (falls Zeit)

Färbe die Karten je nach Spalte unterschiedlich ein.
Füge jeder Karte ein optionales Fälligkeitsdatum hinzu.

Lernpunkte

  • Kiro baut auf dem bisherigen Kontext auf (Stufe 2 kennt den Code aus Stufe 1).
  • Iteratives Vorgehen: erst ein einfaches, lauffähiges Ergebnis, dann gezielt erweitern.
  • Komplexe Features (Drag & Drop) gehen ohne Frameworks — die Plattform (Browser) bringt sie mit.