Skip to content

Instantly share code, notes, and snippets.

@williamsin9g

williamsin9g/covid-19-tracker.markdown

Created March 30, 2020 08:56
Show Gist options
  • Save williamsin9g/3752bf306755528e8650bf8ad4179c5d to your computer and use it in GitHub Desktop.
Save williamsin9g/3752bf306755528e8650bf8ad4179c5d to your computer and use it in GitHub Desktop.
Download ZIP
COVID-19 TRACKER
Raw
index.html
<!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>
<h1>COVID-19 TRACKER</h1>
<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>
Raw
script.js
//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);
});
Raw
style.css
*{
margin: 0;
padding: 0;
outline: 0;
font-family: 'Nunito',sans-serif;
}
body{
background-color: #1ee57e;
}
.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment