How to create Covid19 Country wise status project using REST API ?

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 a 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 also protected from clientside scripting and uses Free Covid19 API. The following is the API Link:
https://covid19api.com/

Steps to Run the program: We are showing JavaScript and HTML File in this article. All codes including HTML, CSS, js are at my Github profile. The following is the complete project link:
https://github.com/rohitdhonicsk/covid19webapp

  1. Git clone https://github.com/rohitdhonicsk/covid19webapp, to copy the GitHub project file on your computer.
  2. Now open Index.html file.
  3. Type country name and click search.

Project File and Module Required:

  1. You should have three main file index.html (Below the code of index.html file), 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 JavaScript file (We have given full code below) that is needed to for fetching COVID data and responding to the user search.
  2. You require jQuery which is JavaScript Library. You can put CDN Script on your HTML Code from Jquery Official Website OR using 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:
Project Directory

The project will look like this:
Home Page:
full image of webapp

COVID19 stats search for INDIA country:
working example INDIA

Steps To Build the Application:

  1. The first step is to go to API and Copy the link of API to the postman app and visualize the JSON format of data. We are using the summary data of API.
  2. Create a form in HTML file with the input field is the country name.
  3. Assign Id to heading, form, input, and tag that should be used on JavaScript. Below is the Demo HTML file where class and id used for styling and action call.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    
    

  4. Now include your CSS file (its optional).
  5. Remember to include the below two thing in HTML code:
    • jQuery CDN link
    • Your JS file
  6. Now, add the following code in your JS file:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    // 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); });
    });

    chevron_right

    
    

  7. Now create performSearch() Function using the below code:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    function performSearch(event) {
      
      // Variable to hold request
      var 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
      var $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({
          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);
      });
    }

    chevron_right

    
    

  8. Creating formatSearchResults function that will give the user desire search result.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    var pat, flag = 0;
    function formatSearchResults(jsonResults) {
      
        // Storing Json Data in jsonobject variable
        var jsonObject = jsonResults;
      
        $("#search-results-heading").text("Search Results");
        var 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;
            }
        });
      
        // 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("");
        }
    }

    chevron_right

    
    

  9. And the last step is to protect data from client side scripting and reset function.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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() {
      var str = $("#ingredients").val();
      str = str.replace(/[^a-zA-Z 0-9, ]/gim, "");
      str = str.trim();
      $("#ingredients").val(str);
    }

    chevron_right

    
    

The Complete Javascript Code:

filter_none

edit
close

play_arrow

link
brightness_4
code

// 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); });
});
  
var pat, flag = 0;
function formatSearchResults(jsonResults) {
  
    // Storing Json Data in jsonobject variable
    var jsonObject = jsonResults;
  
    $("#search-results-heading").text("Search Results");
    var 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
    var 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
    var $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() {
    var str = $("#ingredients").val();
    str = str.replace(/[^a-zA-Z 0-9, ]/gim, "");
    str = str.trim();
    $("#ingredients").val(str);
}

chevron_right


full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.