Hoy practiqué un plato casero que todo desarrollador conoce: una lista de tareas.

Hay muchas formas de cocinar este plato. Yo usé los ingredientes más simples, los que tienes en casa, y el método más básico. En este invierno no demasiado frío, espero que podamos calentarnos juntos los desarrolladores novatos. El resultado está al final, para que lo prueben—gratis.

Receta y pasos:

1. Al pulsar el botón se añade un ítem (createElement()).
2. Meter texto concreto en el ítem nuevo (convertir el input en un text node y luego .appendChild a la lista).
3. Llevar el texto del campo de entrada al ítem nuevo (usar input.value).
4. Solo añadir un ítem si el campo tiene texto.
5. Escuchar Enter para añadir también (addEventListener("keypress", function); el keycode de Enter es 13).
6. Escuchar clics en la lista y alternar el tachado en el ítem pulsado (classList.toggle()).
7. Al añadir un ítem nuevo, incluir también un botón (crear un botón de borrar y añadirlo a la lista).
8. Escuchar distintos casos: clic en el texto alterna el tachado; el botón de borrar elimina el ítem (quitar el padre con target.parentElement.remove()).
9. Al añadir un ítem, asegurarse de que el nuevo botón de borrar también esté escuchado (volver a querySelectorAll todos los ítems y poner el listener en el último elemento).

Un poco de cebollino—cuidado con estos detalles:

1. El argumento de .appendChild solo puede ser un elemento, así que el texto hay que pasarlo por createTextNode antes de meterlo en la lista.
2. Meter el botón junto con el ítem hace que, al tachar el texto, también se tache la etiqueta del botón. Solución: envolver el texto en un span y solo tachar si el clic es sobre ese span.
3. .addEventListener escucha padre e hijos a la vez, así que usa .target para el hijo y .currentTarget para el padre.
4. Los botones de borrar de los ítems nuevos no funcionan al principio porque el botón nuevo no estaba escuchado—al añadir a la lista hay que registrar el botón nuevo.
5. Al intentar escuchar el botón nuevo puede que aún no lo encuentres, así que vuelve a ejecutar .querySelectorAll para actualizar la selección de todos los botones.

Resulta que incluso esta «cocina casera» de todos los días necesita tantos detalles para el comensal. Cuando scrolleamos Facebook o navegamos por la web, rara vez pensamos que cada página es el sudor de un programador—cada botón es grano a grano.

Pruébalo: Cocina casera: «lista de lectura»

Código fuente con comentarios detallados en chino