Skip to content

Instantly share code, notes, and snippets.

@ocariocawebdesign

ocariocawebdesign/api-covid19.html

Last active September 22, 2020 14:25
Show Gist options
  • Save ocariocawebdesign/d3e4a42419c3f13b992d2e96c3360979 to your computer and use it in GitHub Desktop.
Save ocariocawebdesign/d3e4a42419c3f13b992d2e96c3360979 to your computer and use it in GitHub Desktop.
Download ZIP
Api rest consumindo dados de uma api de atualizações sobre casos de COVID-19
Raw
api-covid19.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">
<title>Document</title>
</head>
<body>
<style>
.container-content{
display: flex;
flex-direction: column;
width: 100%;
padding: 0.8rem;
border:1px solid rgb(187, 187, 194);
border-radius: 3px;
background:#fafafa;
margin-top:1rem;
}
</style>
<div id="content01" class="container container-content">
<div class="row">
<div class="column">
<h1 class="">Resumo - COVID 19</h1>
<div id="result"></div>
</div>
<div class="column">
</div>
</div>
</div>
<script>
const result = document.querySelector("#result");
// Consulta via Fetch no Wordpress
const URL = "https://covid19-brazil-api.now.sh/api/report/v1";
fetch(`${URL}`)
.then((body) => body.json())
.then((dados) => {
console.log(dados);
//Pegando os dados do objeto
const dadosApi = {
//Rio de Janeiro
uf: dados.data[3].uf,
estado: dados.data[3].state,
dataHora: dados.data[3].datetime,
casos: (dados.data[3].cases),
mortes: (dados.data[3].deaths),
suspeitos: dados.data[3].suspects,
};
result.innerHTML = `Atualizado em: <h4>Data Hora: ${dadosApi.dataHora}</h4>
<h4>UF: ${dadosApi.uf}</h4>
<h4>Estado: ${dadosApi.estado}</h4>
<h4>Casos: ${dadosApi.casos}</h4>
<h4>💀 Mortes: ${dadosApi.mortes}</h4>
<h4> Casos suspeitos: ${dadosApi.suspeitos}</h4>
<h5>Fonte da API: WHO Health Emergency - https://covid19.who.int/ WHO</h5>
<p>O CariocaWeb - Carlos Abreu</p>
`
})
.catch((error) => console.error("Erro:", error.message || error));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment