Ejercicio de programación con JavaScript: Proyecto Manipulación DOM

Estructura básica: Crea un archivo HTML con la estructura básica para la aplicación de lista de tareas. Incluye un formulario con un campo de texto para introducir nuevas tareas y un botón para añadirlas. Añade también un contenedor <ul> vacío donde se mostrarán las tareas.

Añadir tareas: Implementa la funcionalidad para añadir nuevas tareas. Cuando el usuario envíe el formulario, crea dinámicamente un nuevo elemento <li> con el texto introducido y añádelo a la lista. Asegúrate de limpiar el campo de texto después de añadir la tarea.

Marcar como completada: Añade un checkbox a cada tarea que permita marcarla como completada. Cuando una tarea se marque como completada, aplica un estilo visual diferente (por ejemplo, texto tachado) utilizando manipulación de clases CSS.

Eliminar tareas: Añade un botón de eliminar a cada tarea que, al hacer clic, elimine ese elemento de la lista utilizando los métodos de eliminación de nodos del DOM.

Reordenamiento: Implementa botones de "subir" y "bajar" para cada tarea que permitan reordenar los elementos en la lista. Utiliza los métodos de movimiento de nodos para cambiar la posición de las tareas.

Optimización con fragmentos: Modifica tu código para utilizar DocumentFragment cuando sea necesario añadir múltiples elementos a la vez, como al cargar tareas desde localStorage al iniciar la aplicación.

Contador de tareas: Añade un contador en la parte superior que muestre el número de tareas pendientes. Este contador debe actualizarse automáticamente cuando se añadan, completen o eliminen tareas.

Persistencia de datos: Implementa la funcionalidad para guardar las tareas en localStorage cada vez que se produzca un cambio (añadir, completar, reordenar o eliminar). Al cargar la página, recupera las tareas guardadas y reconstruye la lista.

Limpieza masiva: Añade un botón "Eliminar completadas" que elimine todas las tareas marcadas como completadas de la lista en una sola operación.

Estilización final: Añade estilos CSS para mejorar la apariencia de tu aplicación. Incluye efectos visuales para las interacciones como hover sobre los botones o transiciones al completar tareas.