Problema: Consumir una API pública con la información de los distintos paises del mundo.
El sitio:
https://restcountries.com
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.com/v3.1/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 etc.
Mostrar cada país en un recuadro independiente en la pagina:
Solución
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.com/v3.1/all")
.then(response => response.json())
.then(datos => {
let banderas = ''
for (let pais of datos) {
banderas += `<div class="tarjeta"><img src="${pais.flags.png}"><br>
<p>Pais:${pais.name.common}</p>
<p>Capital:${pais.capital}</p>
<p>Población:${pais.population}</p>
<p>Continente:${pais.region}</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.com/v3.1/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.flags.png}"><br>
<p>Pais:${pais.name.common}</p>
<p>Capital:${pais.capital}</p>
<p>Población:${pais.population}</p>
<p>Continente:${pais.region}</p>
</div>`
}
const elemento = document.querySelector("#banderas")
elemento.innerHTML = banderas
})
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