62 - Desafío 8: Mostrar datos estadísticos de Covic-19 (API pública)


Problema: Confeccionar una página que muestre los datos estadísticos de la pandemia de Covic-19.

Los datos se deben rescatar del sitio:

https://api.covid19api.com/summary

Nos retorna un archivo en formato JSON con las siguiente estructura:

Debemos mostrar los datos globales en la parte superior y una tabla HTML (emplear Bootstrap para dar estilo a la página) con los datos por país:

Solución

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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>

<body>
    <div id="datos" class="container">
    </div>
    <script src="funciones.js"></script>
</body>

</html>

La funcionalidad se encuentra en el archivo JavaScript.

funciones.js

fetch("https://api.covid19api.com/summary")
    .then(response => response.json())
    .then(datos => {
        let cadena = `
        <p><strong>Casos totales confirmados:</strong> ${new Intl.NumberFormat("es").format(datos.Global.TotalConfirmed)} </p>
           <strong>Total de muertes:</strong> ${new Intl.NumberFormat("es").format(datos.Global.TotalDeaths)}</p>
           <hr>
           <table class="table table-striped">
           <tr>
              <th>Pais</th>
              <th style="text-align:right">Casos</th>
              <th style="text-align:right">Total de muertes</th>
            </tr>`
        for (let pais of datos.Countries)
            cadena += `<tr>
                           <td>${pais.Country}</td>
                           <td style="text-align:right">${new Intl.NumberFormat("es").format(pais.TotalConfirmed)}</td>                           
                           <td style="text-align:right">${new Intl.NumberFormat("es").format(pais.TotalDeaths)}</td>
                       </tr>`
        cadena += '</table>'
        document.querySelector("#datos").innerHTML = cadena
    });

Inmediatamente la página es cargada se llama a la función fetch con la dirección donde se encuentra la API:

fetch("https://api.covid19api.com/summary")

Para mostrar los números con formato local (separación de puntos y comas) empleamos la clase 'Intl.NumberFormat' indicando formato español "es" y el valor a formatear:

        <p><strong>Casos totales confirmados:</strong> ${new Intl.NumberFormat("es").format(datos.Global.TotalConfirmed)} </p>

Retornar