williamsin9g/covid-19-tracker.markdown

## covid-19-tracker.markdown

      
    Raw
  

              covid-19-tracker.markdown
            
          
    COVID-19 TRACKER

A Pen by williamsin on CodePen.
License.

  
## 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>

## 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);
});

## 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;


}
	<!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>

	//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);
	});
	*{
	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;


	}