Ejercicio de programación con JavaScript: Introducción al DOM
0h 20m
JavaScript Introducción al DOM te enseña a crear listas de tareas dinámicas con manipulación de DOM. Mejora tus habilidades con ejercicios prácticos.
Crea un archivo HTML llamado
index.html
con una estructura básica que incluya un título<h1>
con el texto "Mi Lista de Tareas", un<div>
con id "task-container", un formulario con un campo de texto y un botón, y un párrafo para mostrar el contador de tareas.Crea un archivo JavaScript llamado
script.js
y vincúlalo al HTML. Dentro de este archivo, espera a que el DOM esté completamente cargado utilizando el eventoDOMContentLoaded
.Implementa una función que capture el envío del formulario y evite su comportamiento predeterminado. Esta función debe tomar el texto del campo de entrada y, si no está vacío, crear un nuevo elemento de lista.
Para cada nueva tarea, crea un elemento
<li>
que contenga el texto ingresado, un botón para marcarla como completada y otro botón para eliminarla. Añade este elemento al contenedor de tareas.Implementa la funcionalidad para el botón de completar: cuando se haga clic, debe alternar una clase CSS en el elemento de la lista que cambie su apariencia (por ejemplo, tachando el texto).
Implementa la funcionalidad para el botón de eliminar: cuando se haga clic, debe eliminar completamente el elemento de la lista del DOM.
Crea una función que actualice el contador de tareas pendientes cada vez que se añada, complete o elimine una tarea.
Asegúrate de limpiar el campo de entrada después de añadir una nueva tarea para mejorar la experiencia de usuario.
Prueba todas las funcionalidades: añadir tareas, marcarlas como completadas, eliminarlas y verificar que el contador se actualice correctamente.
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
Manipulación DOM
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