Costruisci una vera mini-app: la bacheca delle idee
Da pagina ad app
Tutto quello che hai costruito finora era una pagina — era bellissima, reagiva ai clic, ma dimenticava tutto nel momento in cui ricaricavi. Oggi le cose cambiano. Stai per costruire la tua prima vera app: i dati entrano, i dati vengono mostrati e i dati vengono ricordati.
È tutto qui il segreto delle app, tra l'altro. Tre mosse:
- Dati in entrata — un input dove l'utente scrive qualcosa
- Dati mostrati — una lista che si aggiorna sullo schermo
- Dati ricordati — la memorizzazione, così domani sono ancora lì
Quando fai vibe coding, non descrivi i collegamenti — descrivi il flusso. Ecco il tipo di prompt che costruisce il progetto di oggi:
"Una casella dove scrivo un'idea, un pulsante che la aggiunge a una lista qui sotto, e la lista deve esserci ancora quando torno domani."
Quella singola frase dice all'IA tutto quello che serve: un input, un pulsante con un listener per i clic, una lista a cui aggiungere elementi, e localStorage per la parte del "domani". Tu descrivi il flusso, l'IA si occupa di input + lista + memorizzazione.
L'app che stai per costruire è una Bacheca delle Idee — un posto dove catturare ogni momento "aspetta, potrei costruirlo con l'IA" che avrai d'ora in poi. Fidati: dopo questo corso, ne avrai parecchi.
Istruzioni
Aggiungi un <input id="idea-input"> con un placeholder — è da qui che entrano le idee
Suggerimento: Prova: `<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">`
Aggiungi un <button id="add-btn"> accanto all'input — il grilletto che aggiunge un'idea
Aggiungi una <ul id="idea-list"> vuota qui sotto — è qui che le idee vengono mostrate
Nello <script>, ascolta i clic su #add-btn: crea un <li> con il valore dell'input, aggiungilo alla lista, poi svuota l'input
Falla ricordare: salva l'array delle idee in localStorage("vca-ideas") a ogni aggiunta, e carica + mostra le idee salvate all'apertura della pagina
Il tuo codice
Descrivi ciò che vuoi creare per questo passaggio e scriverò il codice — poi clicca su Applica per inserirlo nel tuo editor. Questo passaggio: Aggiungi un <input id="idea-input"> con un placeholder — è da qui che entrano le idee