如何使用 REST API 创建 Covid19 Country wise status 项目？

今天，世界上所有国家都在与冠状病毒作斗争。每天，冠状病毒病例都在迅速增加。所有人每天跟踪 COVID 病例很重要，并应尽量保证自己的安全。我们制作了小型网络应用程序，可以向用户报告病例数、新病例数、新死亡数、康复数等总数。您只需输入国家/地区名称并单击搜索即可。

此应用程序还受到客户端脚本的保护，并使用免费的 Covid19 API。以下是API链接：
https://covid19api.com/

运行程序的步骤：我们在本文中展示了 JavaScript 和 HTML 文件。包括 HTML、CSS、js 在内的所有代码都在我的 Github 个人资料中。以下是完整的项目链接：
https://github.com/rohitdhonicsk/covid19webapp

Git 克隆https://github.com/rohitdhonicsk/covid19webapp ，将 GitHub 项目文件复制到您的计算机上。
现在打开 Index.html 文件。
输入国家名称并点击搜索。

所需的项目文件和模块：

你应该有三个主要文件 index.html（在 index.html 文件的代码下面），CSS（只有你想设计时才需要，你可以从我的 GitHub 存储库项目文件中下载 CSS）。第三个最重要的文件是 JavaScript 文件（我们在下面给出了完整代码），用于获取 COVID 数据和响应用户搜索。
您需要 jQuery，它是 JavaScript 库。您可以从 Jquery 官方网站或使用以下命令将 CDN 脚本放在您的 HTML 代码中：
注意：请确保机器中安装了NODE和NPM，否则请到节点官网下载安装。

首先，您必须在项目目录中键入以下命令。它将创建一个 package.json 文件。
```
npm init
```
现在输入以下命令来安装jQuery 。
```
npm install jquery
```

项目目录：

该项目将如下所示：
主页：
webapp的完整图像

COVID19 统计搜索印度国家：
工作示例印度

构建应用程序的步骤：

第一步是去API，将API的链接复制到postman app，可视化JSON格式的数据。我们正在使用 API 的汇总数据。
在 HTML 文件中创建一个表单，输入字段是国家/地区名称。

将 Id 分配给应在 JavaScript 上使用的标题、表单、输入和标签。下面是演示 HTML 文件，其中 class 和 id 用于样式和操作调用。

COVID RESULT
SEARCH COUNTRY NAME
  

  
  
  

    
      Country :

现在包含您的 CSS 文件（可选）。
请记住在 HTML 代码中包含以下两件事：
- jQuery CDN 链接
- 你的JS文件

现在，在您的 JS 文件中添加以下代码：

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

现在使用以下代码创建 performSearch()函数：

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

创建 formatSearchResults函数，该函数将为用户提供所需的搜索结果。

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 += 
"TotalConfirmed: " +
                item.TotalConfirmed + "
";
  
            formatedText += 
"NewDeaths: " +
                item.NewDeaths + "
";
  
            formatedText += 
"NewConfirmed: " +
                item.NewConfirmed + "
";
  
            formatedText += 
"NewRecovered: " +
                item.NewRecovered + "
";
  
            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("");
    }
}

最后一步是保护数据免受客户端脚本和重置函数。

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

完整的 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); });
});
  
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 += 
"TotalConfirmed: " +
                item.TotalConfirmed + "
";
  
            formatedText += 
"NewDeaths: " +
                item.NewDeaths + "
";
  
            formatedText += 
"NewConfirmed: " +
                item.NewConfirmed + "
";
  
            formatedText += 
"NewRecovered: " +
                item.NewRecovered + "
";
  
            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);
}

COVID RESULT

SEARCH COUNTRY NAME

TotalConfirmed: " + item.TotalConfirmed + "

NewDeaths: " + item.NewDeaths + "

NewConfirmed: " + item.NewConfirmed + "

NewRecovered: " + item.NewRecovered + "

TotalConfirmed: " + item.TotalConfirmed + "

NewDeaths: " + item.NewDeaths + "

NewConfirmed: " + item.NewConfirmed + "

NewRecovered: " + item.NewRecovered + "