Tutorial: construye una lista de tareas (to-do list) completa

Este es el proyecto donde todo lo anterior (arrays, funciones, eventos, localStorage) se junta. Si llegaste hasta aquí siguiendo los tutoriales anteriores, esto te va a resultar sorprendentemente familiar.

Paso 1: el HTML

<form id="formulario-tarea">
  <input type="text" id="nueva-tarea" placeholder="Nueva tarea" />
  <button type="submit">Agregar</button>
</form>
<ul id="lista-tareas"></ul>

Paso 2: el estado de tu app (un array, nada más)

let tareas = JSON.parse(localStorage.getItem('tareas')) || [];

Al cargar la página, intentamos recuperar las tareas guardadas. Si no hay nada guardado (primera visita), usamos un array vacío gracias al operador ||.

Paso 3: dibuja las tareas en pantalla

function renderizarTareas() {
  const lista = document.querySelector('#lista-tareas');
  lista.innerHTML = '';

  tareas.forEach((tarea, indice) => {
    const item = document.createElement('li');
    item.textContent = tarea;

    const botonBorrar = document.createElement('button');
    botonBorrar.textContent = 'Eliminar';
    botonBorrar.addEventListener('click', () => eliminarTarea(indice));

    item.appendChild(botonBorrar);
    lista.appendChild(item);
  });
}

Paso 4: agrega y elimina tareas, y guarda todo

function guardarTareas() {
  localStorage.setItem('tareas', JSON.stringify(tareas));
}

function eliminarTarea(indice) {
  tareas = tareas.filter((_, i) => i !== indice);
  guardarTareas();
  renderizarTareas();
}

document.querySelector('#formulario-tarea').addEventListener('submit', (evento) => {
  evento.preventDefault();
  const input = document.querySelector('#nueva-tarea');
  const texto = input.value.trim();

  if (texto === '') return;

  tareas.push(texto);
  input.value = '';
  guardarTareas();
  renderizarTareas();
});

renderizarTareas();

Cada vez que agregas o eliminas una tarea: actualizas el array, lo guardas en localStorage, y vuelves a dibujar la lista completa. Es un patrón que vas a repetir toda tu carrera como desarrollador, así que memorízalo bien (o simplemente guarda este tutorial en favoritos, no hay trampa).

¿Qué acabas de aprender?

• Cómo combinar arrays, eventos del DOM y localStorage en un proyecto real.
• El patrón "actualizar datos → guardar → volver a dibujar" que vas a usar constantemente.
• Que sí puedes construir algo funcional con lo que ya sabes, sin frameworks todavía.