in this article, I will show you how to Make a COVID-19 Data tracker using javascript and an API. you will learn how to use RapidAPI and how to fetch different data to get the coronavirus statistic evolution. the final result will be like this :
I know the design is a mess, but in this article, I want to focus on the data and how to fetch them. so let's start.
Getting the data
First, we will need to get the API URL and this is the simple part because we will use RapidApi witch is an API Creator, he will also provide you the code to fetch the different data, you need to create an account and it's absolutely free.Go to this URL and create your free account: Covid API
in the dashboard, RapidAPI provides you different API like the case by country, world total stat and so on. will use two GET URL and it's " case_by_country" and "world_total_stat". after choosing these API, click on code snippets and choose javascript(fetch) and it will generate for you the code with the API key.
the code will look like this
fetch("https://coronavirus-monitor.p.rapidapi.com/coronavirus/worldstat.php", {
"method": "GET",
"headers": {
"x-rapidapi-host": "coronavirus-monitor.p.rapidapi.com",
"x-rapidapi-key": "you should use you key here" // don't forget to place your key here or the code will not work
}
})
.then(response => {
console.log(response);
})
.catch(err => {
console.log(err);
});
so we will make some modifications because the response doesn't really display the API object. to check this, try it on your browser and see what the console will display.to extract the data from the response object we will use another promise and we will need to transform our response into a JSON format using the json() method so the code will be like this:
fetch("https://coronavirus-monitor.p.rapidapi.com/coronavirus/worldstat.php", {
"method": "GET",
"headers": {
"x-rapidapi-host": "coronavirus-monitor.p.rapidapi.com",
"x-rapidapi-key": "you should use you key here" // don't forget to place your key here or the code will not work
}
})
.then(response => response.json().then(data => {
console.log(data);
}))
.catch(err => {
console.log(err);
});
we will do the same thing for our second API.
The Page Design
now I will give you the HTML and CSS file of the project.
HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<link href="https://fonts.googleapis.com/css?family=Montserrat|Roboto|Roboto+Mono&display=swap" rel="stylesheet">
<title>COVID-19 TRACKER</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
</head>
<body>
<div class="wrapper">
<div class="statistic">
<div class="total_case_box">
<h2>Total Cases</h2>
<p id="total_cases"></p>
</div>
<div class="box_wrapper">
<div class="box">
<h2>Total Death</h2>
<p id="total_death"> </p>
</div>
<div class="box">
<h2>Total Recovery</h2>
<p id="total_recovered"> </p>
</div>
<div class="box">
<h2>New case</h2>
<p id="new_case"> </p>
</div>
<div class="box">
<h2>New Death</h2>
<p id="new_death"> </p>
</div>
</div>
<table id="countries_stat">
<tr>
<th>Country</th>
<th>Cases</th>
<th>Deaths</th>
<th>serious critical</th>
<th>total recovered</th>
</tr>
</table>
</div>
</div>
<script src='scripts/main.js'></script>
</body>
</html>
CSS file
*{
margin: 0;
padding: 0;
outline: 0;
font-family: 'Nunito',sans-serif;
}
body{
background-color: #1e88e5;
}
.wrapper{
width: 80%;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.statistic{
width: 100%;
}
.total_case_box{
background-color: #fafafa;
box-shadow: 2px 2px 8px rgba(30,30,30,.2);
margin: 10px 15px;
padding: 15px 0;
text-align: center;
text-transform: uppercase;
}
.total_case_box p{
font-size: 3rem;
}
.wrapper .box_wrapper{
display: flex;
flex-wrap: nowrap;
flex-direction: row;
}
.box_wrapper .box{
background-color: #fafafa;
box-shadow: 2px 2px 8px rgba(30,30,30,.2);
margin: 10px 15px;
width:25%;
text-align: center;
padding: 15px 0;
border-radius: 8px;
text-transform: uppercase;
}
.box_wrapper .box p{
font-size: 2.5rem;
}
/*Styiling the table*/
table{
width: 100%;
padding: 15px 10px;
margin: 10px 0;
text-align: center;
border-spacing: 0;
}
tr:first-child{
background-color: #37474f;
color: #fafafa;
text-transform: uppercase;
}
th{
padding: 15px 0;
border: none;
border-spacing: 0;
}
tr:nth-child(even){
background-color: #fafafa;
}
tr:nth-child(odd){
background-color: #424242;
color: #fafafa;
}
tr td{
padding: 15px 0;
}
now I will give you the final JavaScript file of the project
and that's it, now you can get all the data that concern the coronavirus using JavaScript, you can use AJAx to refresh your data and update it. Thank you for reading if you have any problems with code, please comment and we will answer you.
//Decalring the Different Variable and Objects
let new_cases = document.getElementById("new_case");
let new_death = document.getElementById("new_death");
let total_death = document.getElementById("total_death");
let total_recovered = document.getElementById("total_recovered");
let total_cases = document.getElementById("total_cases");
let table = document.getElementById('countries_stat')
// Fetching the Data from the server
//Fetching the World Data
fetch("https://coronavirus-monitor.p.rapidapi.com/coronavirus/worldstat.php", {
"method": "GET",
"headers": {
"x-rapidapi-host": "coronavirus-monitor.p.rapidapi.com",
"x-rapidapi-key": "53009286a0mshdc8ec356f7aa205p1e0e80jsn5858f548ed53"
}
})
.then(response => response.json().then( data => {
console.log(data);
total_cases.innerHTML = data.total_cases;
new_cases.innerHTML = data.new_cases;
new_death.innerHTML = data.new_deaths;
total_death.innerHTML = data.total_deaths;
total_recovered.innerHTML = data.total_recovered;
})).catch(err => {
console.log(err);
});
//Fetching The Case by Country Data
fetch("https://coronavirus-monitor.p.rapidapi.com/coronavirus/cases_by_country.php", {
"method": "GET",
"headers": {
"x-rapidapi-host": "coronavirus-monitor.p.rapidapi.com",
"x-rapidapi-key": "53009286a0mshdc8ec356f7aa205p1e0e80jsn5858f548ed53"
}
})
.then(response => response.json().then(data =>{
console.log(data)
let countries_stat = data.countries_stat;
//Getting all the country statistic using a loop
for(let i = 0; i<countries_stat.length;i++){
console.log(countries_stat[i]);
//we will start by inserting the new rows inside our table
let row = table.insertRow(i+1);
let country_name = row.insertCell(0);
let cases = row.insertCell(1);
let deaths = row.insertCell(2);
let serious_critical = row.insertCell(3);
let recovered_per_country = row.insertCell(4);
country_name.innerHTML = countries_stat[i].country_name;
cases.innerHTML = countries_stat[i].cases;
deaths.innerHTML = countries_stat[i].deaths;
serious_critical.innerHTML = countries_stat[i].serious_critical;
recovered_per_country.innerHTML = countries_stat[i].total_recovered;
}
}))
.catch(err => {
console.log(err);
});
and that's it, now you can get all the data that concern the coronavirus using JavaScript, you can use AJAx to refresh your data and update it. Thank you for reading if you have any problems with code, please comment and we will answer you.
Create a Coronavirus tracker in javascript using API
Reviewed by Medics
on
March 16, 2020
Rating:
Reviewed by Medics
on
March 16, 2020
Rating:
Hi.Can someone please help me with how to update stats with AJAx? Thanks in advance.
ReplyDeleteI am preparing a tutorial on how to use AJAX to Update the data
DeleteYou can check the blog "How to present Covid-19 India data with JavaScript and AJAX using Rapid API"
DeleteLink - https://zermelotech.blogspot.com/2020/05/a-simple-covid-19-api-tutorial-using.html
Make calling request every one minute.
ReplyDeleteWhat would I need to add to the HTML and CSS to get the output of united_states_cases ?
ReplyDeleteI would love to see a video tutorial of this...
ReplyDeleteI would love to see a video tutorial of this...
ReplyDeleteCan show FLAG before country name ?
ReplyDeleteDoes this work with Axios?
ReplyDeleteSlightly confused on where are other states, all I see is most California
ReplyDeleteGood article.
ReplyDeleteI am Debayan Mukherjee a web designer & developer, digital marketer and graphic designer from India.
Check out my website : https://debayanmukherjee.com