Ejercicio de programación con JavaScript: Manipulación DOM
2h 0m
JavaScript Manipulación DOM para crear una lista de tareas interactiva, completando, eliminando y almacenando información en localStorage.
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.
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.
Array
Modificación de elementos DOM
Encapsulación
Clases y objetos
Uso de operadores
Uso de operadores
Estructuras de control
Funciones
Excepciones
Transformación con map()
Arrays y Métodos
Transformación con map()
Funciones flecha
Async / Await
Polimorfismo
Variables
Selección de elementos DOM
API Fetch
Encapsulación
Tecnologías de este ejercicio de programación
Entornos de desarrollo para este ejercicio

Visual Studio Code

GitHub