Ejercicio: Eventos y formularios

⏱ 45 minutos
📶 Nivel: principiante

Objetivo

Dar vida a una página: un contador con tres botones y una lista de tareas con formulario, validación, delegación de eventos y atajo de teclado.

La página de partida

Esta es la página sobre la que trabaja tu código. No la modifiques: escribe solo el JavaScript.

pagina.html

<h2>Contador</h2>
<p>Valor: <span id="valor">0</span></p>
<button id="mas" type="button">+1</button>
<button id="menos" type="button">-1</button>
<button id="reset" type="button">Reiniciar</button>

<h2>Tareas</h2>
<form id="form">
  <label for="nuevo">Nueva tarea</label>
  <input id="nuevo" type="text">
  <button type="submit">Añadir</button>
</form>
<p id="error" role="alert"></p>
<ul id="tareas"></ul>

▶ Prueba tu código aquí (opcional)

Código (edítalo y pulsa Ejecutar)

<h2>Contador</h2>
<p>Valor: <span id="valor">0</span></p>
<button id="mas" type="button">+1</button>
<button id="menos" type="button">-1</button>
<button id="reset" type="button">Reiniciar</button>

<h2>Tareas</h2>
<form id="form">
  <label for="nuevo">Nueva tarea</label>
  <input id="nuevo" type="text">
  <button type="submit">Añadir</button>
</form>
<p id="error" role="alert"></p>
<ul id="tareas"></ul>
<script>
  // escribe tu JavaScript
</script>

Página (resultado)

Consola

Pasos

Marca cada paso a medida que lo completes. Tu avance se guarda en este navegador.

Haz que #mas sume 1 al número de #valor al pulsarlo, #menos reste 1 y #reset lo ponga en 0.
Al enviar el formulario #form, cancela el envío por defecto con preventDefault().
Al enviar, si el texto de #nuevo (sin espacios en los extremos) no está vacío, crea un <li> con ese texto y añádelo a #tareas; después vacía el campo.
Si el texto está vacío, escribe en #error el mensaje "Escribe una tarea" y no añadas nada. Si se añade una tarea, borra el mensaje de error.
Usa delegación: un solo manejador de click en #tareas que alterne la clase hecha del <li> pulsado (también para tareas añadidas después).
Al pulsar Escape dentro de #nuevo, vacía el campo.
Usa addEventListener (no atributos onclick).

💡 Pista 1: el contador

Guarda el valor en una variable let valor = 0; y actualiza el texto con document.getElementById("valor").textContent = valor; tras cada cambio.

💡 Pista 2: la delegación

document.getElementById("tareas").addEventListener("click", (e) => { const li = e.target.closest("li"); if (li) li.classList.toggle("hecha"); });

🔎 Comprueba tu trabajo

Pega tu código y pulsa Comprobar. La revisión ocurre en tu navegador; nada se envía a ningún sitio. Cada punto en rojo incluye una pista.

Tu código JavaScript

✅ Ver una solución de ejemplo

Intenta resolverlo antes de mirar. Tu versión puede ser distinta y también correcta.

app.js

// ----- Contador -----
let valor = 0;
const salida = document.getElementById("valor");
const mostrar = () => { salida.textContent = valor; };

document.getElementById("mas").addEventListener("click", () => { valor++; mostrar(); });
document.getElementById("menos").addEventListener("click", () => { valor--; mostrar(); });
document.getElementById("reset").addEventListener("click", () => { valor = 0; mostrar(); });

// ----- Tareas -----
const form = document.getElementById("form");
const campo = document.getElementById("nuevo");
const error = document.getElementById("error");
const lista = document.getElementById("tareas");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const texto = campo.value.trim();
  if (texto === "") {
    error.textContent = "Escribe una tarea";
    return;
  }
  error.textContent = "";
  const li = document.createElement("li");
  li.textContent = texto;
  lista.append(li);
  campo.value = "";
});

lista.addEventListener("click", (e) => {
  const li = e.target.closest("li");
  if (li) li.classList.toggle("hecha");
});

campo.addEventListener("keydown", (e) => {
  if (e.key === "Escape") campo.value = "";
});

💡 🏁 Reto extra (opcional)

Añade un botón «Borrar completadas» que elimine todas las tareas con la clase hecha, y un contador de tareas pendientes que se actualice solo.