How to Add COVID-19 Realtime Update Table On Website | Using API
We all are in the middle of a global pandemic which has really slowed down the whole world. In these tough times lets hope for the best and wait for this time to pass. As we are a Website Development related Website we will talk about the current trend in our industry. Yes, it is the COVID 19 Realtime Counter. You would have seen in lot of websites a live counter giving information about the total number of cases in a particular region or country. So how do they do it? How we can add the COVID 19 API to our own website? Let's See:
In this tutorial we will look at how we can write an Covid 19 API to create a counter in our website. There are many third party API's available in GITHUB which you can use but we are using a basic API.
In this program you will see the data of various countries in the form of a table with columns like total cases, total deaths, total recovered. There is a sorting feature also which helps you to sort the table according to most number of cases, most recovered, etc. There is a search bar also where you can search for your own country or any specific one, it will show the data for that particular country only.
Preview Of API Based Coronavirus Live Cases Data
TO have a look at how the counter will look like, see the video preview below:
COVID 19 Realtime Update Table Source Code
As you have seen the preview, we will now go thorugh the code to create the COVID 19 API counter. Here HTML is used to create a table like structure for the table, then CSS is used for styling the elements and for interactivity we have used JavaScript. You will have to make separate files for Before sharing source code, let’s talk about it. One file for HTMl, one for CSS and another one for JavaScript.
Elements used in the program
The program is not very hard to understand all the HTML elements are quite basic and there is no need to explain. If we talk about CSS, then the elements used are again the basic ones like size, margin, padding. Other than that the flex property is used to sort the layout properly.
The Javascript is used to fetch the API data and also sorting feature is developed thourgh JS also. You can point out all the event listeners which are used in this program. If you are a beginner then please go through our JavaScript tutorial, it will help you to grasp this program more easily.
Let's jump to the coding part, as you can see there are three files for HTML, CSS and Javascript. We recommend you to not mix these files together it is always a good practice to separately manage different technologies.
index.htmlAdd this code in a file named 'index.html', it will be the main file which will set the layout of the program.
Example
Live Demo »
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>COVID-19 Realtime Update | Webdevtrick.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="preloader">
<div class="preloader__content">
<div class="preloader__loader"></div>
<div class="preloader__txt">Loading ...</div>
</div>
</div>
<div class="container">
<div class="statistics">
<div class="global">
<div class="global__title">
corona virus update
</div>
<div class="global__cases">
<h1></h1>
<h2>Total Cases</h2>
</div>
<div class="global__deaths">
<h1></h1>
<h2>Total Deaths</h2>
</div>
<div class="global__recovered">
<h1></h1>
<h2>Total Recovered</h2>
</div>
</div>
<input type="text" id="search" name="country" placeholder="Search Countries">
<select class="custom-select" id="select" onchange="changeOrder()">
<option selected="" disabled="">Sort By</option>
<option value="cases">Total Cases</option>
<option value="deaths">Total Deaths</option>
<option value="recovered">Total Recoveries</option>
</select>
<table class="table">
<thead>
<tr>
<th>Country</th>
<th>Cases</th>
<th>Deaths</th>
<th>Recovered</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="arrow">
<div class="arrow__up">
</div>
<div class="arrow__down">
</div>
</div>
</div>
<script src='https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/iamdustan-smoothscroll/0.4.0/smoothscroll.min.js'></script>
<script src="function.js"></script>
</body>
</html>
style.css
The CSS file will feature the code given below. Create a file 'style.css' and add this code.
Example
Live Demo »
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
font-family: monospace;
}
body {
background-color: white;
position: relative;
overflow-x: hidden;
font-family:sans-serif;
}
.preloader {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
background-color: white;
z-index: 999;
visibility: visible;
overflow: hidden;
pointer-events: none;
user-select: none;
cursor: default;
-webkit-tap-highlight-color: transparent;
-webkit-user-drag: none;
}
.preloader--hidden {
animation-name: hide;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-direction: normal;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
.preloader__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
}
.preloader__loader {
margin: 0 auto;
width: 70px;
height: 70px;
border: 8px solid #f0f0f0;
border-top: 8px solid #696969;
border-radius: 50%;
animation: spin 2s linear infinite;
}
.preloader__txt {
padding: 10px;
color: #f0f0f0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #000000;
}
th{
color: black;
font-weight: 500;
}
@media screen and (max-width: 576px) {
.container {
display: block;
}
}
.container .statistics {
margin: 15px;
position: relative;
}
.container .statistics .global {
position: relative;
}
.container .statistics .global__title {
margin: 15px 0;
text-transform: uppercase;
font-size: xx-large;
font-weight: bold;
}
.container .statistics .global__cases {
margin: 15px 15px 0 0;
display: inline-block;
}
@media screen and (max-width: 576px) {
.container .statistics .global__cases {
display: block;
}
}
.container .statistics .global__cases h1 {
color: #673AB7;
}
.container .statistics .global__recovered {
margin: 15px 15px 0 0;
display: inline-block;
}
@media screen and (max-width: 576px) {
.container .statistics .global__recovered {
display: block;
}
}
.container .statistics .global__recovered h1 {
color: #4CAF50;
}
.container .statistics .global__deaths {
margin: 15px 15px 0 0;
display: inline-block;
}
@media screen and (max-width: 576px) {
.container .statistics .global__deaths {
display: block;
}
}
.container .statistics .global__deaths h1 {
color: #fb5e53;
}
.container .statistics > input[type="text"] {
margin: 15px 0;
width: 200px;
display: inline-block;
background-color: white;
border-radius: 5px;
color: black;
padding: 9px 15px;
font-size: 18px;
border: 1px solid #696969;
}
@media screen and (max-width: 576px) {
.container .statistics > input[type="text"] {
display: block;
}
}
.container .statistics > .custom-select {
margin: 15px 0;
width: 200px;
display: inline-block;
background-color: white;
color: black;
padding: 9px 15px;
font-size: 18px;
border: 1px solid #696969;
}
@media screen and (max-width: 576px) {
.container .statistics > .custom-select {
display: block;
}
}
.container .statistics .table {
border-collapse: collapse;
border: 1.5px solid black;
width: 100%;
min-width: 320px;
}
@media screen and (max-width: 576px) {
.container .statistics .table thead,
.container .statistics .table tbody,
.container .statistics .table th,
.container .statistics .table td,
.container .statistics .table tr {
display: block;
}
}
.container .statistics .table > thead {
background-color: white;
}
@media screen and (max-width: 576px) {
.container .statistics .table > thead {
display: none;
}
}
.container .statistics .table > thead > tr > th {
text-align: left;
font-size: 22px;
}
.container .statistics .table > thead > tr > th:not(:first-child) {
text-align: right;
}
@media screen and (max-width: 576px) {
.container .statistics .table td:nth-of-type(1)::before {
content: "Country";
}
.container .statistics .table td:nth-of-type(2)::before {
content: "Cases";
}
.container .statistics .table td:nth-of-type(3)::before {
content: "Deaths";
}
.container .statistics .table td:nth-of-type(4)::before {
content: "Recovered";
}
}
.container .statistics .table th,
.container .statistics .table td {
border: 1px solid #696969;
padding: 9px 15px;
white-space: nowrap;
}
.container .statistics .table > tbody > tr > td {
font-size: 18px;
}
.container .statistics .table > tbody > tr > td img {
width: 24px;
vertical-align: baseline;
margin-right: 10px;
}
@media screen and (max-width: 576px) {
.container .statistics .table > tbody > tr > td {
position: relative;
text-align: right;
}
.container .statistics .table > tbody > tr > td:first-child {
background-color: white;
padding-left: 100px;
white-space: normal;
}
.container .statistics .table > tbody > tr > td::before {
position: absolute;
top: 0;
left: 0;
padding: 9px 15px;
white-space: nowrap;
}
}
.container .statistics .table > tbody > tr > td:not(:first-child) {
text-align: right;
}
.container .statistics .hidden {
display: none !important;
}
.container .arrow {
position: fixed;
right: 0;
bottom: 0;
}
.container .arrow__up {
position: relative;
cursor: pointer;
background-color: rgba(155, 155, 155, 0.5);
width: 40px;
height: 40px;
border-radius: 5px;
margin: 0 25px 3px 0;
}
.container .arrow__up::before {
content: "";
position: absolute;
border-top: solid 4px #f0f0f0;
border-right: solid 4px #f0f0f0;
width: 16px;
height: 16px;
left: 10px;
top: 14px;
transform: rotate(-45deg);
}
.container .arrow__down {
position: relative;
cursor: pointer;
background-color: rgba(155, 155, 155, 0.5);
width: 40px;
height: 40px;
border-radius: 5px;
margin: 0 25px 25px 0;
}
.container .arrow__down::before {
content: "";
position: absolute;
border-top: solid 4px #f0f0f0;
border-right: solid 4px #f0f0f0;
width: 16px;
height: 16px;
left: 10px;
bottom: 14px;
transform: rotate(135deg);
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
@keyframes hide {
0% {
opacity: 1;
visibility: visible;
}
99% {
opacity: 0;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
function.js
The most important file which will featuer the JS. It is responsible for fetching the data from the API.
Example
Live Demo »
/* Add a request interceptor */
axios.interceptors.request.use(
function (config) {
/*console.log("request sent", new Date());*/
return config;
},
function (error) {
preloader.classList.add("preloader--hidden");
alert(error);
return Promise.reject(error);
}
);
var preloader = document.querySelector(".preloader");
/* Add a response interceptor */
axios.interceptors.response.use(
function (response) {
preloader.classList.add("preloader--hidden");
return response;
},
function (error) {
preloader.classList.add("preloader--hidden");
alert(error);
return Promise.reject(error);
}
);
function getGlobalData() {
return axios.get("https://corona.lmao.ninja/v2/all");
}
function getCountriesData() {
return axios.get("https://corona.lmao.ninja/v2/countries");
}
axios
.all([getGlobalData(), getCountriesData()])
.then(
axios.spread(function (global, countries) {
/*global*/
console.log("%c全球 Global", "color: #fb5e53");
console.log("確診 Cases", global.data.cases);
console.log("死亡 Deaths", global.data.deaths);
console.log("康復 Recovered", global.data.recovered);
var totalCases = global.data.cases.toLocaleString();
var totalDeaths = global.data.deaths.toLocaleString();
var totalRecovered = global.data.recovered.toLocaleString();
document.getElementsByClassName(
"global__cases"
)[0].childNodes[1].innerHTML = totalCases;
document.getElementsByClassName(
"global__recovered"
)[0].childNodes[1].innerHTML = totalRecovered;
document.getElementsByClassName(
"global__deaths"
)[0].childNodes[1].innerHTML = totalDeaths;
/* countries */
const tbody = document.getElementsByTagName("tbody")[0];
var countries = countries.data;
countries.forEach(function (element, index, array) {
const tr = document.createElement("tr");
/* 國旗 flag */
const img = document.createElement("img");
img.src = element.countryInfo.flag;
img.alt = element.countryInfo.iso2;
img.setAttribute("title", element.countryInfo.iso2);
var values = [
element.country,
element.cases,
element.deaths,
element.recovered
];
values.forEach(function (element, index, array) {
const td = document.createElement("td");
element =
validation.isNumber(element) === "NaN"
? element
: element.toLocaleString();
if (!index) {
let text = document.createTextNode(element);
td.appendChild(img);
td.appendChild(text);
} else {
td.innerHTML = element;
}
tr.appendChild(td);
});
tbody.appendChild(tr);
});
})
)
.catch(function (error) {
console.log(error);
});
var validation = {
isNumber: function (str) {
/* /^\d+$/g is equal to /^[0-9]+$/g; */
var patt = /^\d+$/g;
return patt.test(str);
}
};
var search = document.getElementById("search");
search.addEventListener("keyup", function () {
var value = this.value.toLowerCase();
console.log("value", value);
const rows = document.querySelectorAll("tbody tr");
const rowsArray = Array.prototype.slice.call(rows);
rowsArray.forEach(function (element, index, array) {
var tdCountry = element.childNodes[0].innerHTML.toLowerCase();
if (tdCountry.indexOf(value) > -1) {
/*console.log(tdCountry, tdCountry.indexOf(value)); */
element.classList.remove("hidden");
} else {
element.classList.add("hidden");
}
});
});
function changeOrder() {
const value = document.getElementById("select").value;
const index = document.getElementById("select").selectedIndex;
/ *console.log(value, index); */
const rows = document.querySelectorAll("tbody tr");
const rowsArray = Array.prototype.slice.call(rows);
rowsArray
.sort(function (A, B) {
var num1 = A.childNodes[index].innerHTML;
num1 = num1.replace(",", "");
var num2 = B.childNodes[index].innerHTML;
num2 = num2.replace(",", "");
return num2 - num1;
})
.forEach(function (tr) {
tr.parentElement.appendChild(tr);
});
/* console.log(rowsArray);*/
}
document.querySelector(".arrow__up").addEventListener("click", function () {
window.scrollTo({
top: 0,
behavior: "smooth"
});
});
document.querySelector(".arrow__down").addEventListener("click", function () {
window.scrollTo({
top: document.body.scrollHeight,
behavior: "smooth"
});
});
If you have any queries related to this program then send them to our Facebook page @Coderepublics.