Make your own Covid Status Web App with COVID API and Fetch API
• Shallom Kyle Jacinto
April 21st 2021 • 2 minute read
In this article we will be building our own covid-19 status app with covid api and fetch api. We'll learn how to fetch an api with javascript fetch api, no libraries and framework.
Setup
First, create a index.html and app.js.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Covid Web App</title>
</head>
<body onload="loadData()">
<h2>Covid Status Worldwide</h2>
<div id="app"></div>
<button onclick="refresh()">Refresh Data</button>
<script src="app.js"></script>
</body>
</html>
We see that in our body tag, we have an attribute of onload which is the loadData() will be called when a website loads the content so we don't make a button to manually display the data.
In our div with an id of app, this will be use for displaying our data's.
And in our refresh button, it'll be use if user want to refresh the data.
Load Data Function
In our app.js, we create an asynchronous function named loadData()
async function loadData() {
document.querySelector("#app").innerHTML = await "Loading data"
await fetchData();
}
We see in our app content, that we set it to Loading data to inform users that our data has been loading.
And we call fetchData() function, where this function fetch the data from an api.
Fetch Data Function
In our fetchData() function, we fetch the data with a free covid api https://disease.sh, you can find more apis, specific countries and for vaccines and more...
async function fetchData() {
await fetch("https://disease.sh/v3/covid-19/all")
}
We use the https://disease.sh/v3/covid-19/all api as it would give us an overall result for covid 19 cases.
And we add a .then() which will give as a data and we use .json() because we fetch an api with an json type.
async function fetchData() {
await fetch("https://disease.sh/v3/covid-19/all")
.then(response => response.json())
.then(data => {
// Our data here
})
}
Displaying Data
To display our data, we use an template literals which you can easily output an html tag with data on it.
For now, try to add a console.log(data) in our second .then and you'll see the data like cases: 1000000.
To display our data, we get the id of app to set the data.
.then(data => {
document.querySelector("#app").innerHTML = `
<p>Total Cases: ${data.cases}<p>
<p>Active Cases: ${data.active}</p>
<p>Total Recovered: ${data.recovered}</p>
<p>Recovered Today: ${data.todayRecovered}</p>
<p>Critical: ${data.critical}</p>
<p>Total Deaths: ${data.deaths}</p>
<p>Deaths Today: ${data.todayDeaths}</p>
<p>Total Swab Tested: ${data.tests}</p>
`;
})
To get the cases, we just type data.cases, for recoveries we type a data.recovered and so on base from what you see in your console...
Refresh Data
And finally, for our refresh button we just call the loadData() again so it will re fetch the api.
async function refresh() {
await loadData();
}
Source code
For source code, open this github repo