worldCovid/script.js at master · Abhishek9608/worldCovid · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
let data = [];
let pageData = [];
let perPage = 25;
let activePage = 1;
let select;

fetch("https://api.covid19api.com/summary")
  .then((response) => response.json())
  .then(
    (res) =>
      (data = res.Countries.sort(function (a, b) {
        return b.TotalConfirmed - a.TotalConfirmed;
      }))
  )
  .then((res) => pagination(activePage))
  .then((err) => console.log(err));
function loadData() {
  // console.log(data);
  //set the data according to page
  page = activePage;
  let low = (page - 1) * perPage;
  let high = page * perPage;
  pageData = data.filter((a, i) => i >= low && i < high);
  fillPage(page);
}

function pagination(page) {
  let total = data.length;
  let pageCOunt = Math.ceil(total / perPage);
  let pages = document.getElementById("pages");
  pages.innerHTML = "";

  for (let i = 0; i < pageCOunt; i++) {
    let li = document.createElement("li");
    li.setAttribute("onclick", `changePage(${i + 1})`);
    if (i === page - 1) {
      li.setAttribute("class", "page-item active");
    } else {
      li.setAttribute("class", "page-item");
    }
    let a = document.createElement("a");
    a.setAttribute("class", "page-link");
    a.setAttribute("href", `#${i + 1}`);
    a.textContent = i + 1;

    li.append(a);
    pages.append(li);
  }
  loadData();
}

function changePage(newPage) {
  let liActive = document.querySelector(`#pages li:nth-child(${activePage})`);
  liActive.setAttribute("class", "page-item");
  activePage = newPage;
  let liNew = document.querySelector(`#pages li:nth-child(${activePage})`);
  liNew.setAttribute("class", "page-item active");
  loadData();
}

function fillPage() {
  var div = document.querySelector("tbody");
  div.innerHTML = "";

  pageData.forEach((item) => {
    console.log(item.Country);
    const singleData = ` <tr>
          <td class="border">${item.Country}</td>
          <td class="border">${item.TotalConfirmed}</td>
          <td class="border">${item.NewConfirmed}</td>
          <td class="border">${item.TotalDeaths}</td>
          <td class="border">${item.NewDeaths}</td>
          <td class="border">${item.NewRecovered}</td>
          <td class="border">${item.TotalRecovered}</td>
        </tr>`;
    div.insertAdjacentHTML("beforeend", singleData);
  });
}

window.addEventListener("load", () => {
  pagination(activePage);
});