Bau eine echte Mini-App: das Ideen-Board
Von der Seite zur App
Alles, was du bisher gebaut hast, war eine Seite — sie sah großartig aus, sie reagierte auf Klicks, aber sie vergaß alles, sobald du neu geladen hast. Heute ändert sich das. Du baust deine erste echte App: Daten kommen rein, Daten werden angezeigt, und Daten werden gemerkt.
Das ist übrigens das ganze Geheimnis von Apps. Drei Schritte:
- Daten rein — ein Eingabefeld, in das jemand etwas tippt
- Daten anzeigen — eine Liste, die sich auf dem Bildschirm aktualisiert
- Daten merken — Speicher, damit alles morgen noch da ist
Beim Vibe Coding beschreibst du nicht die Verdrahtung — du beschreibst den Flow. So sieht der Prompt aus, der das heutige Projekt baut:
„Ein Feld, in das ich eine Idee tippe, ein Button, der sie zu einer Liste darunter hinzufügt, und die Liste soll noch da sein, wenn ich morgen wiederkomme.“
Dieser eine Satz sagt der KI alles: Sie braucht ein Eingabefeld, einen Button mit Klick-Listener, eine Liste, an die sie anhängt, und localStorage für den „Morgen“-Teil. Du beschreibst den Flow, die KI kümmert sich um Eingabe + Liste + Speicher.
Die App, die du baust, ist ein Ideen-Board — ein Ort, an dem du ab jetzt jeden „Moment mal, das könnte ich mit KI bauen“-Gedanken festhältst. Glaub mir: Nach diesem Kurs wirst du davon eine ganze Menge haben.
Anweisungen
Füge ein <input id="idea-input"> mit einem Placeholder hinzu — hier kommen die Ideen rein
Tipp: Probier: `<input id="idea-input" type="text" placeholder="I could build..." class="flex-1 bg-white/10 border border-white/20 rounded-xl px-4 py-3 text-sm">`
Füge neben dem Eingabefeld einen <button id="add-btn"> hinzu — den Auslöser, der eine Idee hinzufügt
Füge darunter ein leeres <ul id="idea-list"> hinzu — hier werden die Ideen angezeigt
Lausche im <script> auf Klicks auf #add-btn: Erzeuge ein <li> mit dem Wert des Eingabefelds, hänge es an die Liste an und leere danach das Eingabefeld
Gib ihr ein Gedächtnis: Speichere das Ideen-Array bei jedem Hinzufügen in localStorage("vca-ideas"), und lade + zeige gespeicherte Ideen, wenn die Seite geöffnet wird
Dein Code
Beschreibe, was du für diesen Schritt bauen willst, und ich schreibe den Code — klicke dann auf Übernehmen, um ihn in deinen Editor zu übertragen. Dieser Schritt: Füge ein <input id="idea-input"> mit einem Placeholder hinzu — hier kommen die Ideen rein