Construisez une vraie mini-app : le tableau d'idées
De la page à l'app
Tout ce que vous avez construit jusqu'ici était une page — elle était belle, elle réagissait aux clics, mais elle oubliait tout dès que vous actualisiez. Aujourd'hui, ça change. Vous allez construire votre première vraie app : des données entrent, des données s'affichent, et des données sont mémorisées.
C'est d'ailleurs tout le secret des apps. Trois gestes :
- Données en entrée — un champ où l'utilisateur tape quelque chose
- Données affichées — une liste qui se met à jour à l'écran
- Données mémorisées — du stockage, pour que tout soit encore là demain
Quand vous faites du vibe coding, vous ne décrivez pas le câblage — vous décrivez le flux. Voici le genre de prompt qui construit le projet du jour :
« Une case où je tape une idée, un bouton qui l'ajoute à une liste en dessous, et la liste doit toujours être là quand je reviens demain. »
Cette seule phrase dit tout à l'IA : il lui faut un champ de saisie, un bouton avec un écouteur de clic, une liste à compléter, et localStorage pour la partie « demain ». Vous décrivez le flux, l'IA gère le champ + la liste + le stockage.
L'app que vous construisez est un tableau d'idées (Idea Board) — un endroit pour capturer chaque moment « attends, je pourrais construire ça avec l'IA » que vous aurez désormais. Croyez-moi, après ce cours, vous en aurez beaucoup.
Instructions
Ajoutez un <input id="idea-input"> avec un placeholder — c'est par là que les idées entrent
Indice : Essayez : `<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">`
Ajoutez un <button id="add-btn"> à côté du champ — le déclencheur qui ajoute une idée
Ajoutez un <ul id="idea-list"> vide en dessous — c'est là que les idées s'affichent
Dans le <script>, écoutez les clics sur #add-btn : créez un <li> avec la valeur du champ, ajoutez-le à la liste, puis videz le champ
Donnez-lui de la mémoire : sauvegardez le tableau d'idées dans localStorage("vca-ideas") à chaque ajout, et chargez + affichez les idées sauvegardées à l'ouverture de la page
Votre code
Décrivez ce que vous voulez créer pour cette étape et je rédige le code — puis cliquez sur Appliquer pour l'insérer dans votre éditeur. Cette étape : Ajoutez un <input id="idea-input"> avec un placeholder — c'est par là que les idées entrent