Ejercicio de programación con JavaScript: Introducción al DOM

Proyecto
Práctica
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.

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

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

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

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

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

  6. Implementa la funcionalidad para el botón de eliminar: cuando se haga clic, debe eliminar completamente el elemento de la lista del DOM.

  7. Crea una función que actualice el contador de tareas pendientes cada vez que se añada, complete o elimine una tarea.

  8. Asegúrate de limpiar el campo de entrada después de añadir una nueva tarea para mejorar la experiencia de usuario.

  9. Prueba todas las funcionalidades: añadir tareas, marcarlas como completadas, eliminarlas y verificar que el contador se actualice correctamente.

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