Construye una mini-app real: el Tablero de Ideas
De página a app
Todo lo que has construido hasta ahora era una página: se veía genial, reaccionaba a los clics, pero olvidaba todo en cuanto recargabas. Hoy eso cambia. Vas a construir tu primera app de verdad: los datos entran, los datos se muestran y los datos se recuerdan.
Ese es todo el secreto de las apps, por cierto. Tres movimientos:
- Datos que entran — un input donde el usuario escribe algo
- Datos que se muestran — una lista que se actualiza en pantalla
- Datos que se recuerdan — almacenamiento, para que sigan ahí mañana
Cuando haces vibe coding, no describes el cableado — describes el flujo. Este es el tipo de prompt que construye el proyecto de hoy:
"Una caja donde escribo una idea, un botón que la agrega a una lista debajo, y la lista debe seguir ahí cuando vuelva mañana."
Esa sola frase le dice todo a la IA: necesita un input, un botón con un listener de clics, una lista a la que ir agregando elementos y localStorage para la parte de "mañana". Tú describes el flujo, la IA se encarga de input + lista + almacenamiento.
La app que vas a construir es un Tablero de Ideas — un lugar para capturar cada momento de "espera, eso lo podría construir con IA" que tengas de ahora en adelante. Créeme: después de este curso, vas a tener muchos.
Instrucciones
Agrega un <input id="idea-input"> con un placeholder — por aquí entran las ideas
Pista: Prueba: `<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">`
Agrega un <button id="add-btn"> junto al input — el disparador que agrega una idea
Agrega un <ul id="idea-list"> vacío debajo — aquí es donde se muestran las ideas
En el <script>, escucha los clics en #add-btn: crea un <li> con el valor del input, agrégalo a la lista y luego limpia el input
Haz que recuerde: guarda el array de ideas en localStorage("vca-ideas") en cada agregado, y carga + muestra las ideas guardadas cuando la página se abre
Tu código
Describe lo que quieres construir para este paso y escribiré el código — luego haz clic en Aplicar para llevarlo a tu editor. Este paso: Agrega un <input id="idea-input"> con un placeholder — por aquí entran las ideas