Build a Coronavirus COVID-19 Live World Tracker Web App in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

Build a Coronavirus COVID-19 Live World Tracker Web App in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a coronavirus covid-19 live world tracker web app in browser using html5 css3 and javascript.All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

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

 

 

 

Now make a style.css file and copy paste the following cod

 

 

style.css

 

 

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

 

See also  Node.js Tutorial to Cartoonify an Image Using Toonify API (Deepai) & Deep Learning in Browser Using Javascript Full Project For Beginners

 

 

 

And now make a script.js file and copy paste the following code

 

 

 

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": "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);
});

 

See also  Build a Adobe Acrobat Clone PDF Document Live Editor in Browser Using Node.js & Javascript Full Project For Beginners

 

 

And now if you open the index.html file inside the browser you will see the below screenshot

 

 

Leave a Reply