Ejercicios Avanzados

Ejercicio 1: Menú Desplegable Dinámico

Objetivo: Crea un menú desplegable que muestre submenús al pasar el mouse sobre los ítems principales.

Ejercicio 2: Filtro de Búsqueda en Tiempo Real

Objetivo: Implementa un filtro de búsqueda que actualice una lista de elementos en tiempo real a medida que el usuario escribe en un campo de búsqueda.

Ejercicio 3: Pestañas Interactivas

Objetivo: Desarrolla un sistema de pestañas donde el contenido cambie dinámicamente al hacer clic en las diferentes pestañas sin recargar la página.

Ejercicio 4: Galería de Imágenes con Modal

Objetivo: Crea una galería de imágenes donde al hacer clic en una imagen, esta se muestre en un modal a tamaño completo con la opción de navegar a la siguiente o anterior.

Ejercicio 5: Validación de Formulario Compleja

Objetivo: Implementa validaciones complejas en un formulario, incluyendo verificación de contraseña (requerimientos de longitud y caracteres especiales) y validación de campo de email en tiempo real contra una expresión regular.

Ejercicio 6: Lista Ordenable y Guardable

Objetivo: Crea una lista de elementos que los usuarios puedan reordenar usando drag-and-drop, y que puedan guardar el orden actualizado a través de una llamada AJAX.

Ejercicio 7: Autocompletado de Direcciones

Objetivo: Implementa una función de autocompletado en un campo de entrada de dirección, utilizando una API externa para sugerencias mientras el usuario escribe.

Ejercicio 8: Scroll Infinito

Objetivo: Desarrolla una funcionalidad de scroll infinito para un blog o una lista de productos, donde nuevos elementos se carguen automáticamente cuando el usuario llegue al final de la página.

Ejercicio 9: Animación de Progreso de Carga

Objetivo: Crea una barra de progreso que se anime para mostrar el porcentaje de un proceso de carga o descarga, actualizándose en tiempo real.

Ejercicio 10: Tabla Editable

Objetivo: Construye una tabla donde los usuarios puedan hacer clic en cualquier celda para editar su contenido directamente, con cambios que se guarden automáticamente a través de AJAX.