16
COVID-19 Tracker 2021
Corona has made everyone suffer in various aspects, and I do hope it doesn't get any more worst of it. So, I've made an active COVID19 tracker for India 2021.
The basic idea of making this project in the first place was to make it informative enough so that people know that how much of the population has been affected by covid-19 in 2021 too.
Without any further ado let's begin with today's post.
The website is hosted on Netlify but why netlify though? Comment down if you want to know about it, I will definitely add another post for that over here.
This project looks a very simple one yet uses big concepts like how does fetch works in JavaScript this one question is one of the favorites' question for the recruiter to ask to any JavaScript Developer.
First step open your code editor create one index.html file then proceed further with the steps given below:
Step1: Let's begin with the html boiler plate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Covid Tracker for India</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
</body>
</html>Step2: Next we need to create div sections for the container.
In the image given below we can clearly see the div tags class names that are used to edit them in the CSS later:
div section board is the child div of the container
then comes the six different blocks which are named as follows:
div section c: this is the div for telling the active cases
div section cr: this is the div for telling the critical cases
div section r: this is the div for telling the recovered cases
div section ca: this is the div for telling the total cases
div section d: this is the div for telling the total death cases
div section t: this is the div for telling the total tests done
then comes the six different blocks which are named as follows:
div section c: this is the div for telling the active cases
div section cr: this is the div for telling the critical cases
div section r: this is the div for telling the recovered cases
div section ca: this is the div for telling the total cases
div section d: this is the div for telling the total death cases
div section t: this is the div for telling the total tests done
The code for this using these divs in your index.html file:
<div class="container">
<h2>
COVID -19 Cases in <span id="country"></span>
<img src="" id="flag"/>
</h2>
<div class="board">
<div class="card a">
<h5>Active Cases</h5> //h5 tag is used for writing
</div> text in web page
<div class="card ca">
<h5>Total Cases</h5>
</div>
<div class="card cr">
<h5>Critical Cases</h5>
</div>
<div class="card d">
<h5>Total Deaths</h5>
</div>
<div class="card r">
<h5>Recovered Cases</h5>
</div>
<div class="card t">
<h5>Total Tests Done</h5>
<span id="tests"></span>
</div>
</div>
</div>The alignment of these div classes is done in the CSS section which you can get access via my GitHub.
Step 3: Creating and editing the Script File(script.js).
The main concept here is of fetching the data through an India Corona -tracker API.
The main concept here is of fetching the data through an India Corona -tracker API.
Syntax of using a fetch funtion in JavaScript is given below:
fetch('URL')
.then(response => response.json())
.then(data => console.log(data));What does fetch do and how does it works internally with your web browser?
promise tells you whether the request was successful or not if it was successful then we can see the data on our web-page but if it wasn't then we will know there is some issue with our fetch and we can improvise that.
Below is the promise's working shown diagrammatically:
This is your code for Script.js file
fetch("https://corona.lmao.ninja/v2/countries/India")
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data);
document.getElementById("country").innerHTML = data.country;
document.getElementById(
"active"
).innerHTML = data.active.toLocaleString();
document.getElementById("cases").innerHTML = data.cases.toLocaleString();
document.getElementById(
"critical"
).innerHTML = data.critical.toLocaleString();
document.getElementById("death").innerHTML = data.deaths.toLocaleString();
document.getElementById(
"recovered"
).innerHTML = data.recovered.toLocaleString();
document.getElementById("tests").innerHTML = data.tests.toLocaleString();
document.getElementById("flag").src = data.countryInfo.flag;
});So as we discussed fetch, promise and how will the APIs work this will be the end of the post. Hope you liked it.
For the icons I've used font-awesome which is a great site to use fav-icons from.
Take care and keep coding💜