Collect 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.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);
});
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);
});
The Page Design
now I will give you the HTML and CSS file of the project.
HTML Code:
<!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 in the world</h2>
<p id="total_cases"></p>
</div>
<div class="Designed_by_box">
<h2>Designed by Maxon</h2>
<p id="Maxon_Poll"></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 Code :
*{
margin: 0;
padding: 0;
outline: 0;
font-family: 'Nunito',sans-serif;
}
body{
background: gray;
}
.wrapper{
width: auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.statistic{
width: auto;
}
.total_case_box{
background-color:#00CED1;
-webkit-box-shadow: 0px 0px 4px 2px #000000;
box-shadow: 0px 0px 4px 2px #000000;
border : 2px groove #00CED1;
border-radius: 10px;
margin: 10px 15px;
padding: 15px 0;
text-align: center;
text-transform: uppercase;
}
.total_case_box p{
font-size: 3rem;
}
.Designed_by_box{
background-color: #800000;
-webkit-box-shadow: 0px 0px 3px 1px #FF0000;
box-shadow: 0px 0px 3px 1px #FF0000;
border-radius:100px;
color:white;
margin: 1px 1px;
padding: 5px 0;
text-align: center;
text-transform: uppercase;
}
.Designed_by_box p{
font-size: 3rem;
}
.wrapper .box_wrapper{
display: flex;
flex-wrap: nowrap;
flex-direction: row;
}
.box_wrapper .box{
background-color: #00CED1;
-webkit-box-shadow: 0px 0px 4px 2px #000000;
box-shadow: 0px 0px 4px 2px #000000;
border : 2px groove #00CED1;
border-radius: 80px;
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{-webkit-box-shadow: 0px 0px 10px 2px #000000;
box-shadow: 0px 0px 10px 2px #000000;
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: #1E8449;
color: #fafafa;
}
tr td{
padding: 15px 0;
}
now I will give you the final JavaScript file of the project
Java Code:
//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": "f93ff5e3afmsh1c47b09be99cc61p1ca087jsnbd673fdc9881"
}
})
.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": "f93ff5e3afmsh1c47b09be99cc61p1ca087jsnbd673fdc9881"
}
})
.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.
0 Comments:
Post a Comment