📑 Tanda 6 – Solo enunciados de ejercicios (nivel medio)

Tabla de contenidos

Objetivo: Grid, clamp() y JS ligero.

Crea navbar.html.
Diseña una barra de navegación con logo, enlaces y botón hamburguesa; el alto debe calcularse con clamp().
Ocúltala al hacer scroll hacia abajo y muéstrala al volver a subir (JS con scrollY).
Debe funcionar sin JS si se desactiva: la barra permanece fija arriba.
Añade transición suave y conserva el foco accesible en todos los controles.

Objetivo: scroll-snap, atributos aria-selected y eventos click.

Crea galeria.html con un carrusel horizontal de imágenes grandes.
Debajo, coloca miniaturas; al pulsar una miniatura, el carrusel debe desplazarse hasta la imagen correspondiente.
Usa scroll-snap-align: center; para centrar cada imagen.
Marca la miniatura activa con aria-selected="true".
Implementa teclas ←/→ para avanzar sin ratón.

Objetivo: Custom Elements, Shadow DOM y atributos observados.

Crea x-alert.js que defina un elemento <x-alert> con estilo interno (Shadow DOM cerrado).
Acepta atributos type="info|warning|error" y dismissable.
Si dismissable, muestra un botón “×” que borre el elemento con animación.
Expone un método .flash(ms) que lo muestre y oculte tras ms milisegundos.
Usa el componente en alerts.html con tres ejemplos distintos.

Objetivo: fetch, parseo de texto y ordenación de columnas.

Crea csv‑viewer.html.
El usuario debe poder elegir un fichero .csv local (input file).
Muestra los datos en una tabla; la primera fila es encabezado.
Al pulsar cualquier th, la tabla se ordena asc/desc, detectando números y fechas.
Añade contador de filas visibles y barra de búsqueda que filtre por texto.

Objetivo: manifest, Service Worker y IndexedDB.

Crea notas/ con index.html, app.js, sw.js y manifest.webmanifest.
La app permite crear, editar y borrar notas cortas; almacena los datos en IndexedDB.
Instálala como PWA (botón “Agregar a inicio”) y muestra iconos a 192 y 512 px.
Implementa caché “offline first” para los recursos estáticos.
Al volver online, sincroniza notas pendientes y muestra notificación.

Objetivo: media queries, pseudo‑elementos y atributos data-label.

Crea tabla-card.html con una tabla de pedidos (5‑7 filas).
Por encima de 640 px se ve como tabla normal.
Por debajo, cada fila debe mostrarse como “card” apilada; los títulos de columna se generan con ::before leyendo data-label.
Mantén orden semántico para lectores de pantalla.
Sombrea las filas impares con CSS variable que el usuario pueda cambiar.

Objetivo: accesibilidad, :focus-visible y animación fade.

Crea pestanas.html con 3 pestañas (Descripción, Especificaciones, Opiniones).
Usa un grupo de radios ocultos y etiquetas label como disparadores.
Cada panel debe tener role="tabpanel" y aria-labelledby.
El panel activo se muestra con opacidad 1 y los demás se ocultan con opacity:0, transicionando .3 s.
Asegura navegación con Tab y flechas ←/→.

Objetivo: rendimiento y transición accesible.

Crea lazy.html con 6 imágenes de alta resolución que se carguen sólo al entrar en viewport.
Muestra primero una versión tiny (32 px) muy borrosa; reemplázala por la grande cuando cargue.
Añade transición filter: blur(20px) → blur(0) y opacity en .5 s.
Si JS está desactivado, las imágenes deben seguir cargando (fallback <img> normal).
Registra en consola el porcentaje de imágenes cargadas.

📝 Consejos para resolver

Analiza cada requisito y planifica el orden de construcción (HTML → CSS → JS).
Usa commits frecuentes describiendo lo implementado.
Testea en móvil y con herramientas de accesibilidad (lupa, contraste, lector de pantalla).
Publica tu solución en un repo; si necesitas revisión, pásame el enlace y te doy feedback.