How to create Covid19 Country wise status project using REST API ?
Last Updated :
05 Apr, 2023
Today, All Countries in the world fighting with Coronavirus. Every day, Coronavirus cases rising rapidly. It is important for all to keep track of COVID Cases daily and should try to keep himself/herself safe. We have made small web apps that will tell you the total no of cases, new cases, new death, recovery, etc. to the user. You have to just enter the country name and click on search.Â
This app is also protected from clientside scripting and uses Free Covid-19 API. The following is the API Link: https://covid19api.com/Â
Steps to Run the program: We are showing JavaScript and HTML files in this article. All codes including HTML, CSS, and js are in my GitHub profile. The following is the complete project link: https://github.com/rohitdhonicsk/covid19webappÂ
- Git clone https://github.com/rohitdhonicsk/covid19webapp, to copy the GitHub project file on your computer.
- Now open the Index.html file.
- Type a country name and click search.
Project File and Module Required:
- You should have three main files index.html (Below the code of the index.html file), and CSS (it is only required if you want to design, You can download CSS from my GitHub repository project file). And the third most important file is the JavaScript file (We have given the full code below) which is needed to for fetching COVID data and responding to the user search.
- You require jQuery which is JavaScript Library. You can put CDN Script on your HTML Code from Jquery Official Website OR using the Command below: Note: Make sure you have NODE and NPM installed in the machine, otherwise go to the official website of the node to download and install. Firstly, you have to type the below command in the project directory. It will create a package.json file.
npm init
Now type the below command to install jQuery.
npm install jquery
Project Directory:
 
Â
The project will look like this: Home Page:
COVID19 stats search for INDIA country:Â
Â
Steps To Build the Application:
- The first step is to go to API Copy the link of API to the Postman app and visualize the JSON format of data. We are using the summary data of API.
- Create a form in an HTML file with the input field as the country name.
- Assign Id to the head, form, input, and tag that should be used on JavaScript. Below is the Demo HTML file where class and id are used for styling and action call.Â
html
<h1 class='section-heading'>COVID RESULT</h1>
<h2 class='section-subheading'>SEARCH COUNTRY NAME</h2>
<div class="section-description">
<p class="section-subheading">
<form id="query-form">
<div>
<label for="ingredients">Country :</label>
<input class="textfield" id="ingredients"
type="text" name="ingredients"
placeholder="e.g.India, chiNA"
onChange="sanitizeInputs()" />
</div>
<div class="button">
<br />
<input class="button" type="button" value="Reset"
id="resetButton"
onClick="this.form.reset();resetResults()" />
<input class="button" type="submit" value="Search ..."
id="searchButton" />
</div>
</form>
</p>
<div class="section-subheading" id="search-results-heading"></div>
<div class="results-div" id="results"></div>
</div>
- Now include your CSS file (it is optional).
- Remember to include the below two things in the HTML code:
- jQuery CDN link
- Your JS file
- Now, add the following code to your JS file:Â
javascript
// This Code calls function name performSearch()
// on clicking submit button of form
$(document).ready(function () {
// Add an event listener (performSearch)
// to the form
$("#query-form").submit(function (event)
{ performSearch(event); });
});
- Now create performSearch() Function using the below code:Â
javascript
function performSearch(event) {
// Variable to hold request
let request;
// Prevent default posting of form
// put here to work in case of errors
event.preventDefault();
// Abort any pending request
if (request) {
request.abort();
}
// Setup some local variables
let $form = $(this);
// Disable the inputs and buttons
// for the duration of the request.
setFormDisabledProps(true);
// It will show heading searching during the request
$("#search-results-heading").text("Searching ...");
$("#results").text("");
// Send the request to API for data
request = $.ajax({
url: "https://api.covid19api.com/summary",
type: "GET",
// data: { i:, q: $("#contains").val()}
});
// Taking country name from input box that we created
pat = $("#ingredients").val();
// Callback handler for success
request.done(function (response, textStatus, jqXHR) {
// Calling formal search after getting data from api
formatSearchResults(response);
});
// Callback handler for failure
request.fail(function (jqXHR, textStatus, errorThrown) {
$("#search-results-heading").
text("Unable to fetch Covid Data, Try again")
$("#results").text("");
});
// Callback handler that will be called in any case
request.always(function () {
// Reenable the inputs
setFormDisabledProps(false);
});
}
- Creating a formatSearchResults function that will give the user desired search result.Â
javascript
let pat, flag = 0;
function formatSearchResults(jsonResults) {
// Storing Json Data in jsonobject variable
let jsonObject = jsonResults;
$("#search-results-heading").text("Search Results");
let formatedText = "";
jsonObject.Countries.forEach(function (item, index) {
// Matching user search data with api data
if (item.Country.toLowerCase() == pat.toLowerCase()) {
let thumbnail = item.NewConfirmed;
// Printing the result
formatedText +=
"<div class='dish-ingredients-div'><h3>TotalConfirmed: " +
item.TotalConfirmed + "<h3></div>";
formatedText +=
"<div class='dish-ingredients-div'><h3>NewDeaths: " +
item.NewDeaths + "<h3></div>";
formatedText +=
"<div class='dish-ingredients-div'><h3>NewConfirmed: " +
item.NewConfirmed + "<h3></div>";
formatedText +=
"<div class='dish-ingredients-div'><h3>NewRecovered: " +
item.NewRecovered + "<h3></div>";
flag = 1;
return;
}
});
// If result not found
$("#results").html(formatedText);
if (!flag) {
$("#search-results-heading")
.text("Dont Fun With it.Please Enter"
+ " Correct Country Name e.g-India");
$("#results").text("");
}
}
- And the last step is to protect data from client-side scripting and reset function.Â
javascript
function resetResults() {
$("#search-results-heading").text("");
$("#results").text("");
flag = 0;
}
// This function checks the user input fields
// for any unacceptable characters and removes
// them if found
function sanitizeInputs() {
let str = $("#ingredients").val();
str = str.replace(/[^a-zA-Z 0-9, ]/gim, "");
str = str.trim();
$("#ingredients").val(str);
}
The Complete Javascript Code:Â
javascript
// This Code call function name performSearch()
// on clicking submit button of form
$(document).ready(function () {
// Add an event listener (performSearch)
// to the form
$("#query-form").submit(function (event)
{ performSearch(event); });
});
let pat, flag = 0;
function formatSearchResults(jsonResults) {
// Storing Json Data in jsonobject variable
let jsonObject = jsonResults;
$("#search-results-heading").text("Search Results");
let formatedText = "";
jsonObject.Countries.forEach(function (item, index) {
// Matching user search data with api data
if (item.Country.toLowerCase() == pat.toLowerCase()) {
var thumbnail = item.NewConfirmed;
// Printing the result
formatedText +=
"<div class='dish-ingredients-div'><h3>TotalConfirmed: " +
item.TotalConfirmed + "<h3></div>";
formatedText +=
"<div class='dish-ingredients-div'><h3>NewDeaths: " +
item.NewDeaths + "<h3></div>";
formatedText +=
"<div class='dish-ingredients-div'><h3>NewConfirmed: " +
item.NewConfirmed + "<h3></div>";
formatedText +=
"<div class='dish-ingredients-div'><h3>NewRecovered: " +
item.NewRecovered + "<h3></div>";
flag = 1;
return;
}
});
$("#results").html(formatedText);
// If result not found
if (!flag) {
$("#search-results-heading")
.text("Dont Fun With it.Please Enter"
+ " Correct Country Name e.g-India");
$("#results").text("");
}
}
function performSearch(event) {
// Variable to hold request
let request;
// Prevent default posting of form -
// put here to work in case of errors
event.preventDefault();
// Abort any pending request
if (request) {
request.abort();
}
// Setup some local variables
let $form = $(this);
// Disable the inputs and buttons
// for the duration of the request.
setFormDisabledProps(true);
// It will show heading searching
// during the request
$("#search-results-heading")
.text("Searching ...");
$("#results").text("");
// Send the request to API for data
request = $.ajax({
url: "https://api.covid19api.com/summary",
type: "GET",
// data: { i:, q: $("#contains").val() }
});
// Taking country name from input
// box that we created
pat = $("#ingredients").val();
// Callback handler for success
request.done(function (response,
textStatus, jqXHR) {
formatSearchResults(response);
});
// Callback handler for failure
request.fail(function (jqXHR,
textStatus, errorThrown) {
// Calling formal search after
// getting data from api
$("#search-results-heading").text(
"Sorry We Unable to fetch Covid Data.Try again.");
$("#results").text("");
});
// Callback handler that will be
// called in any case
request.always(function () {
// Reenable the inputs
setFormDisabledProps(false);
});
}
// This function clears the search results
// and the heading "Search Results"
function resetResults() {
$("#search-results-heading").text("");
$("#results").text("");
flag = 0;
}
// This function checks the user input
// fields for any unacceptable characters
// and removes them if found
function sanitizeInputs() {
let str = $("#ingredients").val();
str = str.replace(/[^a-zA-Z 0-9, ]/gim, "");
str = str.trim();
$("#ingredients").val(str);
}
Similar Reads
How to generate API documentation using Postman?
Postman is a popular API testing tool that is used to simplify the process of developing and testing APIs (Application Programming Interface). API acts as a bridge between two software applications which enables them to communicate and share data. In this article, you will learn how to generate API
2 min read
How to Create RESTful API and Fetch Data using ReactJS ?
React JS is more than just an open-source JavaScript library, it's a powerful tool for crafting user interfaces with unparalleled efficiency and clarity. One of React's core principles is its component-based architecture, which aligns perfectly with the Model View Controller (MVC) pattern. React com
5 min read
How to generate automated test reports using Postman ?
Postman is the API testing tool that helps to simplify the process of developing and testing APIs (Application Programming Interface). In this article, we will explore how to not only create environments but also generate automated test reports, enhancing efficiency and reliability in the API testin
2 min read
How to create and write tests for API requests in Postman?
Postman is an API(utility programming interface) development device that enables to construct, take a look at and alter APIs. It could make numerous varieties of HTTP requests(GET, POST, PUT, PATCH), store environments for later use, and convert the API to code for various languages(like JavaScript,
3 min read
How to create a REST API using json-server npm package ?
This article describes how to use the json-server package as a fully working REST API.What is json-server?json-server is an npm(Node Package Manager) module/package, used for creating a REST API effortlessly. Data is communicated in JSON(JavaScript Object Notation) format between client and server.I
4 min read
How to Create A REST API With JSON Server ?
Setting up a RESTful API using JSON Server, a lightweight and easy-to-use tool for quickly prototyping and mocking APIs. JSON Server allows you to create a fully functional REST API with CRUD operations (Create, Read, Update, Delete) using a simple JSON file as a data source. Table of Content GET Re
4 min read
How to Use API Keys authentication in Postman
Postman is an API(application programming interface) development tool that helps to build, test and modify APIs. In this tutorial, we will see how to use API Keys authentication in Postman. The API key is a unique identifier that authenticates requests and if several users are there, their username
2 min read
Create API Tester using Python Requests Module
Prerequisites: Python Requests module, API In this article, we will discuss the work process of the Python Requests module by creating an API tester. API stands for Application Programming Interface (main participant of all the interactivity). It is like a messenger that takes our requests to a syst
3 min read
Create a COVID-19 Tracker CLI using Node.js
In this article, we will see how to create a command-line Corona Virus Tracker using Node.js. We will track total cases, active cases, totally recovered cases, and total deaths in the Indian States. Approach: We use an npm package called 'request' to fetch data from publicly available covid-19 API
2 min read
Using Restify to Create a Simple API in Node.js
Restify is an npm package that is used to create efficient and scalable RESTful APIs in Nodejs. The process of creating APIs using Restify is super simple. Building a RESTful API is a common requirement for many web applications. Restify is a popular Node.js framework that makes it easy to create RE
6 min read