Haz que haga algo

Tu tarjeta de perfil se ve genial — pero solo está ahí, quieta. Haz clic, tócala: no pasa nada. Eso es porque HTML es estructura y Tailwind es estilo. El comportamiento es trabajo de JavaScript.

Aquí va el secreto que nadie les cuenta a los principiantes: en el vibe coding no memorizas JavaScript. Describes qué debe pasar, y la IA escribe el código. El comportamiento es solo una frase:

"Cuando alguien haga clic en el botón de me gusta, el número junto al corazón sube en 1."

Dale ese prompt a la IA y producirá algo pequeñito como esto:

const btn = document.getElementById("like-btn");
btn.addEventListener("click", () => {
  likes = likes + 1;
  count.textContent = likes;
});

Eso es todo. Tres movimientos, siempre:

1. Encontrar el elemento (getElementById)
2. Escuchar un evento (addEventListener("click", ...))
3. Cambiar algo (textContent, una clase, lo que sea)

Encontrar, escuchar, cambiar. Casi toda interacción en cada sitio web que has usado — menús desplegables, interruptores de modo oscuro, botones de me gusta — es alguna versión de este patrón.

En esta lección agregarás un contador de me gusta a tu tarjeta. Al final, harás clic en un corazón y verás subir un número que tú controlas. Ese es el momento en que una página se convierte en una app.