
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
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.
- Related Articles
- How to Create Fullscreen API using JavaScript?
- How to create a project with Cucumber and Rest Assured dependencies?
- How to use Azure Rest API in PowerShell?
- Difference between REST API and SOAP API
- How Can Project Managers Ensure Effective Project Reporting and Status Updates?
- Project Status Reporting: How to Keep Stakeholders Informed and Engaged
- How to Conduct Effective Project Status Meetings with Your Team?
- How to create a database in MySQL using a JDBC API?
- How to create a table in a database using JDBC API?
- How to create a function in a database using JDBC API?
- The Role of Project Status Reports in Project Management
- Effective Way for Project Status Communication
- How to create a directory in project folder using Java?
- How to create a Stored procedure in Oracle database using JDBC API?
- How to create a Stored procedure in a database using JDBC API?
