Welcome , to our blog on how to make a covid counter of our own . In this blog you will learn step by step on how to show live update on covid 19 patients using HTML , CSS , JavaScript
Also Check →
Let’s have a Look to our goal !
We have divided our page into several technology like —
HTML-- This part of out code will make a structure of a tracker wall.
CSS-- The CSS will give a finite touch to our tracker frame so as to make it a little colourful and may provide some animations as well.
JS-- The most important part , The Working of our page i.e. fetching the real time data to display it on our tables..
Now we have to create a HTML file , therefore choose a code editor of your choice , I’m using Visual Studio , its my personal favourite because of the features it provides !!
Now open the editor and create a new file and name that file as world.html
Firstly add the most important part , Which will provide a structure as well as look and feel to our tracker i.e libraries for css and js
world.html
<!DOCTYPE html><html>
<head><title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"><!-- jQuery library --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><!-- Waypoint CDN --><script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js" integrity="sha256-jDnOKIOq2KNsQZTcBTEnsp76FnfMEttF6AV2DF2fFNE=" crossorigin="anonymous"></script><!-- Counter Up CND --><script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js" integrity="sha256-JtQPj/3xub8oapVMaIijPNoM0DHoAtgh/gwFYuN5rik=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><link href="https://fonts.googleapis.com/css2?family=Muli:ital,wght@1,300&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Gotu&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" /><meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<link href="https://fonts.googleapis.com/css
family=Baloo+2&display=swap" rel="stylesheet"><title>COVID-19 TRACKER</title><meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
Now, we will start with the look of our html page and add the Heading of our page
<body onload="fetch()">
<nav class="navbar navbar-expand-lg nav_style p-3">
<a class="navbar-brand pl-5" href="#">SAB BATADE AAPKO</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent"><span style="color: white; margin-left: 200px; font-size: 25px"><b>How to track the CORONA Patient's counts using HTML CSS JavaScript</b></span></div><div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto pr-9">
<li class="nav-item active"><a class="nav-link" href="#">COVID-19<span class="sr-only"></span></a></li>
</ul>
</div>
</nav><div class="main_header">
<div class="row w-100 h-100">
<div class="col-lg-5 col-md-5 col-12 order-lg-1 order-2"></div>
</div>
</div><br>
<br>
<br><div class="wrapper">
<h1 style="text-align: center;color: white;padding: 10px;">
COVID-19 LIVE TRACKER
<hr>
<span id="today" style="font-size: 15px;"></span>
</h1>
<br>Now , let’s make the box, which will display the number of the of corona counts by using API
<div class="statistic">
<div class="box_wrapper" >
<div class="box" style="color: red" >
<h2>Total Cases</h2><br>
<p id="total_cases"></p>
</div><div class="box" >
<h2>Active case</h2><br>
<p id="active_cases"> </p>
</div><div class="box" >
<h2>Total Recovery</h2>
<p id="total_recovered"> </p>
</div><div class="box">
<h2>Today's cases</h2><br>
<p id="new_case"> </p>
</div><div class="box" style="color: red">
<h2>Total Death</h2><br>
<p id="total_death"> </p>
</div>
</div>Now it’s time to show the table which will shows countrywise live tracking of corona patients
<table id="tbval"><tr>
<th>Countries</th>
<th>Cases</th>
<th>active cases</th>
<th>total Deaths</th>
<th>total recovered</th>
<th>Deaths</th>
</tr></table>
</div>
</div>Now we have to fetch values in the box by using API
The API link is — https://corona.lmao.ninja/v2/all
<script>let total_cases = document.getElementById("total_cases");let active_cases = document.getElementById("active_cases");let total_recovered = document.getElementById("total_recovered");let new_case = document.getElementById("new_case");let new_death = document.getElementById("new_death");----------// Fetching the Data from the server---------
//Fetching the World Datafetch("https://corona.lmao.ninja/v2/all", {"method": "GET"}).then(response => response.json().then( data =>
{total_cases.innerHTML = data['cases'];active_cases.innerHTML = data['active'];total_recovered.innerHTML = data['recovered'];new_case.innerHTML = data['todayCases'];new_death.innerHTML = data['todayDeaths'];}));</script>
To insert the value in the table, we have to fetch the Country wise data from the API mentioned below
API — https://api.covid19api.com/summary
<script >function fetch(){$.get("https://api.covid19api.com/summary",function(data){var tbval=document.getElementById('tbval');for(var i=1;i<(data['Countries'].length);i++){var x = tbval.insertRow();
x.insertCell(0);
tbval.rows[i].cells[0].innerHTML= data['Countries'][i]['Country'];x.insertCell(1);
tbval.rows[i].cells[1].innerHTML= data['Countries'][i]['TotalConfirmed'];x.insertCell(2);
tbval.rows[i].cells[2].innerHTML= data['Countries'][i]['TotalDeaths'];x.insertCell(3);
tbval.rows[i].cells[3].innerHTML= data['Countries'][i]['TotalRecovered'];x.insertCell(4);
tbval.rows[i].cells[4].innerHTML= data['Countries'][i]['NewDeaths'];
}
})}</script>
get the current date by getElementId() method
<script>
var d = new Date();
document.getElementById("today").innerHTML = d;
</script>Conclusion — That’s is How we can fetch the World count data from an API
You need to add the CSS file to style your page so that it look appropriate to your needs but you can also add this CSS file made by us under
You can check this topic for your reference —