Ejercicios de Desarrollo Web en Entorno Cliente

window.PRODUCTOS tiene 23 nombres. Muestra 5 por página en #lista (un <li> por producto) y en #pagina el texto «Página X de Y». #anterior y #siguiente cambian de página y deben estar deshabilitados cuando no hay página anterior o siguiente. Al cargar se ve la página 1.

Al escribir en #pais, muestra en #sugerencias (como <li>) los países de window.PAISES que empiezan por lo escrito, sin distinguir mayúsculas, como máximo 5. Con la flecha abajo y arriba se resalta una sugerencia (aria-selected="true" y solo una a la vez); Enter copia la resaltada al campo y vacía la lista; Escape vacía la lista. Con el campo vacío no hay sugerencias.

El tablero #tablero tiene 8 cartas (<button class="carta" data-valor="…">) boca abajo. Al pulsar una se le añade la clase «visible». Al destapar la segunda: si coinciden, las dos reciben la clase «acertada» y se quedan visibles; si no, pierden «visible» a los 500 ms. Mientras dos cartas distintas están destapadas no se puede destapar otra, ni volver a pulsar una ya visible. #intentos cuenta las parejas intentadas y, al acertar todas, #mensaje muestra «¡Completado en N intentos!».