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

Proyecto
Práctica
2h 0m

JavaScript Manipulación DOM para crear una lista de tareas interactiva, completando, eliminando y almacenando información en localStorage.

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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.

  7. 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.

  8. 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.

  9. 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.

  10. 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.

Empezar ejercicio de programación

Más ejercicios de programación con JavaScript

Evalúa tus conocimientos en JavaScript con más ejercicios de programación de tipo Test, Puzzle, Código y Proyecto con VSCode.

Tecnologías de este ejercicio de programación

Entornos de desarrollo para este ejercicio

Image

Visual Studio Code

Image

GitHub