56 - Desafío 3: Mostrar en tajetas todas las banderas de paises del mundo


Problema: Consumir una API pública con la información de los distintos paises del mundo.

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:

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.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

Retornar