Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create Covid19 Country wise status project using REST API?
Before creating the project, we will first discuss REST API. REST is a software architecture style and a collection of standards that helps make online services. Representational State Transfer is the full name of REST. At the same time, Application programming interfaces (API) allow communication between two or more computer programmes. It is a software interface that gives other software programmes a service. The user must follow the rules known as a REST API based on the HTTP (Hypertext Transfer Protocol) to access web services.
Conventional HTTP methods like GET, POST, PUT, and DELETE access and modify resources like data objects in a REST API. These are identified by URIs (Uniform Resource Identifiers). Data can be delivered using the API in several formats, including XML and JSON. Small, quick, and easy-to-scale web services can be built using REST. It was developed to communicate with the World Wide Web’s HTTP protocol. Due to their foundation in standard protocols, REST APIs can be used by various clients, including web browsers, mobile apps, and other servers.
The REST API is frequently used in web and mobile application development because it provides a simple and standardised approach for apps to access and alter resources on a server.
Steps to Create Covid19 Country Wise Status Project
Using a REST API, one can build a COVID-19 country-wise status project by following these basic steps −
Step 1 − Research a reliable API that provides COVID-19 data broken down by country. In this tutorial, we are using the following API link: https://covid19api.com/.
Step 2 − Refer to the API documentation to find out how to obtain the data and the parameters that can filter it by nation.
Step 3 − Using the AJAX method, send an HTTP request on the API and fetch the response data.
Step 4 − To develop the front end of the project, which will present the data in a userfriendly style, we use an HTML table and CSS for a better visual representation of the data.
Covid19 Country Wise Status Project
Here, we will build the actual project. It will be in three parts: JavaScript AJAX code to perform HTTP requests, HTML body to show the content, and CSS styling to make it user-friendly. We used the jQuery AJAX library to make the code more user-readable and easy to use.
HTTP Response Body
Before going into details about the actual HTML body code to represent the countrywise Covid19 status, we need to go through the API response and understand its structure.
Below is a part of the API response that we are getting −
{
"ID": "027ce495-cf80-48da-afb7-6b8f95b12a01",
"Message": "",
"Global": {
"NewConfirmed": 208060,
"TotalConfirmed": 671410179,
"NewDeaths": 2047,
"TotalDeaths": 6771936,
"NewRecovered": 0,
"TotalRecovered": 0,
"Date": "2023-02-18T04:36:09.159Z"
},
"Countries": [
{
"ID": "2390f7cb-1c24-4164-bfc3-688afed8bbe7",
"Country": "Afghanistan",
"CountryCode": "AF",
"Slug": "afghanistan",
"NewConfirmed": 16,
"TotalConfirmed": 209072,
"NewDeaths": 0,
"TotalDeaths": 7896,
"NewRecovered": 0,
"TotalRecovered": 0,
"Date": "2023-02-18T04:36:09.159Z",
"Premium": {}
},
{
"ID": "8591babe-97a3-44f5-8e38-06df8ae67a55",
"Country": "Albania",
"CountryCode": "AL",
"Slug": "albania",
"NewConfirmed": 9,
"TotalConfirmed": 334273,
"NewDeaths": 0,
"TotalDeaths": 3596,
"NewRecovered": 0,
"TotalRecovered": 0,
"Date": "2023-02-18T04:36:09.159Z",
"Premium": {}
},
...
]
"Date": "2023-02-18T04:36:09.159Z"
}
In this response, we have several details of the covid19 country-wise, but the essential part of this project is the “Countries” key. It contains an array of objects representing the covid19 country details for a specific country. The object’s keys are self-explanatory, such as “Country” includes the country name. “NewConfirmed” stores new confirmed covid19 cases. “TotalConfirmed” stores the total confirmed cases in that country. “NewDeaths” represents the recent number of deaths. “TotalDeaths” means the total number of deaths in that country, “NewRecovered” represents current recovered patients, and “TotalRecovered” represents the total number of recovered patients.
Example
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<title> Covid19 Country Wise Status Project </title>
<style>
.text-center {
text-align: center;
}
#mytable {
border-collapse: collapse;
width: 100%;
}
#mytable td,
#mytable th {
border: 1px solid #ddd;
padding: 8px;
}
#mytable tr:nth-child(even) {
background-color: #f2f2f2;
}
#mytable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #008b86;
color: white;
}
</style>
</head>
<body>
<h2 class="text-center"> Covid19 Country Wise Status Project </h2>
<!-- Table -->
<table id="mytable">
<thead>
<th> Country Name </th>
<th> New Confirmed </th>
<th> New Deaths </th>
<th> New Recovered </th>
<th> Total Confirmed </th>
<th> Total Deaths </th>
<th> Total Recovered </th>
</thead>
</table>
<script>
let mytable = document.getElementById('mytable')
// AJAX HTTP Request
$.ajax({
url: 'https://api.covid19api.com/summary',
type: 'GET',
success: function (response) {
let data = response.Countries
console.log(data)
let element = ''
data.forEach((country) => {
element +=
'<tr><td>' +
country.Country +
'</td>' +
'<td>' +
country.NewConfirmed +
'</td>' +
'<td>' +
country.NewDeaths +
'</td>' +
'<td>' +
country.NewRecovered +
'</td>' +
'<td>' +
country.TotalConfirmed +
'</td>' +
'<td>' +
country.TotalDeaths +
'</td>' +
'<td>' +
country.TotalRecovered +
'</td></tr>'
})
mytable.innerHTML += element
},
})
</script>
</body>
</html>
This project will help beginners to learn more about AJAX, JavaScript, HTML and CSS. It can also be used as a quick status check for the covid19 for several counties.
225 Views
