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>