Percorso Da zero a eroe · Tappa 1 di 4

0%

SKIP TO CONTENT

Costruisci una vera mini-app: la bacheca delle idee

beginner~15 min0/5 passaggi

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:

  1. Dati in entrata — un input dove l'utente scrive qualcosa
  2. Dati mostrati — una lista che si aggiorna sullo schermo
  3. 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

1

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">`

2

Aggiungi un <button id="add-btn"> accanto all'input — il grilletto che aggiunge un'idea

3

Aggiungi una <ul id="idea-list"> vuota qui sotto — è qui che le idee vengono mostrate

4

Nello <script>, ascolta i clic su #add-btn: crea un <li> con il valore dell'input, aggiungilo alla lista, poi svuota l'input

5

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

html
33 righe
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

Anteprima dal vivo

Anteprima dal vivo