El sitio:
https://restcountries.eu
tiene una API pública que nos permite consultar todos los nombres de paises, banderas, capitales etc.
La dirección que debemos acceder para recuperar un archivo JSON con dicha información es:
https://restcountries.eu/rest/v2/all
Los datos que retorna tienen el siguiente formato:
Confeccionar una página que recupere y muestre todas las bandera, nombres de paises, sus capitales, cantidad de habitantes, continente, idioma y moneda.
Mostrar cada país en un recuadro independiente en la pagina:
La lectura de la solución debería efectuarse luego de haber intentado resolverlo en forma individual.
index.html
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Prueba</title> <link rel="stylesheet" href="estilos.css"> </head> <body> <div id="banderas"> </div> <script src="funciones.js"></script> </body> </html>
La hoja de estilo para mostrar la información.
estilos.css
#banderas { display: flex; flex-wrap: wrap; margin: 0 auto; } .tarjeta { width: 400px; margin: 20px; border: 1px solid gray; box-shadow: 0 0 10px black; border-radius: 10px; background-color: lightgray; padding: 10px; } .tarjeta img { width: 100%; border-radius: 10px; } .tarjeta p { margin: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 1rem; }
Toda la funcionalidad se encuentra en el archivo JavaScript.
funciones.js
fetch("https://restcountries.eu/rest/v2/all") .then(response => response.json()) .then(datos => { let banderas = '' for (let pais of datos) { banderas += `<div class="tarjeta"><img src="${pais.flag}"><br> <p>Pais:${pais.name}</p> <p>Capital:${pais.capital}</p> <p>Población:${pais.population.toLocaleString()}</p> <p>Continente:${pais.region}</p> <p>Idioma:${pais.languages[0].name}</p> <p>Moneda:${pais.currencies[0].name}</p> </div>` } const elemento = document.querySelector("#banderas") elemento.innerHTML = banderas })
Inmediatamente que se carga la página se procede a llamar a la función fetch y pasar la dirección que retorna el archivo JSON con la información:
fetch("https://restcountries.eu/rest/v2/all")
Al método then llegan los datos del servidor y procedemos a convertirlo a formato json y retornarlo:
.then(response => response.json())
Finalmente con la promesa devuelta por el método then recibimos la información con formato json, donde procedemos a mostrar los datos de cada pais:
let banderas = '' for (let pais of datos) { banderas += `<div class="tarjeta"><img src="${pais.flag}"><br> <p>Pais:${pais.name}</p> <p>Capital:${pais.capital}</p> <p>Población:${pais.population.toLocaleString()}</p> <p>Continente:${pais.region}</p> <p>Idioma:${pais.languages[0].name}</p> <p>Moneda:${pais.currencies[0].name}</p> </div>` }
Como tenemos un arreglo con un país por cada componente, procedemos a recorrer la colección mediante un for of y concatenamos el el string 'banderas' todos los datos que se mostrarán definiendo las etiquetas HTML necesarias.
Cuando salimos del for obtenemos la referencia del DIV respectivo y asignamos a la propiedad innerHTML el string que contiente la estructura de todas las tarjetas con los paises:
const elemento = document.querySelector("#banderas") elemento.innerHTML = banderas