Ejercicio de programación con JavaScript: Modificación de elementos DOM

Configura la estructura HTML básica: Crea un archivo HTML con un formulario para añadir tareas, un contenedor para la lista de tareas, botones de filtrado y un contador de tareas pendientes. Asegúrate de asignar IDs y clases apropiados para facilitar la selección mediante JavaScript.

Implementa la selección de elementos DOM: Utiliza diferentes métodos de selección (getElementById, querySelector, getElementsByClassName) para obtener referencias a los elementos del DOM que necesitarás manipular.

Crea la función para añadir tareas: Implementa la funcionalidad que capture el texto del input cuando se envíe el formulario y añada una nueva tarea a la lista. Cada tarea debe tener un checkbox para marcarla como completada y un botón para eliminarla.

Implementa la funcionalidad para marcar tareas como completadas: Cuando el usuario haga clic en el checkbox de una tarea, cambia su apariencia visual (por ejemplo, tachando el texto) y actualiza su estado.

Añade la funcionalidad para eliminar tareas: Implementa el código necesario para que cuando se haga clic en el botón de eliminar de una tarea, esta se elimine del DOM.

Implementa los filtros de visualización: Crea las funciones que permitan filtrar las tareas para mostrar todas, solo las activas o solo las completadas, utilizando los selectores adecuados.

Actualiza el contador de tareas pendientes: Cada vez que se añada, complete o elimine una tarea, actualiza el contador que muestra el número de tareas pendientes.

Prueba y depura tu aplicación: Verifica que todas las funcionalidades trabajan correctamente y que la manipulación del DOM se realiza de forma eficiente.