DOM en JavaScript — Guía Interactiva

// Lección 01

¿Qué es el DOM?

El DOM (Document Object Model) es la representación viva de tu página HTML en memoria. Cuando el navegador carga un archivo HTML, lo convierte en un árbol de objetos JavaScript que podemos leer y modificar en tiempo real.

Sin el DOM, JavaScript no podría tocar nada visual. Con el DOM, tienes control total sobre cada elemento, atributo, texto y estilo de la página.

Concepto clave: El DOM no es JavaScript ni HTML — es una API del navegador que conecta ambos. Está disponible a través del objeto global document.

Flujo del navegador: HTML texto → Parser → DOM Tree → JavaScript lo lee/modifica → Re-render visual.

Práctica: Tu primer contacto con el DOM

Modifica el HTML y el JS. Prueba cambiar el texto del <h1> desde JavaScript.

Ejemplo 01 — Acceder al DOM

        <!-- El navegador convierte esto en nodos del DOM -->
<div class="card">
  <h1 id="titulo">Hola, soy el DOM</h1>
  <p id="descripcion">Texto original del HTML</p>
  <button id="btn">Modificar con JS</button>
</div>
      

        body { font-family: sans-serif; background: #0f172a; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }
.card { background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 32px 40px; text-align: center; max-width: 400px; }
h1 { color: #38bdf8; font-size: 1.6rem; margin-bottom: 12px; }
p  { color: #94a3b8; margin-bottom: 20px; }
button { background: #38bdf8; color: #000; font-weight: 700; padding: 10px 24px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; transition: all 0.2s; }
button:hover { background: #7dd3fc; transform: scale(1.04); }
      

        // 1. Seleccionamos elementos por su ID
const titulo = document.getElementById('titulo');
const descripcion = document.getElementById('descripcion');
const btn = document.getElementById('btn');

// 2. Leemos valores del DOM
console.log('Tipo de nodo del h1:', titulo.nodeType); // 1 = ELEMENT_NODE
console.log('Nombre del tag:', titulo.tagName);        // "H1"

// 3. Al hacer clic, MODIFICAMOS el DOM
btn.addEventListener('click', function() {
  titulo.textContent = '¡El DOM fue modificado! 🎉';
  descripcion.textContent = 'JavaScript cambió este texto en tiempo real.';
  btn.textContent = 'Modificado ✓';
  btn.style.background = '#34d399';
});
      

Vista previa — haz clic en "Ejecutar" y luego en el botón

// Lección 02

La Estructura de Árbol

Cada elemento HTML se convierte en un nodo del árbol DOM. Los nodos tienen relaciones: padre, hijos y hermanos. Entender el árbol es fundamental para navegar y manipular la página.

document
└── html
    ├── head
    │   └── title
    │       └── "Mi Página"        ← Nodo de texto
    └── body
        ├── section  class="hero"
        │   ├── h1  id="titulo"
        │   │   └── "Hola Mundo"
        │   └── p   class="lead"
        │       └── "Texto aquí"
        └── ul  id="lista"
            ├── li  "Item 1"   ← children[0]
            ├── li  "Item 2"   ← children[1]
            └── li  "Item 3"   ← children[2]

Navegar por el árbol

Haz clic en cada botón para ver cómo JavaScript navega el árbol DOM en tiempo real.

Ejemplo 02 — Navegación de nodos

        <div id="arbol">
  <h2 id="padre">Nodo Padre (h2)</h2>
  <ul id="lista">
    <li>Hijo 1 — primer hermano</li>
    <li id="medio">Hijo 2 — del medio</li>
    <li>Hijo 3 — último hermano</li>
  </ul>
</div>

<div class="btns">
  <button onclick="mostrarParent()">Ver Padre</button>
  <button onclick="mostrarHijos()">Ver Hijos</button>
  <button onclick="mostrarHermano()">Ver Hermano</button>
</div>

<div id="resultado">Haz clic en un botón</div>
      

        body { font-family: sans-serif; background: #0f172a; color: #e2e8f0; padding: 24px; }
#arbol { background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: 20px 24px; margin-bottom: 16px; }
h2 { color: #f87171; margin-bottom: 12px; font-size: 1rem; }
ul { padding-left: 20px; }
li { color: #94a3b8; padding: 4px 0; }
#medio { color: #fbbf24; font-weight: bold; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
button { background: #334155; color: #94a3b8; border: 1px solid #475569; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 13px; transition: all 0.2s; }
button:hover { background: #38bdf8; color: #000; border-color: #38bdf8; }
#resultado { background: #0d1117; border: 1px solid #334155; border-left: 3px solid #38bdf8; border-radius: 8px; padding: 14px 18px; font-family: monospace; font-size: 13px; color: #38bdf8; min-height: 48px; }
      

        const output = document.getElementById('resultado');
const medio = document.getElementById('medio');
const lista = document.getElementById('lista');

function mostrarParent() {
  // parentElement → el elemento que contiene a este
  const padre = medio.parentElement;
  output.innerHTML = `<b>parentElement</b> de #medio:<br>→ <${padre.tagName.toLowerCase()} id="${padre.id}">`;
}

function mostrarHijos() {
  // children → todos los hijos directos
  const hijos = lista.children;
  output.innerHTML = `<b>children</b> de #lista (${hijos.length} elementos):<br>` +
    Array.from(hijos).map((h, i) => `→ [${i}] "${h.textContent.trim()}"`).join('<br>');
}

function mostrarHermano() {
  // nextElementSibling / previousElementSibling → hermanos
  const anterior = medio.previousElementSibling;
  const siguiente = medio.nextElementSibling;
  output.innerHTML = `<b>hermanos</b> de #medio:<br>` +
    `→ anterior: "${anterior.textContent.trim()}"<br>` +
    `→ siguiente: "${siguiente.textContent.trim()}"`;
}
      

Vista previa — interactúa con los botones

// Lección 03

Seleccionar Elementos

Antes de modificar algo del DOM hay que encontrarlo. JavaScript ofrece varios métodos de selección, cada uno con propósito distinto:

getElementById(id)

Busca por ID. El más rápido. Devuelve 1 elemento o null.

getElementsByClassName()

Busca por clase CSS. Devuelve una HTMLCollection viva.

querySelector(selector)

Acepta cualquier selector CSS. Devuelve el primero que coincida.

querySelectorAll(selector)

Acepta cualquier selector CSS. Devuelve todos como NodeList.

Regla práctica: Usa querySelector y querySelectorAll para la mayoría de los casos. Son los más flexibles y se comportan igual que CSS.

Haz clic en cada botón para ver qué selecciona cada método. Intenta agregar más elementos en el HTML.

Ejemplo 03 — Métodos de selección

        <div class="panel">
  <h2 id="unico">Elemento con ID único</h2>
  <p class="fruta">🍎 Manzana</p>
  <p class="fruta destacada">🍊 Naranja — tiene 2 clases</p>
  <p class="fruta">🍇 Uva</p>
  <p class="fruta">🍓 Fresa</p>
</div>

<div class="botones">
  <button onclick="sel1()">getElementById</button>
  <button onclick="sel2()">querySelector</button>
  <button onclick="sel3()">querySelectorAll</button>
  <button onclick="sel4()">querySelector avanzado</button>
</div>
<div id="info">Presiona un botón</div>
      

        body { font-family: sans-serif; background: #0f172a; color: #e2e8f0; padding: 20px; }
.panel { background: #1e293b; border-radius: 10px; padding: 20px; margin-bottom: 16px; }
h2 { color: #a78bfa; font-size: 1rem; margin-bottom: 12px; }
p { padding: 8px 12px; border-radius: 6px; margin: 6px 0; cursor: default; transition: background 0.3s; }
p.fruta { background: #0f172a; border: 1px solid #1e293b; color: #94a3b8; }
p.destacada { border-color: #fbbf24; color: #fbbf24; }
p.resaltado { background: #38bdf8 !important; color: #000 !important; font-weight: bold; }
.botones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
button { background: #1e293b; color: #94a3b8; border: 1px solid #334155; padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 12px; transition: all 0.2s; }
button:hover { background: #a78bfa; color: #000; }
#info { background: #0d1117; border-left: 3px solid #a78bfa; border-radius: 8px; padding: 14px 18px; font-family: monospace; font-size: 13px; color: #a78bfa; min-height: 50px; }
      

        const info = document.getElementById('info');

// Limpiar resaltado previo
function limpiar() {
  document.querySelectorAll('.resaltado').forEach(el => el.classList.remove('resaltado'));
}

function sel1() {
  limpiar();
  // getElementById → busca por atributo id
  const el = document.getElementById('unico');
  info.innerHTML = `getElementById('unico'):<br>→ Encontrado: <${el.tagName}> "${el.textContent}"`;
}

function sel2() {
  limpiar();
  // querySelector → el PRIMER elemento que coincida con el selector CSS
  const el = document.querySelector('.fruta');
  el.classList.add('resaltado');
  info.innerHTML = `querySelector('.fruta'):<br>→ Solo el PRIMERO: "${el.textContent.trim()}"`;
}

function sel3() {
  limpiar();
  // querySelectorAll → TODOS los que coincidan
  const todos = document.querySelectorAll('.fruta');
  todos.forEach(el => el.classList.add('resaltado'));
  info.innerHTML = `querySelectorAll('.fruta'):<br>→ Encontrados: ${todos.length} elementos<br>` +
    Array.from(todos).map(e => `  • "${e.textContent.trim()}"`).join('<br>');
}

function sel4() {
  limpiar();
  // Selector avanzado: elemento con DOS clases específicas
  const el = document.querySelector('.fruta.destacada');
  el.classList.add('resaltado');
  info.innerHTML = `querySelector('.fruta.destacada'):<br>→ Tiene ambas clases: "${el.textContent.trim()}"`;
}
      

Vista previa — observa qué resalta cada selector

// Lección 04

Leer y Modificar Contenido

Una vez seleccionado un elemento, podemos leer y cambiar su contenido de texto, su HTML interno, sus atributos y el valor de formularios.

Importante: Usa textContent siempre que puedas. Si necesitas insertar HTML real, usa innerHTML — pero nunca pongas ahí datos del usuario sin sanitizar (riesgo de XSS).

Modifica el JS para que cada botón cambie algo diferente. Experimenta con innerHTML y getAttribute.

Ejemplo 04 — textContent, innerHTML, atributos

        <div class="demo">
  <img id="foto" src="https://picsum.photos/seed/dom/80/80" alt="Imagen aleatoria" width="80">
  <div class="info">
    <h2 id="nombre">Pedro García</h2>
    <p id="rol">Desarrollador Frontend</p>
    <a id="enlace" href="https://ejemplo.com">Ver perfil</a>
  </div>
</div>

<div class="controles">
  <button onclick="cambiarTexto()">Cambiar nombre</button>
  <button onclick="cambiarHTML()">Agregar HTML</button>
  <button onclick="cambiarAtributo()">Cambiar src de imagen</button>
  <button onclick="leerAtributo()">Leer href del enlace</button>
</div>
<div id="log"></div>
      

        body { font-family: sans-serif; background: #0f172a; color: #e2e8f0; padding: 20px; }
.demo { display: flex; gap: 20px; align-items: center; background: #1e293b; border-radius: 12px; padding: 20px; margin-bottom: 16px; }
img { border-radius: 50%; border: 3px solid #38bdf8; transition: all 0.3s; }
.info h2 { color: #38bdf8; margin-bottom: 4px; }
.info p { color: #94a3b8; margin-bottom: 8px; font-size: 1rem; }
.info a { color: #a78bfa; font-size: 0.88rem; }
.controles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
button { background: #1e293b; color: #94a3b8; border: 1px solid #334155; padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 12px; transition: all 0.2s; }
button:hover { background: #0ea5e9; color: #000; }
#log { background: #0d1117; border-left: 3px solid #34d399; border-radius: 8px; padding: 14px 18px; font-family: monospace; font-size: 13px; color: #34d399; min-height: 40px; }
      

        const log = document.getElementById('log');
let contador = 1;

function cambiarTexto() {
  const nombre = document.getElementById('nombre');
  // textContent: texto plano, sin HTML
  const anterior = nombre.textContent;
  nombre.textContent = '👤 Usuario #' + contador++;
  log.textContent = `textContent: "${anterior}" → "${nombre.textContent}"`;
}

function cambiarHTML() {
  const rol = document.getElementById('rol');
  // innerHTML: puede contener etiquetas HTML reales
  rol.innerHTML = '⭐ <strong style="color:#fbbf24">Senior</strong> Developer';
  log.textContent = 'innerHTML asignado: ahora contiene un <strong>';
}

function cambiarAtributo() {
  const img = document.getElementById('foto');
  const semilla = Math.floor(Math.random() * 100);
  // setAttribute: cambia cualquier atributo HTML
  img.setAttribute('src', `https://picsum.photos/seed/${semilla}/80/80`);
  img.setAttribute('alt', `Imagen semilla ${semilla}`);
  log.textContent = `setAttribute('src', '...${semilla}/80/80')`;
}

function leerAtributo() {
  const enlace = document.getElementById('enlace');
  // getAttribute: lee el valor del atributo
  const href = enlace.getAttribute('href');
  log.textContent = `getAttribute('href') → "${href}"`;
}
      

Vista previa — observa cómo cambia el DOM al ejecutar

// Lección 05

Clases CSS y Estilos

La manera más limpia de cambiar la apariencia de un elemento es agregando o quitando clases CSS. Usa style solo para valores dinámicos que no puedes definir en CSS de antemano.

classList tiene 4 métodos esenciales: add(), remove(), toggle() (agrega si no existe, quita si existe), y contains() (devuelve true/false).

Experimenta con el botón de tema oscuro/claro y los efectos. Intenta agregar tu propia clase CSS y activarla con JS.

Ejemplo 05 — classList y estilos dinámicos

        <div id="pagina">
  <div id="tarjeta" class="tarjeta">
    <div class="avatar">🚀</div>
    <h2>Tarjeta de Ejemplo</h2>
    <p>Haz clic en los botones para cambiar estilos con JavaScript.</p>
  </div>

  <div class="controles">
    <button onclick="toggleTema()">🌙 Toggle Tema</button>
    <button onclick="toggleBorde()">⬜ Toggle Borde</button>
    <button onclick="toggleAnimacion()">✨ Toggle Animación</button>
    <button onclick="cambiarColor()">🎨 Color Dinámico</button>
  </div>
  <div id="status">Clases actuales: tarjeta</div>
</div>
      

        #pagina { font-family: sans-serif; background: #1e293b; min-height: 100vh; padding: 20px; transition: background 0.4s; }
#pagina.modo-claro { background: #f1f5f9; color: #0f172a; }

.tarjeta { background: #0f172a; border-radius: 16px; padding: 32px; text-align: center; max-width: 320px; margin: 0 auto 20px; transition: all 0.4s; }
.avatar { font-size: 3rem; margin-bottom: 16px; }
h2 { color: #38bdf8; margin-bottom: 8px; }
p { color: #64748b; font-size: 1rem; }

/* Clases que JS va a agregar/quitar */
.tarjeta.con-borde { border: 2px solid #a78bfa; box-shadow: 0 0 30px rgba(167,139,250,0.3); }
.tarjeta.animada { animation: rebote 0.6s infinite alternate; }
.modo-claro .tarjeta { background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,0.1); }
.modo-claro h2 { color: #0284c7; }
.modo-claro p { color: #475569; }

@keyframes rebote { from { transform: translateY(0); } to { transform: translateY(-10px); } }

.controles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 12px; }
button { background: #334155; color: #94a3b8; border: none; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 13px; transition: all 0.2s; }
button:hover { background: #a78bfa; color: #000; }
#status { background: #0d1117; border-left: 3px solid #a78bfa; border-radius: 8px; padding: 12px 16px; font-family: monospace; font-size: 12px; color: #a78bfa; text-align: center; }
      

        const pagina = document.getElementById('pagina');
const tarjeta = document.getElementById('tarjeta');
const status = document.getElementById('status');

function actualizarStatus() {
  // classList.value → string con todas las clases
  status.textContent = 'Clases actuales: ' + tarjeta.className;
}

function toggleTema() {
  // toggle: si existe la quita, si no existe la agrega
  pagina.classList.toggle('modo-claro');
  const activo = pagina.classList.contains('modo-claro');
  status.textContent = 'Tema claro: ' + (activo ? 'ON ☀️' : 'OFF 🌙');
}

function toggleBorde() {
  tarjeta.classList.toggle('con-borde');
  actualizarStatus();
}

function toggleAnimacion() {
  tarjeta.classList.toggle('animada');
  actualizarStatus();
}

function cambiarColor() {
  // style → para valores verdaderamente dinámicos
  const colores = ['#38bdf8', '#f87171', '#34d399', '#fbbf24', '#a78bfa', '#fb923c'];
  const color = colores[Math.floor(Math.random() * colores.length)];
  tarjeta.style.borderTop = `4px solid ${color}`;
  status.textContent = `style.borderTop = "4px solid ${color}"`;
}
      

Vista previa — toggle de clases en acción

// Lección 06

Crear e Insertar Nodos

Una de las capacidades más poderosas del DOM es crear elementos desde cero con JavaScript y colocarlos exactamente donde necesitamos en el árbol.

createElement(tag)

Crea un nuevo elemento HTML. Aún no está en el DOM.

appendChild(nodo)

Inserta el nodo al final de los hijos del padre.

prepend(nodo)

Inserta el nodo al inicio de los hijos del padre.

element.remove()

Elimina el elemento del DOM. Directo y sin rodeos.

cloneNode(deep)

Copia un nodo. true = copia también sus hijos.

insertBefore(nuevo, ref)

Inserta antes de un nodo de referencia específico.

Agrega y elimina tarjetas. Intenta cambiar el color y el emoji antes de insertar. Usa "Clonar" para duplicar.

Ejemplo 06 — crear, insertar y eliminar nodos

        <div class="toolbar">
  <button onclick="agregarAlFinal()">+ Agregar al final</button>
  <button onclick="agregarAlInicio()">+ Agregar al inicio</button>
  <button onclick="clonarPrimero()">⧉ Clonar primero</button>
  <button onclick="eliminarUltimo()">✕ Eliminar último</button>
</div>

<div id="galeria">
  <div class="card" data-color="#38bdf8">
    <span class="emoji">🌊</span>
    <p>Tarjeta inicial</p>
  </div>
</div>

<div id="contador">Total: 1 elemento(s)</div>
      

        body { font-family: sans-serif; background: #0f172a; color: #e2e8f0; padding: 16px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
button { background: #1e293b; color: #94a3b8; border: 1px solid #334155; padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 12px; transition: all 0.2s; }
button:hover { background: #0ea5e9; color: #000; }

#galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; margin-bottom: 12px; min-height: 80px; }

.card { border-radius: 12px; padding: 20px 10px; text-align: center; border: 2px solid rgba(255,255,255,0.1); cursor: default; transition: transform 0.2s; animation: aparecer 0.3s ease; }
.card:hover { transform: translateY(-4px); }
.card .emoji { font-size: 2rem; display: block; margin-bottom: 8px; }
.card p { font-size: 0.75rem; color: rgba(255,255,255,0.7); margin: 0; }
@keyframes aparecer { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }

#contador { font-family: monospace; font-size: 12px; color: #475569; text-align: right; }
      

        const galeria = document.getElementById('galeria');
const contador = document.getElementById('contador');

const emojis = ['🔥', '⚡', '🌸', '🎯', '🦋', '🎨', '🚀', '🌈', '💎', '🎭'];
const colores = ['#38bdf8', '#a78bfa', '#34d399', '#fbbf24', '#f87171', '#fb923c'];

function crearTarjeta(emoji, color, texto) {
  // 1. createElement: crear el elemento (aún fuera del DOM)
  const card = document.createElement('div');
  card.className = 'card';
  card.style.backgroundColor = color + '22'; // color con transparencia
  card.style.borderColor = color;
  card.dataset.color = color;

  // 2. Crear hijos y configurarlos
  const emojiEl = document.createElement('span');
  emojiEl.className = 'emoji';
  emojiEl.textContent = emoji;

  const parrafo = document.createElement('p');
  parrafo.textContent = texto;

  // 3. Ensamblar (aún fuera del DOM)
  card.appendChild(emojiEl);
  card.appendChild(parrafo);

  return card; // devolvemos el nodo listo
}

function actualizarContador() {
  const n = galeria.children.length;
  contador.textContent = `Total: ${n} elemento(s) en el DOM`;
}

function aleatorio(arr) { return arr[Math.floor(Math.random() * arr.length)]; }

function agregarAlFinal() {
  const card = crearTarjeta(aleatorio(emojis), aleatorio(colores), 'Nuevo (#' + galeria.children.length + ')');
  galeria.appendChild(card); // → al FINAL
  actualizarContador();
}

function agregarAlInicio() {
  const card = crearTarjeta(aleatorio(emojis), aleatorio(colores), 'Primero!');
  galeria.prepend(card); // → al INICIO
  actualizarContador();
}

function clonarPrimero() {
  const primero = galeria.firstElementChild;
  if (!primero) return;
  const clon = primero.cloneNode(true); // true = copia profunda con hijos
  clon.querySelector('p').textContent = 'Clon ⧉';
  galeria.appendChild(clon);
  actualizarContador();
}

function eliminarUltimo() {
  const ultimo = galeria.lastElementChild;
  if (!ultimo) return;
  ultimo.remove(); // elimina del DOM
  actualizarContador();
}
      

Vista previa — crea y elimina nodos en tiempo real

// Lección 07a

Eventos de Mouse

Los eventos de mouse cubren toda interacción del cursor: clics, movimiento, entrada y salida de elementos. El objeto MouseEvent trae propiedades como clientX/Y, offsetX/Y, button y buttons.

click

Clic principal (botón izquierdo). El más usado.

dblclick

Doble clic. Si también hay click, se disparan ambos.

contextmenu

Clic derecho. Usa preventDefault() para evitar el menú del navegador.

mouseenter / mouseleave

El cursor entra o sale del elemento. NO se propagan (no bubble).

mouseover / mouseout

Igual que enter/leave pero SÍ se propagan a los hijos.

mousemove

Se dispara continuamente mientras el cursor se mueve. Atención al rendimiento.

Haz clic, doble clic, clic derecho y mueve el mouse por las zonas. Observa cómo cada evento responde diferente.

Ejemplo 07a — Eventos de Mouse

        <div class="app">

  <!-- ZONA: click / dblclick / contextmenu -->
  <div class="zona-card">
    <h3>click · dblclick · contextmenu</h3>
    <div id="zona-clicks" class="zona">
      <span id="clicks-msg">Haz clic aquí (simple, doble o derecho)</span>
      <div class="ripple-container" id="ripple-cont"></div>
    </div>
    <div class="contadores">
      <span>click: <b id="cnt-click">0</b></span>
      <span>dblclick: <b id="cnt-dbl">0</b></span>
      <span>contextmenu: <b id="cnt-ctx">0</b></span>
    </div>
  </div>

  <!-- ZONA: mouseenter/leave vs mouseover/out -->
  <div class="zona-card">
    <h3>mouseenter · mouseleave</h3>
    <div id="zona-enter" class="zona zona-enter">
      Padre (entra aquí)
      <div class="hijo">Hijo interno</div>
    </div>
    <div class="contadores">
      <span>mouseenter: <b id="cnt-enter">0</b></span>
      <span>mouseleave: <b id="cnt-leave">0</b></span>
    </div>
  </div>

  <!-- ZONA: mousemove con coordenadas -->
  <div class="zona-card">
    <h3>mousemove — coordenadas en tiempo real</h3>
    <div id="zona-move" class="zona zona-move">
      <div id="move-dot"></div>
      <div id="move-coords">Mueve el mouse aquí 🖱️</div>
    </div>
  </div>

  <!-- LOG -->
  <div id="log"><div class="log-head">📡 Event Log</div><div id="log-body"></div></div>
</div>
      

        * { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: sans-serif; background: #0a0f1a; color: #e2e8f0; padding: 16px; }
.app { display: grid; gap: 12px; }
.zona-card { background: #1e293b; border-radius: 12px; padding: 16px; }
h3 { font-size: 0.82rem; color: #a78bfa; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; }
.zona { background: #0f172a; border: 2px dashed #334155; border-radius: 10px; padding: 16px; min-height: 80px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 0.9rem; color: #64748b; cursor: pointer; transition: border-color 0.2s, background 0.2s; position: relative; overflow: hidden; user-select: none; }
.zona:hover { border-color: #38bdf8; }
.zona.flash-click  { background: rgba(56,189,248,0.12); border-color: #38bdf8; }
.zona.flash-dbl    { background: rgba(167,139,250,0.15); border-color: #a78bfa; }
.zona.flash-ctx    { background: rgba(251,191,36,0.12); border-color: #fbbf24; }
.zona.hovering     { background: rgba(52,211,153,0.08); border-color: #34d399; }
#clicks-msg { pointer-events: none; font-weight: 600; }
/* Ripple */
.ripple { position: absolute; border-radius: 50%; transform: scale(0); animation: rippleAnim 0.5s ease-out forwards; pointer-events: none; }
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }
.contadores { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.contadores span { font-family: monospace; font-size: 12px; color: #64748b; background: #0f172a; padding: 4px 10px; border-radius: 6px; }
.contadores b { color: #38bdf8; }
/* Enter/Leave */
.zona-enter { flex-direction: column; gap: 10px; min-height: 100px; }
.hijo { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 8px 20px; font-size: 0.8rem; color: #94a3b8; pointer-events: none; }
/* Move */
.zona-move { cursor: none; min-height: 100px; position: relative; }
#move-dot { position: absolute; width: 16px; height: 16px; background: #38bdf8; border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; transition: opacity 0.3s; opacity: 0; box-shadow: 0 0 12px #38bdf8; }
#move-coords { font-family: monospace; font-size: 13px; color: #38bdf8; pointer-events: none; }
/* Log */
#log { background: #020609; border-radius: 10px; overflow: hidden; max-height: 130px; }
.log-head { font-family: monospace; font-size: 10px; letter-spacing: 1px; color: #334155; padding: 7px 14px; border-bottom: 1px solid #0d1117; text-transform: uppercase; }
#log-body { overflow-y: auto; max-height: 100px; padding: 6px 14px; }
.ll { font-family: monospace; font-size: 11px; line-height: 1.9; border-bottom: 1px solid #0d1117; }
.lc { color: #38bdf8; } .ld { color: #a78bfa; } .lx { color: #fbbf24; } .le { color: #34d399; } .lm { color: #fb923c; }
      

        // ── UTILIDAD: log de eventos ──
const logBody = document.getElementById('log-body');
function log(cls, msg) {
  const d = document.createElement('div');
  d.className = `ll ${cls}`;
  d.textContent = msg;
  logBody.prepend(d);
  if (logBody.children.length > 25) logBody.lastChild.remove();
}

// ══════════════════════════════
// EVENTOS: click · dblclick · contextmenu
// ══════════════════════════════
const zonaClicks = document.getElementById('zona-clicks');
const msg = document.getElementById('clicks-msg');
const rippleCont = document.getElementById('ripple-cont');
let cClick = 0, cDbl = 0, cCtx = 0;

function crearRipple(e, color) {
  const r = document.createElement('div');
  r.className = 'ripple';
  const rect = zonaClicks.getBoundingClientRect();
  const size = 60;
  r.style.cssText = `width:${size}px;height:${size}px;left:${e.clientX - rect.left - size/2}px;top:${e.clientY - rect.top - size/2}px;background:${color}44;`;
  rippleCont.appendChild(r);
  r.addEventListener('animationend', () => r.remove());
}

// click → se dispara con cada clic izquierdo
zonaClicks.addEventListener('click', (e) => {
  document.getElementById('cnt-click').textContent = ++cClick;
  msg.textContent = `click #${cClick} en (${e.offsetX}, ${e.offsetY}) · button: ${e.button}`;
  crearRipple(e, '#38bdf8');
  zonaClicks.classList.add('flash-click');
  setTimeout(() => zonaClicks.classList.remove('flash-click'), 300);
  log('lc', `[click] offsetX:${e.offsetX} offsetY:${e.offsetY} button:${e.button}`);
});

// dblclick → dos clics rápidos (también dispara dos 'click')
zonaClicks.addEventListener('dblclick', (e) => {
  document.getElementById('cnt-dbl').textContent = ++cDbl;
  msg.textContent = `¡dblclick #${cDbl}! 🎉`;
  crearRipple(e, '#a78bfa');
  zonaClicks.classList.add('flash-dbl');
  setTimeout(() => zonaClicks.classList.remove('flash-dbl'), 400);
  log('ld', `[dblclick] ¡doble clic #${cDbl}!`);
});

// contextmenu → clic derecho del mouse
zonaClicks.addEventListener('contextmenu', (e) => {
  e.preventDefault(); // ← evitar que aparezca el menú del navegador
  document.getElementById('cnt-ctx').textContent = ++cCtx;
  msg.textContent = `contextmenu bloqueado 🚫 (clic derecho #${cCtx})`;
  crearRipple(e, '#fbbf24');
  zonaClicks.classList.add('flash-ctx');
  setTimeout(() => zonaClicks.classList.remove('flash-ctx'), 400);
  log('lx', `[contextmenu] preventDefault() → menú nativo bloqueado`);
});

// ══════════════════════════════
// EVENTOS: mouseenter · mouseleave
// (No se propagan — NO suben al padre cuando entras a un hijo)
// ══════════════════════════════
const zonaEnter = document.getElementById('zona-enter');
let cEnter = 0, cLeave = 0;

// mouseenter: solo se dispara al entrar al padre, no al hijo
zonaEnter.addEventListener('mouseenter', () => {
  document.getElementById('cnt-enter').textContent = ++cEnter;
  zonaEnter.classList.add('hovering');
  log('le', `[mouseenter] cursor entró al padre (no al hijo)`);
});

// mouseleave: solo se dispara al salir del padre completamente
zonaEnter.addEventListener('mouseleave', () => {
  document.getElementById('cnt-leave').textContent = ++cLeave;
  zonaEnter.classList.remove('hovering');
  log('le', `[mouseleave] cursor salió del padre`);
});

// ══════════════════════════════
// EVENTOS: mousemove — posición en tiempo real
// ══════════════════════════════
const zonaMove = document.getElementById('zona-move');
const dot = document.getElementById('move-dot');
const coords = document.getElementById('move-coords');
let lastMove = 0;

zonaMove.addEventListener('mousemove', (e) => {
  // Mover el punto
  dot.style.left = e.offsetX + 'px';
  dot.style.top  = e.offsetY + 'px';
  dot.style.opacity = '1';
  coords.textContent = `offsetX: ${e.offsetX}  offsetY: ${e.offsetY}  |  clientX: ${e.clientX}  clientY: ${e.clientY}`;

  // Throttle el log (máximo 1 entrada cada 150ms)
  const now = Date.now();
  if (now - lastMove > 150) {
    log('lm', `[mousemove] offset(${e.offsetX}, ${e.offsetY})  client(${e.clientX}, ${e.clientY})`);
    lastMove = now;
  }
});

zonaMove.addEventListener('mouseleave', () => {
  dot.style.opacity = '0';
  coords.textContent = 'Mueve el mouse aquí 🖱️';
});
      

Vista previa — interactúa con cada zona

// Lección 07b

Eventos de Teclado

Hay tres eventos de teclado principales. keydown y keyup funcionan con cualquier tecla. input es el más confiable para capturar cambios en campos de texto.

keydown

Se dispara al presionar la tecla. Se repite si la mantienes. Detecta teclas especiales (Ctrl, Alt, Escape...).

keyup

Se dispara al soltar la tecla. Solo una vez por pulsación.

input

Se dispara cuando el valor del campo cambia. El más útil para formularios en tiempo real.

change

Se dispara al perder el foco si el valor cambió. Para selects y checkboxes es el evento correcto.

e.key

La tecla presionada: "a", "Enter", "ArrowLeft", "Escape", " " (espacio)...

e.ctrlKey / e.shiftKey / e.altKey

Booleanos que indican si esa tecla modificadora estaba presionada al mismo tiempo.

Escribe en el campo, presiona atajos de teclado (Ctrl+S, Escape, flechas) y observa cómo cada evento se comporta distinto.

Ejemplo 07b — Eventos de Teclado

        <div class="app">

  <!-- Campo principal -->
  <div class="card">
    <label>Campo de texto — prueba escribir y atajos de teclado:</label>
    <input id="campo" type="text" placeholder="Escribe aquí..." autocomplete="off">
    <div class="badges" id="badges"></div>
  </div>

  <!-- Teclado visual -->
  <div class="card">
    <label>Tecla activa:</label>
    <div id="key-display">—</div>
    <div class="mod-row">
      <div class="mod" id="mod-ctrl">Ctrl</div>
      <div class="mod" id="mod-shift">Shift</div>
      <div class="mod" id="mod-alt">Alt</div>
      <div class="mod" id="mod-meta">Meta/Cmd</div>
    </div>
  </div>

  <!-- Select con change -->
  <div class="card">
    <label>Select — evento <b>change</b> (solo al cambiar):</label>
    <select id="mi-select">
      <option>JavaScript</option>
      <option>Python</option>
      <option>Rust</option>
      <option>Go</option>
    </select>
    <p id="select-echo"></p>
  </div>

  <!-- Atajos detectados -->
  <div class="card">
    <label>Atajos detectados:</label>
    <div id="atajos-log">Prueba: Ctrl+S · Ctrl+Z · Escape · ArrowUp/Down</div>
  </div>

  <div id="log"><div class="log-head">📡 Event Log</div><div id="log-body"></div></div>
</div>
      

        * { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: sans-serif; background: #0a0f1a; color: #e2e8f0; padding: 16px; }
.app { display: grid; gap: 12px; }
.card { background: #1e293b; border-radius: 12px; padding: 16px; }
label { font-size: 0.8rem; color: #64748b; display: block; margin-bottom: 8px; }
label b { color: #fbbf24; }
input, select { width: 100%; background: #0f172a; border: 2px solid #334155; color: #e2e8f0; padding: 10px 14px; border-radius: 8px; font-size: 14px; font-family: inherit; outline: none; transition: border-color 0.2s; }
input:focus { border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(167,139,250,0.15); }
/* Badges de teclas */
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; min-height: 28px; }
.badge { background: #0f172a; border: 1px solid #334155; color: #94a3b8; font-family: monospace; font-size: 11px; padding: 3px 10px; border-radius: 20px; animation: pop 0.2s ease; }
@keyframes pop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* Key display */
#key-display { background: #0f172a; border: 2px solid #a78bfa; border-radius: 10px; padding: 16px; text-align: center; font-family: monospace; font-size: 1.6rem; color: #a78bfa; min-height: 60px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; transition: all 0.1s; }
#key-display.flash { background: rgba(167,139,250,0.15); }
.mod-row { display: flex; gap: 8px; }
.mod { flex: 1; background: #0f172a; border: 1px solid #1e293b; border-radius: 6px; padding: 6px; text-align: center; font-family: monospace; font-size: 11px; color: #334155; transition: all 0.1s; }
.mod.active { background: rgba(251,191,36,0.15); border-color: #fbbf24; color: #fbbf24; }
/* Select */
select { cursor: pointer; }
#select-echo { font-family: monospace; font-size: 13px; color: #34d399; margin-top: 8px; }
/* Atajos */
#atajos-log { font-family: monospace; font-size: 13px; color: #fb923c; background: #0f172a; border-radius: 8px; padding: 12px; min-height: 40px; }
/* Log */
#log { background: #020609; border-radius: 10px; overflow: hidden; max-height: 120px; }
.log-head { font-family: monospace; font-size: 10px; letter-spacing: 1px; color: #334155; padding: 7px 14px; border-bottom: 1px solid #0d1117; text-transform: uppercase; }
#log-body { overflow-y: auto; max-height: 90px; padding: 6px 14px; }
.ll { font-family: monospace; font-size: 11px; line-height: 1.9; border-bottom: 1px solid #0a0f1a; }
.lkd { color: #a78bfa; } .lku { color: #c4b5fd; } .lin { color: #38bdf8; } .lch { color: #34d399; } .lat { color: #fb923c; }
      

        const campo = document.getElementById('campo');
const keyDisplay = document.getElementById('key-display');
const badges = document.getElementById('badges');
const atajosLog = document.getElementById('atajos-log');
const logBody = document.getElementById('log-body');

function log(cls, msg) {
  const d = document.createElement('div');
  d.className = `ll ${cls}`;
  d.textContent = msg;
  logBody.prepend(d);
  if (logBody.children.length > 30) logBody.lastChild.remove();
}

// ── keydown ──
// Se dispara al PRESIONAR. Detecta teclas especiales y combinaciones.
campo.addEventListener('keydown', (e) => {
  // Mostrar tecla visual
  keyDisplay.textContent = e.key === ' ' ? '(espacio)' : e.key;
  keyDisplay.classList.add('flash');
  setTimeout(() => keyDisplay.classList.remove('flash'), 100);

  // Mostrar modificadores activos
  document.getElementById('mod-ctrl').classList.toggle('active', e.ctrlKey);
  document.getElementById('mod-shift').classList.toggle('active', e.shiftKey);
  document.getElementById('mod-alt').classList.toggle('active', e.altKey);
  document.getElementById('mod-meta').classList.toggle('active', e.metaKey);

  log('lkd', `[keydown] key:"${e.key}" code:"${e.code}" ctrl:${e.ctrlKey} shift:${e.shiftKey}`);

  // Detectar atajos de teclado
  if (e.ctrlKey && e.key === 's') {
    e.preventDefault(); // evitar guardar la página
    atajosLog.textContent = '💾 Ctrl+S detectado → guardado simulado';
    atajosLog.style.color = '#34d399';
    log('lat', '[atajo] Ctrl+S → preventDefault() aplicado');
  } else if (e.ctrlKey && e.key === 'z') {
    atajosLog.textContent = '↩️ Ctrl+Z detectado → deshacer simulado';
    atajosLog.style.color = '#38bdf8';
    log('lat', '[atajo] Ctrl+Z detectado');
  } else if (e.key === 'Escape') {
    campo.value = '';
    badges.innerHTML = '';
    atajosLog.textContent = '🧹 Escape → campo limpiado';
    atajosLog.style.color = '#f87171';
    log('lat', '[atajo] Escape → campo limpiado');
  } else if (e.key === 'ArrowUp') {
    atajosLog.textContent = '⬆️ ArrowUp presionado';
    atajosLog.style.color = '#fbbf24';
  } else if (e.key === 'ArrowDown') {
    atajosLog.textContent = '⬇️ ArrowDown presionado';
    atajosLog.style.color = '#fbbf24';
  }
});

// ── keyup ──
// Se dispara al SOLTAR. Solo una vez, no se repite.
campo.addEventListener('keyup', (e) => {
  // Apagar modificadores al soltar
  document.getElementById('mod-ctrl').classList.toggle('active', e.ctrlKey);
  document.getElementById('mod-shift').classList.toggle('active', e.shiftKey);
  document.getElementById('mod-alt').classList.toggle('active', e.altKey);
  log('lku', `[keyup] key:"${e.key}" → tecla soltada`);
});

// ── input ──
// Se dispara cada vez que el VALOR cambia (pegado, voz, tipeo).
// Es más confiable que keydown para capturar lo que escribe el usuario.
campo.addEventListener('input', (e) => {
  const val = e.target.value;
  log('lin', `[input] value:"${val}" length:${val.length}`);

  // Crear badges visuales por cada palabra
  const palabras = val.trim().split(/\s+/).filter(Boolean);
  badges.innerHTML = '';
  palabras.forEach(p => {
    const b = document.createElement('span');
    b.className = 'badge';
    b.textContent = p;
    badges.appendChild(b);
  });
});

// ── change ──
// En selects y checkboxes: se dispara al cambiar la selección.
document.getElementById('mi-select').addEventListener('change', (e) => {
  document.getElementById('select-echo').textContent =
    `[change] Seleccionaste: "${e.target.value}" (índice ${e.target.selectedIndex})`;
  log('lch', `[change] select → "${e.target.value}"`);
});
      

Vista previa — escribe, presiona atajos y cambia el select

// Lección 07c

Eventos de Formulario

Los formularios tienen su propio set de eventos. El más importante es submit, que se dispara al enviar. focus y blur controlan cuándo un campo gana o pierde el foco.

submit

El form fue enviado. Siempre usa e.preventDefault() para manejarlo con JS.

focus

El campo ganó el foco (el usuario hizo clic o llegó con Tab). No hace bubble.

blur

El campo perdió el foco. Ideal para validar cuando el usuario sale del campo.

focusin / focusout

Como focus/blur pero SÍ hacen bubble. Útiles con delegación.

reset

El formulario fue reiniciado (botón reset o llamada a form.reset()).

invalid

Un campo falló la validación HTML5. Permite personalizar el mensaje de error.

Completa el formulario, intenta enviarlo vacío, llena los campos y observa la validación en tiempo real con blur.

Ejemplo 07c — Eventos de Formulario

        <div class="app">
  <form id="mi-form" novalidate>
    <h2>Registro de Usuario</h2>

    <div class="field" id="field-nombre">
      <label for="nombre">Nombre completo <span class="req">*</span></label>
      <input id="nombre" type="text" placeholder="Tu nombre..." autocomplete="off">
      <div class="field-msg"></div>
    </div>

    <div class="field" id="field-email">
      <label for="email">Correo electrónico <span class="req">*</span></label>
      <input id="email" type="email" placeholder="correo@ejemplo.com" autocomplete="off">
      <div class="field-msg"></div>
    </div>

    <div class="field" id="field-pass">
      <label for="pass">Contraseña <span class="req">*</span></label>
      <input id="pass" type="password" placeholder="Mínimo 6 caracteres...">
      <div class="field-msg"></div>
      <div class="strength-bar"><div id="strength-fill"></div></div>
      <div id="strength-label"></div>
    </div>

    <div class="btn-row">
      <button type="submit">Crear cuenta</button>
      <button type="reset">Limpiar</button>
    </div>
  </form>

  <div id="resultado"></div>
  <div id="log"><div class="log-head">📡 Event Log</div><div id="log-body"></div></div>
</div>
      

        * { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: sans-serif; background: #0a0f1a; color: #e2e8f0; padding: 16px; }
.app { display: grid; gap: 12px; max-width: 420px; }
form { background: #1e293b; border-radius: 14px; padding: 24px; display: grid; gap: 16px; }
h2 { color: #fff; font-size: 1.1rem; text-align: center; }
.field { display: grid; gap: 6px; }
label { font-size: 0.8rem; color: #94a3b8; }
.req { color: #f87171; }
input { background: #0f172a; border: 2px solid #334155; color: #e2e8f0; padding: 10px 14px; border-radius: 8px; font-size: 14px; font-family: inherit; outline: none; transition: all 0.2s; width: 100%; }
input:focus { border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,0.1); }
input.valid   { border-color: #34d399; }
input.invalid { border-color: #f87171; }
.field-msg { font-size: 0.75rem; min-height: 16px; transition: color 0.2s; }
.field-msg.ok  { color: #34d399; }
.field-msg.err { color: #f87171; }
/* Strength bar */
.strength-bar { height: 4px; background: #334155; border-radius: 2px; overflow: hidden; margin-top: 4px; }
#strength-fill { height: 100%; width: 0; border-radius: 2px; transition: width 0.3s, background 0.3s; }
#strength-label { font-size: 11px; color: #64748b; }
.btn-row { display: flex; gap: 10px; }
button[type=submit] { flex: 1; background: #38bdf8; color: #000; font-weight: 700; border: none; padding: 12px; border-radius: 8px; cursor: pointer; font-size: 14px; transition: all 0.2s; }
button[type=submit]:hover { background: #7dd3fc; }
button[type=reset]  { background: #334155; color: #94a3b8; border: none; padding: 12px 20px; border-radius: 8px; cursor: pointer; font-size: 14px; transition: all 0.2s; }
button[type=reset]:hover  { background: #475569; }
#resultado { background: #1e293b; border-radius: 10px; padding: 16px; font-family: monospace; font-size: 13px; display: none; }
#resultado.show { display: block; }
#resultado h3 { color: #34d399; margin-bottom: 8px; }
#resultado pre { color: #94a3b8; white-space: pre-wrap; }
#log { background: #020609; border-radius: 10px; overflow: hidden; max-height: 110px; }
.log-head { font-family: monospace; font-size: 10px; letter-spacing: 1px; color: #334155; padding: 7px 14px; border-bottom: 1px solid #0d1117; text-transform: uppercase; }
#log-body { overflow-y: auto; max-height: 80px; padding: 6px 14px; }
.ll { font-family: monospace; font-size: 11px; line-height: 1.9; border-bottom: 1px solid #0a0f1a; }
.lf { color: #fb923c; } .lb { color: #fbbf24; } .ls { color: #34d399; } .lr { color: #f87171; } .li { color: #a78bfa; }
      

        const form = document.getElementById('mi-form');
const logBody = document.getElementById('log-body');

function log(cls, msg) {
  const d = document.createElement('div');
  d.className = `ll ${cls}`;
  d.textContent = msg;
  logBody.prepend(d);
  if (logBody.children.length > 30) logBody.lastChild.remove();
}

// ── Validación por campo ──
function validarNombre(v) {
  if (!v.trim()) return { ok: false, msg: '⛔ El nombre no puede estar vacío' };
  if (v.trim().length < 3) return { ok: false, msg: '⛔ Mínimo 3 caracteres' };
  return { ok: true, msg: '✓ Nombre válido' };
}

function validarEmail(v) {
  const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!v) return { ok: false, msg: '⛔ El correo es obligatorio' };
  if (!re.test(v)) return { ok: false, msg: '⛔ Formato inválido (ej: usuario@email.com)' };
  return { ok: true, msg: '✓ Correo válido' };
}

function validarPass(v) {
  if (!v) return { ok: false, msg: '⛔ La contraseña es obligatoria' };
  if (v.length < 6) return { ok: false, msg: `⛔ Faltan ${6 - v.length} caracteres` };
  return { ok: true, msg: '✓ Contraseña aceptada' };
}

function setFieldState(fieldId, inputId, resultado) {
  const input = document.getElementById(inputId);
  const msg = document.querySelector(`#${fieldId} .field-msg`);
  input.className = resultado.ok ? 'valid' : 'invalid';
  msg.textContent = resultado.msg;
  msg.className = `field-msg ${resultado.ok ? 'ok' : 'err'}`;
}

// ── focus ──
// Se dispara cuando el campo GANA el foco
document.querySelectorAll('input').forEach(inp => {
  inp.addEventListener('focus', (e) => {
    log('lf', `[focus] #${e.target.id} → ganó el foco`);
  });
});

// ── blur ──
// Se dispara cuando el campo PIERDE el foco → ideal para validar
document.getElementById('nombre').addEventListener('blur', (e) => {
  const r = validarNombre(e.target.value);
  setFieldState('field-nombre', 'nombre', r);
  log('lb', `[blur] #nombre → ${r.ok ? 'válido ✓' : 'inválido ✗'}`);
});

document.getElementById('email').addEventListener('blur', (e) => {
  const r = validarEmail(e.target.value);
  setFieldState('field-email', 'email', r);
  log('lb', `[blur] #email → ${r.ok ? 'válido ✓' : 'inválido ✗'}`);
});

// ── input en contraseña — fuerza en tiempo real ──
document.getElementById('pass').addEventListener('input', (e) => {
  const v = e.target.value;
  const fill = document.getElementById('strength-fill');
  const label = document.getElementById('strength-label');
  let fuerza = 0;
  if (v.length >= 6) fuerza++;
  if (/[A-Z]/.test(v)) fuerza++;
  if (/[0-9]/.test(v)) fuerza++;
  if (/[^a-zA-Z0-9]/.test(v)) fuerza++;
  const niveles = ['', 'Muy débil', 'Débil', 'Media', 'Fuerte'];
  const colores = ['', '#f87171', '#fbbf24', '#38bdf8', '#34d399'];
  fill.style.width = (fuerza * 25) + '%';
  fill.style.background = colores[fuerza] || '#334155';
  label.textContent = fuerza > 0 ? `Contraseña: ${niveles[fuerza]}` : '';
  label.style.color = colores[fuerza] || '#64748b';
  log('li', `[input] #pass → length:${v.length} fuerza:${fuerza}/4`);
});

document.getElementById('pass').addEventListener('blur', (e) => {
  const r = validarPass(e.target.value);
  setFieldState('field-pass', 'pass', r);
  log('lb', `[blur] #pass → ${r.ok ? 'válido ✓' : 'inválido ✗'}`);
});

// ── submit ──
// Se dispara al enviar el formulario (botón submit o Enter en un campo)
form.addEventListener('submit', (e) => {
  e.preventDefault(); // SIEMPRE para manejar el envío con JS

  const rN = validarNombre(document.getElementById('nombre').value);
  const rE = validarEmail(document.getElementById('email').value);
  const rP = validarPass(document.getElementById('pass').value);

  setFieldState('field-nombre', 'nombre', rN);
  setFieldState('field-email', 'email', rE);
  setFieldState('field-pass', 'pass', rP);

  if (rN.ok && rE.ok && rP.ok) {
    const data = {
      nombre: document.getElementById('nombre').value,
      email: document.getElementById('email').value,
      password: '••••••'
    };
    const res = document.getElementById('resultado');
    res.classList.add('show');
    res.innerHTML = `<h3>✅ submit exitoso — datos capturados:</h3><pre>${JSON.stringify(data, null, 2)}</pre>`;
    log('ls', `[submit] ✅ formulario válido → datos procesados`);
  } else {
    log('lr', `[submit] ✗ formulario inválido → corrige los errores`);
  }
});

// ── reset ──
// Se dispara al hacer clic en botón reset o llamar form.reset()
form.addEventListener('reset', () => {
  document.querySelectorAll('input').forEach(i => { i.className = ''; });
  document.querySelectorAll('.field-msg').forEach(m => { m.textContent = ''; m.className = 'field-msg'; });
  document.getElementById('strength-fill').style.width = '0';
  document.getElementById('strength-label').textContent = '';
  document.getElementById('resultado').classList.remove('show');
  log('lr', `[reset] formulario reiniciado`);
});
      

Vista previa — completa el formulario y observa cada evento

// Lección 07d

Eventos de Scroll y Resize

scroll se dispara cada vez que el usuario desplaza la página o un elemento. resize se dispara cuando cambia el tamaño de la ventana. Ambos pueden dispararse cientos de veces por segundo — usa throttle para controlar el rendimiento.

scroll

Desplazamiento en window o en cualquier elemento con overflow: auto/scroll. Usa scrollY para la posición.

scrollend

Se dispara cuando el scroll termina. Más eficiente que throttle en casos simples (Chrome 114+).

resize

Solo en window. Usa window.innerWidth/innerHeight para las dimensiones.

IntersectionObserver

API moderna para detectar si un elemento es visible en pantalla. Más eficiente que scroll + getBoundingClientRect.

Desplázate dentro del contenedor, observa el throttle y el IntersectionObserver. Cambia el tamaño de la ventana del preview.

Ejemplo 07d — Scroll, Resize e IntersectionObserver

        <div class="app">

  <!-- HUD fijo con datos de scroll/resize -->
  <div class="hud" id="hud">
    <div class="hud-item">scrollTop: <b id="val-scroll">0</b>px</div>
    <div class="hud-item">ventana: <b id="val-size"></b></div>
    <div class="hud-item">disparos raw: <b id="val-raw">0</b></div>
    <div class="hud-item">disparos throttled: <b id="val-thr">0</b></div>
  </div>

  <!-- Barra de progreso de scroll -->
  <div class="progress-track">
    <div id="progress-bar"></div>
  </div>

  <!-- Contenedor scrollable -->
  <div class="scroll-box" id="scroll-box">

    <!-- Tarjetas observadas por IntersectionObserver -->
    <div class="io-card" data-label="Tarjeta A">
      <div class="io-dot"></div>
      <span>Tarjeta A — observada</span>
    </div>
    <div class="io-card" data-label="Tarjeta B">
      <div class="io-dot"></div>
      <span>Tarjeta B — observada</span>
    </div>
    <div class="io-card" data-label="Tarjeta C">
      <div class="io-dot"></div>
      <span>Tarjeta C — observada</span>
    </div>
    <div class="io-card" data-label="Tarjeta D">
      <div class="io-dot"></div>
      <span>Tarjeta D — observada</span>
    </div>
    <div class="io-card" data-label="Tarjeta E">
      <div class="io-dot"></div>
      <span>Tarjeta E — observada</span>
    </div>
  </div>

  <div id="io-status">IntersectionObserver: desplázate para ver las tarjetas</div>
  <div id="log"><div class="log-head">📡 Event Log</div><div id="log-body"></div></div>
</div>
      

        * { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: sans-serif; background: #0a0f1a; color: #e2e8f0; padding: 16px; }
.app { display: grid; gap: 12px; }
/* HUD */
.hud { background: #1e293b; border-radius: 10px; padding: 12px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hud-item { font-family: monospace; font-size: 12px; color: #64748b; }
.hud-item b { color: #38bdf8; }
/* Progress */
.progress-track { height: 4px; background: #1e293b; border-radius: 2px; overflow: hidden; }
#progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, #38bdf8, #a78bfa); transition: width 0.05s; }
/* Scroll box */
.scroll-box { background: #1e293b; border-radius: 12px; height: 220px; overflow-y: auto; padding: 12px; display: grid; gap: 10px; scroll-behavior: smooth; }
.io-card { background: #0f172a; border: 2px solid #334155; border-radius: 10px; padding: 20px; display: flex; align-items: center; gap: 12px; transition: all 0.4s; }
.io-card.visible { border-color: #34d399; background: rgba(52,211,153,0.05); }
.io-dot { width: 12px; height: 12px; border-radius: 50%; background: #334155; flex-shrink: 0; transition: background 0.3s; }
.io-card.visible .io-dot { background: #34d399; box-shadow: 0 0 8px #34d399; }
.io-card span { font-size: 0.9rem; color: #64748b; }
.io-card.visible span { color: #e2e8f0; }
/* IO Status */
#io-status { font-family: monospace; font-size: 12px; color: #34d399; background: #0f172a; border-radius: 8px; padding: 10px 14px; min-height: 36px; }
/* Log */
#log { background: #020609; border-radius: 10px; overflow: hidden; max-height: 110px; }
.log-head { font-family: monospace; font-size: 10px; letter-spacing: 1px; color: #334155; padding: 7px 14px; border-bottom: 1px solid #0d1117; text-transform: uppercase; }
#log-body { overflow-y: auto; max-height: 80px; padding: 6px 14px; }
.ll { font-family: monospace; font-size: 11px; line-height: 1.9; border-bottom: 1px solid #0a0f1a; }
.ls { color: #38bdf8; } .lr { color: #f87171; } .lio { color: #34d399; } .lrz { color: #a78bfa; }
      

        const logBody = document.getElementById('log-body');
function log(cls, msg) {
  const d = document.createElement('div'); d.className = `ll ${cls}`; d.textContent = msg;
  logBody.prepend(d); if (logBody.children.length > 25) logBody.lastChild.remove();
}

// ── Inicializar HUD ──
const valSize = document.getElementById('val-size');
valSize.textContent = `${window.innerWidth}×${window.innerHeight}`;

// ══════════════════════════════
// EVENTO: scroll — en el contenedor
// ══════════════════════════════
const scrollBox = document.getElementById('scroll-box');
const progressBar = document.getElementById('progress-bar');
const valScroll = document.getElementById('val-scroll');
const valRaw = document.getElementById('val-raw');
const valThr = document.getElementById('val-thr');
let rawCount = 0, thrCount = 0, lastScroll = 0;

scrollBox.addEventListener('scroll', (e) => {
  const el = e.target;
  rawCount++;
  valRaw.textContent = rawCount;
  valScroll.textContent = Math.round(el.scrollTop);

  // Barra de progreso
  const maxScroll = el.scrollHeight - el.clientHeight;
  const pct = maxScroll > 0 ? (el.scrollTop / maxScroll) * 100 : 0;
  progressBar.style.width = pct.toFixed(1) + '%';

  // ── THROTTLE: limitar la frecuencia de procesamiento pesado ──
  const now = Date.now();
  if (now - lastScroll > 100) { // máximo cada 100ms
    thrCount++;
    valThr.textContent = thrCount;
    log('ls', `[scroll] scrollTop:${Math.round(el.scrollTop)}px progress:${pct.toFixed(0)}% (throttled #${thrCount})`);
    lastScroll = now;
  }
});

// ══════════════════════════════
// EVENTO: resize — en window
// ══════════════════════════════
let resizeLast = 0;
window.addEventListener('resize', () => {
  const now = Date.now();
  if (now - resizeLast > 150) {
    valSize.textContent = `${window.innerWidth}×${window.innerHeight}`;
    log('lrz', `[resize] ${window.innerWidth}×${window.innerHeight}px`);
    resizeLast = now;
  }
});

// ══════════════════════════════
// IntersectionObserver
// Detecta si un elemento es visible en el viewport — SIN eventos de scroll
// ══════════════════════════════
const ioStatus = document.getElementById('io-status');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    const label = entry.target.dataset.label;
    if (entry.isIntersecting) {
      // El elemento ENTRÓ al área visible
      entry.target.classList.add('visible');
      ioStatus.textContent = `👁️ ${label} es visible (intersectionRatio: ${entry.intersectionRatio.toFixed(2)})`;
      log('lio', `[IntersectionObserver] ${label} → visible ✓ ratio:${entry.intersectionRatio.toFixed(2)}`);
    } else {
      // El elemento SALIÓ del área visible
      entry.target.classList.remove('visible');
      log('lio', `[IntersectionObserver] ${label} → oculta`);
    }
  });
}, {
  root: scrollBox,      // el contenedor scrollable (null = viewport)
  threshold: 0.5        // se dispara cuando el 50% del elemento es visible
});

// Observar todas las tarjetas
document.querySelectorAll('.io-card').forEach(card => observer.observe(card));
      

Vista previa — desplázate dentro del contenedor y redimensiona

// Lección 07e

Drag & Drop

La API de Drag & Drop nativa del DOM permite arrastrar y soltar elementos entre zonas. El atributo HTML draggable="true" activa el comportamiento, y el objeto DataTransfer transfiere datos entre el elemento arrastrado y la zona de destino.

dragstart

Se dispara en el elemento que empieza a arrastrarse. Aquí guardas los datos en dataTransfer.

dragend

Se dispara cuando el arrastre termina, independientemente de si fue exitoso.

dragover

Se dispara constantemente sobre la zona de destino. Debes llamar preventDefault() para permitir el drop.

dragenter / dragleave

El elemento arrastrado entró o salió de una zona de destino.

drop

El elemento fue soltado en la zona. Aquí lees los datos con dataTransfer.getData().

dataTransfer

Objeto que transfiere datos. setData(tipo, valor) guarda, getData(tipo) recupera.

Arrastra las tarjetas de "Disponibles" a "En Progreso" o "Completado". Observa cada evento en el log.

Ejemplo 07e — Drag & Drop API

        <div class="board">

  <!-- COLUMNA: Disponibles -->
  <div class="column" id="col-todo" data-col="todo">
    <div class="col-header todo">📋 Disponibles</div>
    <div class="drop-zone" id="zone-todo">

      <div class="card-item" id="card-1" draggable="true" data-id="1">
        <span class="card-emoji">⚡</span>
        <span>Aprender eventos DOM</span>
      </div>

      <div class="card-item" id="card-2" draggable="true" data-id="2">
        <span class="card-emoji">🎯</span>
        <span>Practicar drag & drop</span>
      </div>

      <div class="card-item" id="card-3" draggable="true" data-id="3">
        <span class="card-emoji">🚀</span>
        <span>Construir un proyecto</span>
      </div>

    </div>
  </div>

  <!-- COLUMNA: En Progreso -->
  <div class="column" id="col-wip" data-col="wip">
    <div class="col-header wip">🔄 En Progreso</div>
    <div class="drop-zone" id="zone-wip"></div>
  </div>

  <!-- COLUMNA: Completado -->
  <div class="column" id="col-done" data-col="done">
    <div class="col-header done">✅ Completado</div>
    <div class="drop-zone" id="zone-done"></div>
  </div>

</div>

<div id="log"><div class="log-head">📡 Event Log — Drag & Drop</div><div id="log-body"></div></div>
      

        * { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: sans-serif; background: #0a0f1a; color: #e2e8f0; padding: 16px; }
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.column { background: #1e293b; border-radius: 12px; overflow: hidden; }
.col-header { padding: 12px 16px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.5px; }
.col-header.todo { background: rgba(56,189,248,0.1); color: #38bdf8; }
.col-header.wip  { background: rgba(251,191,36,0.1); color: #fbbf24; }
.col-header.done { background: rgba(52,211,153,0.1); color: #34d399; }
.drop-zone { padding: 10px; min-height: 150px; display: flex; flex-direction: column; gap: 8px; transition: background 0.2s; }
.drop-zone.drag-over { background: rgba(56,189,248,0.06); outline: 2px dashed rgba(56,189,248,0.3); outline-offset: -4px; border-radius: 8px; }
/* Cards */
.card-item { background: #0f172a; border: 1px solid #334155; border-radius: 9px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; cursor: grab; font-size: 0.85rem; transition: all 0.2s; user-select: none; }
.card-item:hover { border-color: #475569; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
.card-item.dragging { opacity: 0.3; transform: scale(0.97); cursor: grabbing; }
.card-item.dropped-todo { border-left: 3px solid #38bdf8; }
.card-item.dropped-wip  { border-left: 3px solid #fbbf24; }
.card-item.dropped-done { border-left: 3px solid #34d399; }
.card-emoji { font-size: 1.1rem; flex-shrink: 0; }
/* Log */
#log { background: #020609; border-radius: 10px; overflow: hidden; max-height: 120px; }
.log-head { font-family: monospace; font-size: 10px; letter-spacing: 1px; color: #334155; padding: 7px 14px; border-bottom: 1px solid #0d1117; text-transform: uppercase; }
#log-body { overflow-y: auto; max-height: 90px; padding: 6px 14px; }
.ll { font-family: monospace; font-size: 11px; line-height: 1.9; border-bottom: 1px solid #0a0f1a; }
.lds { color: #38bdf8; } .ldo { color: #a78bfa; } .lde { color: #34d399; } .ldr { color: #f87171; } .ldp { color: #fbbf24; }
      

        const logBody = document.getElementById('log-body');
function log(cls, msg) {
  const d = document.createElement('div'); d.className = `ll ${cls}`; d.textContent = msg;
  logBody.prepend(d); if (logBody.children.length > 30) logBody.lastChild.remove();
}

let draggedEl = null; // referencia al elemento que se está arrastrando

// ══════════════════════════════
// LISTENERS EN LAS TARJETAS (draggable)
// ══════════════════════════════

// Usamos delegación en el documento para cubrir tarjetas que se muevan
document.addEventListener('dragstart', (e) => {
  const card = e.target.closest('.card-item');
  if (!card) return;

  draggedEl = card;
  card.classList.add('dragging');

  // dataTransfer.setData → guardamos el ID de la tarjeta
  e.dataTransfer.setData('text/plain', card.id);
  e.dataTransfer.effectAllowed = 'move';

  log('lds', `[dragstart] "${card.querySelector('span:last-child').textContent}" → id:"${card.id}"`);
});

document.addEventListener('dragend', (e) => {
  const card = e.target.closest('.card-item');
  if (!card) return;
  card.classList.remove('dragging');
  draggedEl = null;
  log('ldr', `[dragend] arrastre finalizado → dropEffect:"${e.dataTransfer.dropEffect}"`);
});

// ══════════════════════════════
// LISTENERS EN LAS ZONAS DE DESTINO (drop zones)
// ══════════════════════════════
document.querySelectorAll('.drop-zone').forEach(zone => {

  // dragover → se dispara CONTINUAMENTE mientras el elemento está sobre la zona
  // OBLIGATORIO llamar preventDefault() para permitir el drop
  zone.addEventListener('dragover', (e) => {
    e.preventDefault(); // ← sin esto, el drop no funciona
    e.dataTransfer.dropEffect = 'move';
  });

  // dragenter → el elemento arrastrado ENTRÓ a esta zona
  zone.addEventListener('dragenter', (e) => {
    e.preventDefault();
    zone.classList.add('drag-over');
    const colName = zone.id.replace('zone-', '');
    log('ldo', `[dragenter] zona "${colName}" activada`);
  });

  // dragleave → el elemento arrastrado SALIÓ de esta zona
  zone.addEventListener('dragleave', (e) => {
    // Solo quitar si realmente salimos (no si entramos a un hijo)
    if (!zone.contains(e.relatedTarget)) {
      zone.classList.remove('drag-over');
      log('ldr', `[dragleave] salió de zona "${zone.id.replace('zone-','')}"`);
    }
  });

  // drop → el elemento FUE SOLTADO en esta zona
  zone.addEventListener('drop', (e) => {
    e.preventDefault();
    zone.classList.remove('drag-over');

    // Recuperamos el ID que guardamos en dragstart
    const cardId = e.dataTransfer.getData('text/plain');
    const card = document.getElementById(cardId);
    if (!card) return;

    // Mover el nodo al nuevo padre (lo quita del padre anterior automáticamente)
    zone.appendChild(card);

    // Actualizar estilo según columna
    card.className = 'card-item';
    const col = zone.id.replace('zone-', '');
    card.classList.add(`dropped-${col}`);

    const texto = card.querySelector('span:last-child').textContent;
    const colLabels = { todo: 'Disponibles', wip: 'En Progreso', done: 'Completado' };
    log('lde', `[drop] "${texto}" → movida a "${colLabels[col] || col}"`);
  });
});
      

Vista previa — arrastra las tarjetas entre columnas

// Lección 08

Delegación de Eventos

La delegación es una técnica que aprovecha el event bubbling: los eventos suben del hijo al padre. En vez de poner un listener en cada elemento, pones uno solo en el padre y usas event.target para saber quién disparó el evento.

Por qué es crucial: Si agregas elementos dinámicamente al DOM, los listeners directos no funcionan en ellos. La delegación sí, porque el listener está en el padre que ya existía.

Usa event.target.closest(selector) para encontrar el elemento contenedor correcto aunque el usuario haya hecho clic en un elemento hijo anidado.

Agrega ítems y elimínalos. Nota que todos funcionan con UN solo listener en el padre. Intenta comentar el listener y ver qué pasa.

Ejemplo 08 — event delegation

        <div class="app">
  <div class="add-row">
    <input id="nuevo" type="text" placeholder="Escribe y presiona Enter...">
    <button id="addBtn">Agregar</button>
  </div>

  <!-- UN solo listener se pone aquí, en este padre -->
  <ul id="lista">
    <li><span class="texto">🐍 Aprender Python</span><button class="del" data-action="del">✕</button></li>
    <li><span class="texto">🎨 Estudiar diseño UI</span><button class="del" data-action="del">✕</button></li>
    <li><span class="texto">🚀 Practicar el DOM</span><button class="del" data-action="del">✕</button></li>
  </ul>

  <div id="debug">Delegación activa: 1 listener cubre todos los ítems 👇</div>
</div>
      

        body { font-family: sans-serif; background: #0f172a; color: #e2e8f0; padding: 20px; }
.add-row { display: flex; gap: 8px; margin-bottom: 14px; }
input { flex: 1; background: #1e293b; border: 1px solid #334155; color: #e2e8f0; padding: 10px 14px; border-radius: 8px; font-family: inherit; font-size: 14px; outline: none; transition: border-color 0.2s; }
input:focus { border-color: #34d399; }
#addBtn { background: #34d399; color: #000; font-weight: 700; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
#addBtn:hover { background: #6ee7b7; }
ul { list-style: none; padding: 0; }
li { display: flex; align-items: center; justify-content: space-between; background: #1e293b; border: 1px solid #1e293b; border-radius: 8px; padding: 12px 16px; margin-bottom: 8px; transition: all 0.3s; animation: slideIn 0.25s ease; cursor: pointer; }
li:hover { border-color: #334155; background: #263142; }
li.completado .texto { text-decoration: line-through; color: #475569; }
.texto { flex: 1; font-size: 14px; }
.del { background: none; border: 1px solid rgba(248,113,113,0.3); color: #f87171; padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; transition: all 0.2s; }
.del:hover { background: #f87171; color: #000; }
@keyframes slideIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
#debug { font-family: monospace; font-size: 12px; color: #475569; text-align: center; margin-top: 12px; padding: 8px; border: 1px dashed #1e293b; border-radius: 8px; }
      

        const lista = document.getElementById('lista');
const input = document.getElementById('nuevo');
const debug = document.getElementById('debug');

// ✅ UN SOLO LISTENER en el padre — cubre todos los hijos, incluso los futuros
lista.addEventListener('click', (e) => {
  // e.target = el elemento exacto donde se hizo clic (podría ser un hijo interno)
  const item = e.target.closest('li'); // subir hasta el <li>
  if (!item) return;

  if (e.target.dataset.action === 'del') {
    // Clic en el botón de eliminar
    item.style.opacity = '0';
    item.style.transform = 'translateX(20px)';
    item.style.transition = 'all 0.25s';
    setTimeout(() => item.remove(), 250);
    debug.textContent = `DOM: item.remove() → elemento eliminado`;
  } else {
    // Clic en el texto → marcar como completado
    item.classList.toggle('completado');
    const hecho = item.classList.contains('completado');
    debug.textContent = `classList.toggle('completado') → ${hecho ? 'marcado ✓' : 'desmarcado'}`;
  }
});

// Agregar nuevos ítems
function agregar() {
  const texto = input.value.trim();
  if (!texto) return;

  const li = document.createElement('li');
  li.innerHTML = `<span class="texto">${texto}</span><button class="del" data-action="del">✕</button>`;
  lista.appendChild(li);
  input.value = '';
  debug.textContent = `Nuevo elemento creado — el listener del padre lo cubre automáticamente`;
}

document.getElementById('addBtn').addEventListener('click', agregar);
input.addEventListener('keydown', (e) => { if (e.key === 'Enter') agregar(); });
      

Vista previa — un listener, control total

// Lección 09 — Proyecto Final

Proyecto: Gestor de Tareas Completo

Este ejemplo integra todos los conceptos: selección, creación de nodos, manipulación de clases, atributos personalizados, eventos, delegación, y formularios. Lee cada parte del JS con calma — está comentado para que entiendas cada operación del DOM.

Tu reto: Modifica el proyecto. Agrega una fecha de vencimiento a cada tarea, o un campo de búsqueda que filtre las tarjetas usando querySelectorAll y classList.toggle.

Proyecto Final — Todo App con DOM puro

        <div class="app">
  <header class="app-header">
    <h1>📋 Mi Lista de Tareas</h1>
    <div id="stats">0 / 0</div>
  </header>

  <div class="input-row">
    <input id="taskText" type="text" placeholder="Nueva tarea...">
    <select id="taskPriority">
      <option value="alta">🔴 Alta</option>
      <option value="media" selected>🟡 Media</option>
      <option value="baja">🟢 Baja</option>
    </select>
    <button id="addTask">Agregar</button>
  </div>

  <div class="filters">
    <button class="f active" data-f="all">Todas</button>
    <button class="f" data-f="pending">Pendientes</button>
    <button class="f" data-f="done">Completadas</button>
  </div>

  <ul id="taskList"></ul>

  <div class="footer-bar">
    <span id="pendCount"></span>
    <button id="clearDone">Limpiar completadas</button>
  </div>
</div>
      

        * { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: sans-serif; background: #0a0f1a; min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; }
.app { width: 100%; max-width: 460px; }
.app-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
h1 { color: #e2e8f0; font-size: 1.2rem; }
#stats { font-family: monospace; font-size: 12px; background: #1e293b; color: #38bdf8; padding: 4px 12px; border-radius: 20px; }
.input-row { display: flex; gap: 8px; margin-bottom: 12px; }
input[type=text] { flex: 1; background: #1e293b; border: 1px solid #334155; color: #e2e8f0; padding: 10px 14px; border-radius: 8px; font-size: 14px; outline: none; transition: border-color 0.2s; }
input[type=text]:focus { border-color: #38bdf8; }
select { background: #1e293b; border: 1px solid #334155; color: #94a3b8; padding: 8px 10px; border-radius: 8px; font-size: 13px; outline: none; cursor: pointer; }
#addTask { background: #38bdf8; color: #000; font-weight: 700; border: none; padding: 10px 18px; border-radius: 8px; cursor: pointer; font-size: 13px; white-space: nowrap; transition: all 0.2s; }
#addTask:hover { background: #7dd3fc; }
.filters { display: flex; gap: 6px; margin-bottom: 14px; }
.f { background: none; border: 1px solid #334155; color: #64748b; padding: 6px 14px; border-radius: 20px; cursor: pointer; font-size: 12px; transition: all 0.2s; }
.f:hover, .f.active { background: rgba(56,189,248,0.1); border-color: #38bdf8; color: #38bdf8; }
ul { list-style: none; display: flex; flex-direction: column; gap: 8px; min-height: 80px; }
li { display: flex; align-items: center; gap: 10px; background: #1e293b; border-radius: 10px; padding: 12px 14px; border-left: 3px solid transparent; transition: all 0.2s; animation: inAnim 0.25s ease; }
li.alta { border-left-color: #f87171; }
li.media { border-left-color: #fbbf24; }
li.baja { border-left-color: #34d399; }
li.done { opacity: 0.5; }
li.hidden { display: none; }
@keyframes inAnim { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #334155; flex-shrink: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; background: none; }
.check.done-check { background: #34d399; border-color: #34d399; color: #000; font-size: 11px; font-weight: bold; }
.task-text { flex: 1; font-size: 14px; color: #e2e8f0; transition: all 0.2s; }
.done .task-text { text-decoration: line-through; color: #475569; }
.pri-badge { font-size: 10px; padding: 2px 8px; border-radius: 10px; }
.badge-alta { background: rgba(248,113,113,0.15); color: #f87171; }
.badge-media { background: rgba(251,191,36,0.15); color: #fbbf24; }
.badge-baja { background: rgba(52,211,153,0.15); color: #34d399; }
.del-btn { background: none; border: none; color: #475569; cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 4px; transition: color 0.2s; }
.del-btn:hover { color: #f87171; }
.footer-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 14px; border-top: 1px solid #1e293b; }
#pendCount { font-size: 12px; color: #475569; }
#clearDone { background: none; border: 1px solid #334155; color: #64748b; padding: 6px 14px; border-radius: 8px; cursor: pointer; font-size: 12px; transition: all 0.2s; }
#clearDone:hover { border-color: #f87171; color: #f87171; }
      

        // ── REFERENCIAS al DOM (Lección 03) ──
const taskText     = document.getElementById('taskText');
const taskPriority = document.getElementById('taskPriority');
const addTaskBtn   = document.getElementById('addTask');
const taskList     = document.getElementById('taskList');
const stats        = document.getElementById('stats');
const pendCount    = document.getElementById('pendCount');
const clearDone    = document.getElementById('clearDone');

let activeFilter = 'all';
let taskId = 0;

// ── CREAR UN NODO DE TAREA (Lección 06) ──
function crearItemDOM(id, texto, prioridad) {
  const li = document.createElement('li');
  // dataset: atributos personalizados para guardar datos
  li.dataset.id = id;
  li.dataset.done = 'false';
  li.classList.add(prioridad); // clase de prioridad para el borde

  // Botón de check
  const check = document.createElement('button');
  check.className = 'check';
  check.dataset.action = 'toggle';
  check.setAttribute('aria-label', 'Completar tarea');

  // Texto de la tarea
  const span = document.createElement('span');
  span.className = 'task-text';
  span.textContent = texto;

  // Badge de prioridad
  const badge = document.createElement('span');
  badge.className = `pri-badge badge-${prioridad}`;
  badge.textContent = prioridad;

  // Botón eliminar
  const delBtn = document.createElement('button');
  delBtn.className = 'del-btn';
  delBtn.dataset.action = 'delete';
  delBtn.textContent = '×';

  // Ensamblar (Lección 06: appendChild)
  li.appendChild(check);
  li.appendChild(span);
  li.appendChild(badge);
  li.appendChild(delBtn);

  return li;
}

// ── ACTUALIZAR ESTADÍSTICAS ──
function actualizarStats() {
  const total = taskList.querySelectorAll('li').length;
  const hechas = taskList.querySelectorAll('li[data-done="true"]').length;
  stats.textContent = `${hechas} / ${total}`;
  pendCount.textContent = `${total - hechas} tarea(s) pendiente(s)`;
}

// ── APLICAR FILTRO (classList.toggle — Lección 05) ──
function aplicarFiltro() {
  taskList.querySelectorAll('li').forEach(li => {
    const hecha = li.dataset.done === 'true';
    let mostrar = activeFilter === 'all'
      || (activeFilter === 'done' && hecha)
      || (activeFilter === 'pending' && !hecha);
    li.classList.toggle('hidden', !mostrar);
  });
}

// ── AGREGAR TAREA ──
function agregarTarea() {
  const texto = taskText.value.trim();
  if (!texto) { taskText.style.borderColor = '#f87171'; setTimeout(() => taskText.style.borderColor = '', 700); return; }
  const item = crearItemDOM(++taskId, texto, taskPriority.value);
  taskList.appendChild(item); // (Lección 06)
  taskText.value = '';
  taskText.focus();
  aplicarFiltro();
  actualizarStats();
}

// ── DELEGACIÓN en la lista (Lección 08) ──
taskList.addEventListener('click', (e) => {
  const li = e.target.closest('li');
  if (!li) return;

  if (e.target.dataset.action === 'toggle') {
    const ahora = li.dataset.done === 'true';
    li.dataset.done = (!ahora).toString();           // atributo data
    li.classList.toggle('done', !ahora);             // clase CSS
    e.target.classList.toggle('done-check', !ahora);
    e.target.textContent = !ahora ? '✓' : '';
    aplicarFiltro();
    actualizarStats();
  }

  if (e.target.dataset.action === 'delete') {
    li.style.opacity = '0';
    li.style.transform = 'translateX(16px)';
    setTimeout(() => { li.remove(); actualizarStats(); }, 220); // (Lección 06: remove)
  }
});

// ── FILTROS — delegación en el contenedor ──
document.querySelector('.filters').addEventListener('click', (e) => {
  if (!e.target.matches('.f')) return;
  document.querySelectorAll('.f').forEach(b => b.classList.remove('active'));
  e.target.classList.add('active');
  activeFilter = e.target.dataset.f;
  aplicarFiltro();
});

// ── LIMPIAR COMPLETADAS ──
clearDone.addEventListener('click', () => {
  taskList.querySelectorAll('[data-done="true"]').forEach(li => li.remove());
  actualizarStats();
});

// ── ENTER para agregar ──
taskText.addEventListener('keydown', e => { if (e.key === 'Enter') agregarTarea(); });
addTaskBtn.addEventListener('click', agregarTarea);

// ── Cargar tareas iniciales ──
[
  { t: '⚡ Dominar querySelector y querySelectorAll', p: 'alta' },
  { t: '🎯 Practicar createElement y appendChild', p: 'alta' },
  { t: '🎨 Entender classList.toggle', p: 'media' },
  { t: '📡 Aprender delegación de eventos', p: 'media' },
  { t: '🏆 Construir un proyecto propio con el DOM', p: 'baja' },
].forEach(({ t, p }) => {
  taskList.appendChild(crearItemDOM(++taskId, t, p));
});
actualizarStats();
      

Vista previa — proyecto final completo y funcional