Table data

src/index.html

@@ -54,7 +54,7 @@
       class="particles"
     ></div>
 
-    <div class="container">
+    <div class="container my-2 my-sm-4 my-md-5">
       <div class="row gap-4">
         <div class="col">
           <div class="card card-cust card-cust--spacing shadow border border-0">
@@ -168,24 +168,44 @@ <h5 class="card-title">Yearly Vaccinations by Country</h5>
       <div class="row gap-4 mt-md-5 mt-4">
         <div class="col">
           <div class="card card-cust card-cust--chart shadow border border-0">
+            <div class="card-head row p-4">
+              <div class="col">
+                <h5 class="card-title">Countries and Provinces Ranked by Total Cases</h5>
+              </div>
+            </div>
+
             <div class="card-body">
               <table class="table table-striped">
                 <thead class="table-light">
                   <tr>
-                    <th scope="col">Country</th>
-                    <th scope="col">Total Cases</th>
-                    <th scope="col">Total Deaths</th>
-                    <th scope="col">Total Recoveries</th>
+                    <th
+                      class="rank"
+                      scope="col"
+                    >#</th>
+
+                    <th
+                      class="country"
+                      scope="col"
+                    >Country</th>
+
+                    <th
+                      class="province"
+                      scope="col"
+                    >Province</th>
+
+                    <th
+                      class="cases"
+                      scope="col"
+                    >Total Cases</th>
+
+                    <th
+                      class="deaths"
+                      scope="col"
+                    >Total Deaths</th>
                   </tr>
                 </thead>
 
-                <tbody>
-                  <tr>
-                    <th scope="row">Morocco</th>
-                    <td>100</td>
-                    <td>50</td>
-                    <td>50</td>
-                  </tr>
+                <tbody id="table-body">
                 </tbody>
               </table>
             </div>
@@ -200,7 +220,6 @@ <h5 class="card-title">Yearly Vaccinations by Country</h5>
   <script src="verbose/chart.js/chart.umd.js"></script>
   <script src="verbose/chart.js/index.umd.min.js"></script>
   <script src="verbose/countup.js/countUp.umd.js"></script>
-  <script src="verbose/fuse.js/fuse.min.js"></script>
 
   <script src="scripts/particles.js"></script>
 
@@ -214,6 +233,11 @@ <h5 class="card-title">Yearly Vaccinations by Country</h5>
     src="scripts/chart.js"
   ></script>
 
+  <script
+    type="module"
+    src="scripts/table.js"
+  ></script>
+
   <script
     type="module"
     src="scripts/main.js"

src/scripts/api.js

@@ -56,6 +56,25 @@ export function getVaccinationData() {
             }), {})
         }));
 
+        resolve(result);
+      });
+  });
+}
+
+export function getCountryData() {
+  return new Promise(resolve => {
+    fetch('https://disease.sh/v3/covid-19/historical?lastdays=all')
+      .then(e => e.json())
+      .then(data => {
+        const result = data.map(country => ({
+          ...country,
+          timeline: Object
+            .entries(country.timeline)
+            .filter(e => e[0] !== 'recovered')
+            .map(e => ({ [e[0]]: Object.values(e[1]).reverse()[0] }))
+            .reduce((obj, e) => ({ ...obj, ...e }), {})
+        })).sort((a, b) => b.timeline.cases - a.timeline.cases);
+
         resolve(result);
       });
   });

src/scripts/table.js

@@ -0,0 +1,44 @@
+import { getCountryData } from './api.js';
+
+window.addEventListener('DOMContentLoaded', async () => {
+  const data = await getCountryData();
+  populateTable(data);
+
+  function populateTable(data) {
+    const tableBodyElement = document.getElementById('table-body');
+    tableBodyElement.innerHTML = '';
+
+    for (let i = 0; i < data.length; ++i) {
+      const stat = data[i];
+
+      const rowElement = document.createElement('tr');
+      const rankElement = document.createElement('td');
+      const countryElement = document.createElement('td');
+      const proviceElement = document.createElement('td');
+      const casesElement = document.createElement('td');
+      const deathsElement = document.createElement('td');
+
+      rankElement.textContent = i + 1;
+      rankElement.classList.add('rank');
+
+      countryElement.textContent = stat.country;
+      countryElement.classList.add('country');
+
+      casesElement.textContent = stat.timeline.cases;
+      casesElement.classList.add('cases');
+
+      deathsElement.textContent = stat.timeline.deaths;
+      deathsElement.classList.add('deaths');
+
+      proviceElement.textContent = stat.province || 'All';
+      proviceElement.classList.add('province');
+
+      rowElement.appendChild(rankElement);
+      rowElement.appendChild(countryElement);
+      rowElement.appendChild(proviceElement);
+      rowElement.appendChild(casesElement);
+      rowElement.appendChild(deathsElement);
+      tableBodyElement.appendChild(rowElement);
+    }
+  }
+});

src/styles/table.css

@@ -1,5 +1,27 @@
 .table {
   margin-bottom: 0;
+  margin-top: -15px;
+
   overflow: hidden;
   border-radius: 10px;
+
+  --bs-table-color: #53567e;
+  --bs-table-striped-color: #53567e;
+
+  --bs-table-bg: #dfdfff;
+  --bs-table-striped-bg: #e6e6ff;
+}
+
+.table thead {
+  --bs-table-bg: #CED0FF;
+  --bs-table-color: #53567e;
+}
+
+.table tbody td {
+  text-transform: capitalize;
+}
+
+.table td:is(.cases, .deaths),
+.table th:is(.cases, .deaths) {
+  text-align: right;
 }