Introducción al DOM

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

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.