Proyecto en: https://github.com/JREdesign/InforNation

index.js

Flujo:

  1. Se carga la página y se llama a fetchCountriesData() para obtener los datos iniciales de los países.
  2. Los datos se obtienen de la API, se ordenan alfabéticamente y se muestran en tarjetas de países.
  3. El usuario puede buscar países utilizando el campo de búsqueda, lo que activa el filtrado y muestra los resultados correspondientes.
  4. La paginación permite al usuario navegar entre las diferentes páginas de países mostrados.

Cada función y parte del código contribuye a este flujo general, facilitando la obtención, filtrado y visualización de la información de los países de manera interactiva y paginada en la página web.

Variables:

  1. restCountriesAllAPI: Almacena la URL de la API de REST Countries para obtener todos los países.
  2. countriesList y searchInput: Almacenan referencias al contenedor donde se mostrarán las tarjetas de países y al campo de búsqueda respectivamente.
  3. itemsPerPage, currentPage, filteredCountries: Variables para el manejo de paginación y búsqueda.

Funciones:

  1. fetchCountriesData(): Realiza una solicitud a la API para obtener los datos de todos los países, ordena alfabéticamente los países por nombre, y muestra la primera página de tarjetas con la información de los países ordenados.
  2. showCountriesByPage(data, page): Muestra los países en la página actual. Calcula los índices para la paginación, muestra las tarjetas de los países y crea eventos de clic en cada tarjeta para mostrar información detallada al hacer clic en ellas.
  3. handlePageClick(event): Maneja los cambios de página al hacer clic en los enlaces de paginación.
  4. filterCountries(searchText, data): Filtra los países según el texto de búsqueda ingresado.
  5. Evento input en searchInput: Escucha cambios en el campo de búsqueda, filtra los países y muestra los resultados correspondientes.

Event Listeners: