Membuat Aplikasi COVID 19 Realtime Update

Membuat Aplikasi COVID 19 Realtime Update



Hallo sahabat ruangcoder, artikel kali ini tentang Membuat Aplikasi COVID 19 Realtime Update, bagi sahabat yang tertarik membuat sebuah informasi tentang virus corona / covid 19 ini, dan ingin membuatkan aplikasi sedehernanya, nah artikel kali ini admin akan memberikan cara nya untuk membuat aplikasi tersebut, dengan berbasis API, tentu mudah dan tidak begitu terlalu sulit.

Hari ini Kalian akan belajar membuat program tabel data berbasis API untuk menunjukkan jumlah kasus virus corona . Pada dasarnya ada table dengan 4 kolom untuk nama negara, total kasus, kematian, dan pulih . Juga di bagian atas, kalian akan melihat jumlah total kasus, kematian, dan orang-orang yang pulih di dunia. Dan ada pengurutan berdasarkan program yang tersedia, kalian dapat mengurutkan berdasarkan sebagian besar kasus, sebagian besar pulih, dan sebagian besar kematian juga, Kalian dapat mencari negara tertentu.

Nah jika sahabat tertarik ingin membuatnya, seperti apasih contoh programnya, dari thumbnail aja sih sebenernya sobat sudah dapat melihatnya dengan jelas, namun disini admin akan pampang lagi dibawah ini tentu dengan source code nya.


Membuat Aplikasi COVID 19 Realtime Update

Pertama admin telah membuat struktur menggunakan tag div HTML , tabel, input, dan elemen lainnya . Di sana admin telah membuat teks memasukkan untuk pencarian, dan pilih input untuk fungsi sortir. Setelah itu, admin telah membuat struktur tabel nanti akan diisi oleh JS menggunakan data API. Juga, buat dua div lagi untuk menggulir ke atas dan gulir ke bawah. Dalam file HTML , admin telah menautkan file lain seperti CSS, JavaScript, dan tautan CDN lainnya.

Sekarang menggunakan CSS admin telah menempatkan semua item di tempat yang tepat, seperti yang kalian lihat di pratinjau. Pertama menggunakan CSS admin memberikan nilai-nilai dasar seperti ukuran, posisi, margin, padding, dll untuk semua elemen. Di sana admin telah menggunakan perintah tampilan untuk membuat tata letak. Untuk membuat desain responsif , admin telah menggunakan kueri  @media dan mengurangi ukuran beberapa elemen.

JavaScript  di sana mengambil data API dan menunjukkan fungsi dalam program ini. Ada perintah JS yang ditempatkan sesuai dengan dokumentasi API. Setelah itu, admin menggunakan JS if { } else { } pernyataan untuk membuat fungsi sortir . Juga digunakan . perintah addEventListenergulir fungsi naik dan turun.

Meninggalkan semua hal lain yang akan kalian mengerti setelah melihat kode , admin tidak bisa menjelaskan semuanya secara tertulis. Untuk membuat program ini, kalian harus membuat 3 file. Pertama untuk HTML , kedua untuk CSS , dan file ketiga untuk JavaScript . Ikuti langkah-langkah untuk membuat program ini tanpa kesalahan.


Buat file HTML bernama index.html dan masukkan kode-kode ini di bawah ini.

<!DOCTYPE html>
<!-- Code By RuangCoder ( https://www.ruangcoder.com ) -->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>COVID-19 Realtime Update | ruangcoder.com</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">

</head>
<body>

<div class="preloader">
  <div class="preloader__content">
    <div class="preloader__loader"></div>
    <div class="preloader__txt">Loading ...</div>
  </div>
</div>
<div class="container">
  <div class="statistics">
    <div class="global">
      <div class="global__title">
        corona virus update
      </div>
      <div class="global__cases">
        <h1></h1>
        <h2>Total Cases</h2>
      </div>
      <div class="global__deaths">
        <h1></h1>
        <h2>Total Deaths</h2>
      </div>
      <div class="global__recovered">
        <h1></h1>
        <h2>Total Recovered</h2>
      </div>
    </div>
    <input type="text" id="search" name="country" placeholder="Search Countries">
    <select class="custom-select" id="select" onchange="changeOrder()">
      <option selected="" disabled="">Sort By</option>
      <option value="cases">Total Cases</option>
      <option value="deaths">Total Deaths</option>
      <option value="recovered">Total Recoveries</option>
    </select>
    <table class="table">
      <thead>
        <tr>
          <th>Country</th>
          <th>Cases</th>
          <th>Deaths</th>
          <th>Recovered</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
  <div class="arrow">
    <div class="arrow__up">
    </div>
    <div class="arrow__down">
    </div>
  </div>
</div>

  <script src='https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/iamdustan-smoothscroll/0.4.0/smoothscroll.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

Sekarang buat file CSS bernama style.css dan masukkan kode-kode ini di sini.

/* Code By RuangCoder ( https://www.ruangcoder.com ) */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  font-family: monospace;
}

body {
  background-color: #212121;
  position: relative;
  overflow-x: hidden;
}

.preloader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background-color: #181818;
  z-index: 999;
  visibility: visible;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
}
.preloader--hidden {
  animation-name: hide;
  animation-duration: 0.5s;
  animation-timing-function: linear;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.preloader__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
}
.preloader__loader {
  margin: 0 auto;
  width: 70px;
  height: 70px;
  border: 8px solid #f0f0f0;
  border-top: 8px solid #696969;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}
.preloader__txt {
  padding: 10px;
  color: #f0f0f0;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #f0f0f0;
}
@media screen and (max-width: 576px) {
  .container {
    display: block;
  }
}
.container .statistics {
  margin: 15px;
  position: relative;
}
.container .statistics .global {
  position: relative;
}
.container .statistics .global__title {
  margin: 15px 0;
  text-transform: uppercase;
  font-size: xx-large;
  font-weight: bold;
}
.container .statistics .global__cases {
  margin: 15px 15px 0 0;
  display: inline-block;
}
@media screen and (max-width: 576px) {
  .container .statistics .global__cases {
    display: block;
  }
}
.container .statistics .global__cases h1 {
  color: #eff318;
}
.container .statistics .global__recovered {
  margin: 15px 15px 0 0;
  display: inline-block;
}
@media screen and (max-width: 576px) {
  .container .statistics .global__recovered {
    display: block;
  }
}
.container .statistics .global__recovered h1 {
  color: #41eb60;
}
.container .statistics .global__deaths {
  margin: 15px 15px 0 0;
  display: inline-block;
}
@media screen and (max-width: 576px) {
  .container .statistics .global__deaths {
    display: block;
  }
}
.container .statistics .global__deaths h1 {
  color: #fb5e53;
}
.container .statistics > input[type="text"] {
  margin: 15px 0;
  width: 200px;
  display: inline-block;
  background-color: #181818;
  color: #f0f0f0;
  padding: 9px 15px;
  font-size: 18px;
  border: 1px solid #696969;
}
@media screen and (max-width: 576px) {
  .container .statistics > input[type="text"] {
    display: block;
  }
}
.container .statistics > .custom-select {
  margin: 15px 0;
  width: 200px;
  display: inline-block;
  background-color: #181818;
  color: #f0f0f0;
  padding: 9px 15px;
  font-size: 18px;
  border: 1px solid #696969;
}
@media screen and (max-width: 576px) {
  .container .statistics > .custom-select {
    display: block;
  }
}
.container .statistics .table {
  border-collapse: collapse;
  width: 100%;
  min-width: 320px;
}
@media screen and (max-width: 576px) {
  .container .statistics .table thead,
  .container .statistics .table tbody,
  .container .statistics .table th,
  .container .statistics .table td,
  .container .statistics .table tr {
    display: block;
  }
}
.container .statistics .table > thead {
  background-color: #181818;
}
@media screen and (max-width: 576px) {
  .container .statistics .table > thead {
    display: none;
  }
}
.container .statistics .table > thead > tr > th {
  text-align: left;
  font-size: 22px;
}
.container .statistics .table > thead > tr > th:not(:first-child) {
  text-align: right;
}
@media screen and (max-width: 576px) {
  .container .statistics .table td:nth-of-type(1)::before {
    content: "Country";
  }
  .container .statistics .table td:nth-of-type(2)::before {
    content: "Cases";
  }
  .container .statistics .table td:nth-of-type(3)::before {
    content: "Deaths";
  }
  .container .statistics .table td:nth-of-type(4)::before {
    content: "Recovered";
  }
}
.container .statistics .table th,
.container .statistics .table td {
  border: 1px solid #696969;
  padding: 9px 15px;
  white-space: nowrap;
}
.container .statistics .table > tbody > tr > td {
  font-size: 18px;
}
.container .statistics .table > tbody > tr > td img {
  width: 24px;
  vertical-align: baseline;
  margin-right: 10px;
}
@media screen and (max-width: 576px) {
  .container .statistics .table > tbody > tr > td {
    position: relative;
    text-align: right;
  }
  .container .statistics .table > tbody > tr > td:first-child {
    background-color: #181818;
    padding-left: 100px;
    white-space: normal;
  }
  .container .statistics .table > tbody > tr > td::before {
    position: absolute;
    top: 0;
    left: 0;
    padding: 9px 15px;
    white-space: nowrap;
  }
}
.container .statistics .table > tbody > tr > td:not(:first-child) {
  text-align: right;
}
.container .statistics .hidden {
  display: none !important;
}
.container .arrow {
  position: fixed;
  right: 0;
  bottom: 0;
}
.container .arrow__up {
  position: relative;
  cursor: pointer;
  background-color: rgba(155, 155, 155, 0.5);
  width: 40px;
  height: 40px;
  border-radius: 5px;
  margin: 0 25px 3px 0;
}
.container .arrow__up::before {
  content: "";
  position: absolute;
  border-top: solid 4px #f0f0f0;
  border-right: solid 4px #f0f0f0;
  width: 16px;
  height: 16px;
  left: 10px;
  top: 14px;
  transform: rotate(-45deg);
}
.container .arrow__down {
  position: relative;
  cursor: pointer;
  background-color: rgba(155, 155, 155, 0.5);
  width: 40px;
  height: 40px;
  border-radius: 5px;
  margin: 0 25px 25px 0;
}
.container .arrow__down::before {
  content: "";
  position: absolute;
  border-top: solid 4px #f0f0f0;
  border-right: solid 4px #f0f0f0;
  width: 16px;
  height: 16px;
  left: 10px;
  bottom: 14px;
  transform: rotate(135deg);
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes hide {
  0% {
    opacity: 1;
    visibility: visible;
  }
  99% {
    opacity: 0;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

Langkah terakhir, buat file JavaScript bernama function.js dan masukkan kodenya.

// Code By RuangCoder ( https://ruangcoder.com )
// Add a request interceptor
axios.interceptors.request.use(
  function (config) {
    //console.log("request sent", new Date());
    return config;
  },
  function (error) {
    preloader.classList.add("preloader--hidden");
    alert(error);
    return Promise.reject(error);
  }
);

var preloader = document.querySelector(".preloader");

// Add a response interceptor
axios.interceptors.response.use(
  function (response) {
    preloader.classList.add("preloader--hidden");
    return response;
  },
  function (error) {
    preloader.classList.add("preloader--hidden");
    alert(error);
    return Promise.reject(error);
  }
);

function getGlobalData() {
  return axios.get("https://corona.lmao.ninja/v2/all");
}

function getCountriesData() {
  return axios.get("https://corona.lmao.ninja/v2/countries");
}

axios
  .all([getGlobalData(), getCountriesData()])
  .then(
    axios.spread(function (global, countries) {
      //global
      console.log("%c全球 Global", "color: #fb5e53");
      console.log("確診 Cases", global.data.cases);
      console.log("死亡 Deaths", global.data.deaths);
      console.log("康復 Recovered", global.data.recovered);

      var totalCases = global.data.cases.toLocaleString();
      var totalDeaths = global.data.deaths.toLocaleString();
      var totalRecovered = global.data.recovered.toLocaleString();

      document.getElementsByClassName(
        "global__cases"
      )[0].childNodes[1].innerHTML = totalCases;
      document.getElementsByClassName(
        "global__recovered"
      )[0].childNodes[1].innerHTML = totalRecovered;
      document.getElementsByClassName(
        "global__deaths"
      )[0].childNodes[1].innerHTML = totalDeaths;

      //countries
      const tbody = document.getElementsByTagName("tbody")[0];
      var countries = countries.data;
      countries.forEach(function (element, index, array) {
        const tr = document.createElement("tr");
        // 國旗 flag
        const img = document.createElement("img");
        img.src = element.countryInfo.flag;
        img.alt = element.countryInfo.iso2;
        img.setAttribute("title", element.countryInfo.iso2);
        var values = [
          element.country,
          element.cases,
          element.deaths,
          element.recovered
        ];
        values.forEach(function (element, index, array) {
          const td = document.createElement("td");
          element =
            validation.isNumber(element) === "NaN"
              ? element
              : element.toLocaleString();
          if (!index) {
            let text = document.createTextNode(element);
            td.appendChild(img);
            td.appendChild(text);
          } else {
            td.innerHTML = element;
          }
          tr.appendChild(td);
        });
        tbody.appendChild(tr);
      });
    })
  )
  .catch(function (error) {
    console.log(error);
  });

var validation = {
  isNumber: function (str) {
    //  /^\d+$/g is equal to /^[0-9]+$/g;
    var patt = /^\d+$/g;
    return patt.test(str);
  }
};

var search = document.getElementById("search");
search.addEventListener("keyup", function () {
  var value = this.value.toLowerCase();
  console.log("value", value);
  const rows = document.querySelectorAll("tbody tr");
  const rowsArray = Array.prototype.slice.call(rows);
  rowsArray.forEach(function (element, index, array) {
    var tdCountry = element.childNodes[0].innerHTML.toLowerCase();
    if (tdCountry.indexOf(value) > -1) {
      //console.log(tdCountry, tdCountry.indexOf(value));
      element.classList.remove("hidden");
    } else {
      element.classList.add("hidden");
    }
  });
});

function changeOrder() {
  const value = document.getElementById("select").value;
  const index = document.getElementById("select").selectedIndex;
  //console.log(value, index);
  const rows = document.querySelectorAll("tbody tr");
  const rowsArray = Array.prototype.slice.call(rows);
  rowsArray
    .sort(function (A, B) {
      var num1 = A.childNodes[index].innerHTML;
      num1 = num1.replace(",", "");
      var num2 = B.childNodes[index].innerHTML;
      num2 = num2.replace(",", "");
      return num2 - num1;
    })
    .forEach(function (tr) {
      tr.parentElement.appendChild(tr);
    });
  //console.log(rowsArray);
}
document.querySelector(".arrow__up").addEventListener("click", function () {
  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });
});

document.querySelector(".arrow__down").addEventListener("click", function () {
  window.scrollTo({
    top: document.body.scrollHeight,
    behavior: "smooth"
  });
});

Nah sahabat disini kalian sudah berhasil Membuat Aplikasi COVID 19 Realtime Update mungkin itu saja artikel pada kesempatan kali ini, semoga bermanfaat buat kalian semua dan terimakasih sudah berkunjung, dan jangan bosan - bosan untuk berkunjung

Anda mungkin menyukai postingan ini