NexTable - Práctica Fetch API (Promises y async/await)

Proyecto de práctica: implementar peticiones HTTP asíncronas con Fetch API usando Promises y async/await, manejar estados de carga y errores, y renderizar datos dinámicamente en el DOM.

Contenido

• inicio.html — Página principal con la interfaz y la lógica en JavaScript (fetch, promesas y async/await).
• Este README con instrucciones.

Qué se implementó

• Uso de Promises:
  • fetchRestaurantesPromise() retorna una Promise que realiza la petición fetch(...).then(...).catch(...).
  • verRestaurantePromise(id) usa fetch con .then()/.catch() para obtener datos de un restaurante y renderizarlos en la vista de detalles.
• Uso de async/await:
  • obtenerRestaurantes() es una función async que consume la Promise anterior mediante await y maneja errores con try/catch.
• Manejo de estados:
  • Indicador de carga (loader) mientras se obtienen los restaurantes y mientras se cargan los detalles.
  • Mensajes de error visibles en el DOM si la petición falla.
• Renderizado dinámico:
  • Los restaurantes se crean dinámicamente con document.createElement y se insertan en el restaurants-grid.
  • Los detalles del restaurante se rellenan dinámicamente (imagen, nombre, estrellas, contacto, galería, mapa).
• Accesibilidad básica:
  • aria-live y aria-hidden en secciones dinámicas, role="img" en imágenes de fondo, y botones con type="button".

Ejecución local

1. Opción simple: abrir inicio.html en el navegador.

   • Haz doble clic en inicio.html o ábrelo desde tu editor (VSCode) en el navegador.
   • Nota: algunos navegadores no permiten ciertas cargas de recursos locales en iframes cuando se abre el archivo con el esquema file://. Si tienes problemas con el iframe del PDF o el mapa, usa el servidor simple de abajo.

2. Opción usando un servidor local (recomendado):

   • Con Python 3:
     • Abre una terminal en la carpeta del proyecto y ejecuta:
       • python -m http.server 8000
     • Abre en el navegador: http://localhost:8000/inicio.html
   • Con VSCode: usa la extensión "Live Server" y abre inicio.html.

Notas Entregable

• Incluye este repositorio con los archivos del proyecto.
• Asegúrate de añadir este README y inicio.html.
• En la entrega se evaluará el uso de Fetch API, manejo de promesas y async/await, manejo de carga/errores y el render dinámico en el DOM.

Observaciones

• La práctica usa https://jsonplaceholder.typicode.com/users como fuente de datos de ejemplo.
• El PDF y el mapa se cargan con URLs públicas de ejemplo (no pertenecen al restaurante real).
• La funcionalidad de reserva de mesas está en la interfaz, pero la persistencia (envío al servidor) no está implementada, pues el foco fue Fetch, Promises y renderizado dinámico.