JavaScript esencial: interactividad real sin frameworks

1. La base mínima que debes dominar

Solo necesitas: seleccionar elementos, escuchar eventos y cambiar el DOM. Todo lo demás es combinar eso.

// Seleccionar + escuchar + reaccionar
const btn = document.querySelector('#miBtn');
btn.addEventListener('click', () => {
  document.body.classList.toggle('activo');
});

2. Buscador en vivo (como el de nuestra portada)

input.addEventListener('input', () => {
  const t = input.value.toLowerCase();
  document.querySelectorAll('[data-card]').forEach(c => {
    const hay = c.dataset.title.toLowerCase().includes(t);
    c.style.display = hay ? '' : 'none';
  });
});

Pruébalo arriba en la portada: filtra las 8 tarjetas al escribir, sin recargar.

3. Modo oscuro persistente

function toggleTheme(){
  const h = document.documentElement;
  const next = h.dataset.theme === 'dark' ? 'light' : 'dark';
  h.dataset.theme = next;
  localStorage.setItem('wc-theme', next);
}

4. Validación que sí ayuda al usuario

form.addEventListener('submit', e => {
  e.preventDefault();
  if(!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email.value)){
    msg.textContent = '⚠ Revisa tu email';
    email.focus(); return;
  }
  msg.textContent = '✅ ¡Gracias!';
});

5. Código que no se rompe al crecer

Tres hábitos separan el JS de juguete del profesional: un archivo por responsabilidad, cero errores en consola y feedback inmediato en cada botón. Si cumples esta lista, tu JS aguanta años sin reescrituras.

• Un archivo JS por responsabilidad
• Sin errores en consola (F12)
• Funciona con JS desactivado lo esencial
• Botones con feedback inmediato