📌  相关文章
📜  covid-19 - Javascript (1)

📅  最后修改于: 2023-12-03 15:14:16.058000             🧑  作者: Mango

Covid-19 Tracking with Javascript

Javascript is one of the most popular programming languages and has been widely adopted for developing web applications. In this project, we will be using Javascript to create a Covid-19 tracking application.

Introduction

The outbreak of Covid-19 has impacted every aspect of life. As of now, there are millions of people affected by the virus globally, and the number is increasing every day. To tackle this crisis, healthcare organizations are working tirelessly to identify, isolate, and treat infected individuals. However, to effectively combat Covid-19, it's important to be informed about its spread and stay updated with the latest statistics.

This project will develop a Covid-19 tracking application that will present up-to-date data on the spread of the virus, including total cases, recoveries, and deaths globally and by country.

Technologies Used

We will be using the following technologies to develop our application:

  • HTML/CSS: To structure and style our web page.
  • Javascript: To fetch data from the Covid-19 API and to manipulate data to display on the web page.
  • Covid-19 API: To retrieve data related to Covid-19.
Getting Started

Let's begin by creating a simple HTML/CSS structure for our web page. We will then use Javascript to fetch data from the Covid-19 API and display it on our web page.

HTML Structure
<!DOCTYPE html>
<html>
  <head>
    <title>Covid-19 Tracker</title>
    <link href="style.css" rel="stylesheet" />
  </head>

  <body>
    <header>
      <h1>Covid-19 Tracker</h1>
    </header>

    <div class="container">
      <h2>Global Cases</h2>
      <div class="cards"></div>

      <h2>Countries</h2>
      <div class="countries"></div>
    </div>

    <script src="app.js"></script>
  </body>
</html>
CSS Style
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h2 {
  font-size: 24px;
  margin-top: 30px;
}

.cards {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  background-color: #f5f5f5;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.card p {
  color: #7f8c8d;
}

.countries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.country {
  background-color: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.flag {
  height: 200px;
  width: 100%;
  object-fit: cover;
}

.info {
  padding: 20px;
}

.info h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 20px;
}

.info p {
  color: #7f8c8d;
  margin: 0;
}
Fetching Data from Covid-19 API

We will be using the Covid-19 API to fetch data related to Covid-19. We will use the fetch function in Javascript to retrieve data from the API as follows:

fetch("https://api.covid19api.com/summary")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log(error));

This code will retrieve Covid-19 data from the API and display it on the console. We will then use this data to display statistics on our web page.

Displaying Data

Now that we have fetched data from the Covid-19 API, let's update our web page to display the relevant statistics.

Global Cases

We will create a function to display global Covid-19 statistics on our web page as follows:

function displayGlobalSummary(data) {
  const globalCases = data.Global.TotalConfirmed;
  const globalDeaths = data.Global.TotalDeaths;
  const globalRecovered = data.Global.TotalRecovered;

  const cardsDiv = document.querySelector(".cards");

  const casesCard = document.createElement("div");
  casesCard.classList.add("card");
  casesCard.innerHTML = `
    <h3>Total Cases</h3>
    <p>${globalCases}</p>
  `;

  const deathsCard = document.createElement("div");
  deathsCard.classList.add("card");
  deathsCard.innerHTML = `
    <h3>Total Deaths</h3>
    <p>${globalDeaths}</p>
  `;

  const recoveredCard = document.createElement("div");
  recoveredCard.classList.add("card");
  recoveredCard.innerHTML = `
    <h3>Total Recovered</h3>
    <p>${globalRecovered}</p>
  `;

  cardsDiv.appendChild(casesCard);
  cardsDiv.appendChild(deathsCard);
  cardsDiv.appendChild(recoveredCard);
}

This function will create three cards and display global Covid-19 statistics on each card.

Country-wise Cases

We will now create a function to display country-wise Covid-19 statistics on our web page as follows:

function displayCountryData(data) {
  const countriesDiv = document.querySelector(".countries");

  data.Countries.forEach((country) => {
    const countryDiv = document.createElement("div");
    countryDiv.classList.add("country");
    countryDiv.innerHTML = `
      <img class="flag" src="https://www.countryflags.io/${country.CountryCode}/shiny/64.png" alt="${country.Country}" />
      <div class="info">
        <h3>${country.Country}</h3>
        <p><strong>Total Cases: </strong>${country.TotalConfirmed}</p>
        <p><strong>Total Deaths: </strong>${country.TotalDeaths}</p>
        <p><strong>Total Recovered: </strong>${country.TotalRecovered}</p>
      </div>
    `;

    countriesDiv.appendChild(countryDiv);
  });
}

This function will create cards for each country and display country-wise Covid-19 statistics on each card.

Final Result

After implementing the above functions, the final result will look like:

Covid-19 Tracker

Conclusion

In this project, we developed a Covid-19 tracking application using Javascript, HTML/CSS, and the Covid-19 API. We fetched data from the API and displayed Covid-19 statistics on our web page. Although this application is simple, it can be extended to include more features and functionality to make it even more useful to users.