Final correction

devphenom · Sep 10, 2020 · b0eeb94 · b0eeb94 · vercel · Sep 10, 2020
1 parent e84e6c1
commit b0eeb94
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -1 +1,3 @@
 # Cov19Strain
+
+Link: https://covidstrain.netlify.app
diff --git a/css/style.css b/css/style.css
@@ -159,13 +159,13 @@ a {
   }
 }
 
-.pointer {
-  cursor: pointer;
-}
-
 .active {
-  color: inherit !important;
   background-color: rgb(231, 231, 231) !important;
+  color: black !important;
+}
+
+.pointer {
+  cursor: pointer;
 }
 
 .text-orange {

diff --git a/js/script.js b/js/script.js
@@ -1,5 +1,5 @@
 // AOS.init();
-
+let eachTopCountries = document.getElementsByClassName("top-countries");
 $(document).ready(function () {
   $(".navbar-toggler").on("click", function () {
     $(".animated-icon3").toggleClass("open");
@@ -33,7 +33,8 @@ const andle = (array) => {
     topCountries(topCases);
     dateUpdate(date);
     recordPerCountryCode(topCases[0]);
-    document.getElementsByClassName("top-countries")[0].classList.add("active");
+
+    // eachTopCountries[0].classList.add("active");
 
     casedDiv.addEventListener("click", (event) => {
       let theEvent;
@@ -51,6 +52,13 @@ const andle = (array) => {
         }
       }
     });
+    for (var i = 0; i < eachTopCountries.length; i++) {
+      eachTopCountries[i].addEventListener("click", function () {
+        var current = document.getElementsByClassName("active");
+        current[0].className = current[0].className.replace(" active", "");
+        this.className += " active";
+      });
+    }
     document.getElementById("body").classList.remove("d-none");
     document.getElementById("loading").classList.add("d-none");
   }

diff --git a/js/ui.js b/js/ui.js
@@ -4,63 +4,63 @@ const globalRecord = (globalRec) => {
   ).innerText = globalRec.TotalConfirmed.toLocaleString("en");
   document.getElementById(
     "newConfirmed"
-  ).innerText = globalRec.NewConfirmed.toLocaleString("en");
+  ).innerText = `+${globalRec.NewConfirmed.toLocaleString("en")}`;
   document.getElementById("totalActive").innerText = (
     globalRec.TotalConfirmed - globalRec.TotalRecovered
   ).toLocaleString("en");
-  document.getElementById("newActive").innerText = (
+  document.getElementById("newActive").innerText = `+${(
     globalRec.NewConfirmed - globalRec.NewRecovered
-  ).toLocaleString("en");
+  ).toLocaleString("en")}`;
   document.getElementById(
     "totalRecovered"
   ).innerText = globalRec.TotalRecovered.toLocaleString("en");
   document.getElementById(
     "newRecovered"
-  ).innerText = globalRec.NewRecovered.toLocaleString("en");
+  ).innerText = `+${globalRec.NewRecovered.toLocaleString("en")}`;
   document.getElementById(
     "totalDeath"
   ).innerText = globalRec.TotalDeaths.toLocaleString("en");
   document.getElementById(
     "newDeath"
-  ).innerText = globalRec.NewDeaths.toLocaleString("en");
+  ).innerText = `+${globalRec.NewDeaths.toLocaleString("en")}`;
 };
 
 const recordPerCountryCode = (countryClicked) => {
   let recordPerCountry = `<h6><strong>${countryClicked.Country}</strong></h6>
   <div class="row">
     <div class="col-5 m-2 pt-2 text-center rounded border">
       <p class="text-muted">Total Cases</p>
-      <h6 id="country-total-case">${countryClicked.TotalConfirmed.toLocaleString(
+      <h6 id="country-total-case" class="text-primary">${countryClicked.TotalConfirmed.toLocaleString(
         "en"
       )}</h6>
     </div>
     <div class="col-5 m-2 pt-2 text-center rounded border">
       <p class="text-muted">Active Cases</p>
-      <h6 id="country-active-cases">${(
+      <h6 id="country-active-cases" class="text-danger">${(
         countryClicked.TotalConfirmed - countryClicked.TotalRecovered
       ).toLocaleString("en")}</h6>
     </div>
     <div class="col-5 m-2 pt-2 text-center rounded border">
       <p class="text-muted">Recovered</p>
-      <h6 id="country-recovered">${countryClicked.TotalRecovered.toLocaleString(
+      <h6 id="country-recovered" class="text-success">${countryClicked.TotalRecovered.toLocaleString(
         "en"
       )}</h6>
     </div>
     <div class="col-5 m-2 pt-2 text-center rounded border">
       <p class="text-muted">Total Deaths</p>
-      <h6 id="country-total-death">${countryClicked.TotalDeaths.toLocaleString(
+      <h6 id="country-total-death" class="text-danger">${countryClicked.TotalDeaths.toLocaleString(
         "en"
       )}</h6>
     </div>
     <div class="col-5 m-2 pt-2 text-center rounded border">
       <p class="text-muted">New Cases</p>
-      <h6 id="country-new-cases">${countryClicked.NewConfirmed.toLocaleString(
+      <h6 id="country-new-cases" class="text-primary">${countryClicked.NewConfirmed.toLocaleString(
         "en"
       )}</h6>
     </div>
     <div class="col-5 m-2 pt-2 text-center rounded border">
       <p class="text-muted">New Deaths</p>
-      <h6 id="country-new-death">${countryClicked.NewDeaths.toLocaleString(
+      <h6 id="country-new-death" class="text-danger">${countryClicked.NewDeaths.toLocaleString(
         "en"
       )}</h6>
     </div>`;
@@ -71,7 +71,7 @@ const topCountries = (value) => {
   let topRated = `
     ${value
       .map((cased) => {
-        return `<li class="list-group-item border-0 font-weight-bold d-flex align-items-center pointer top-countries" id = ${
+        return `<li class="list-group-item border-0 font-weight-bold `${if(value[0]){'active'}}` d-flex align-items-center pointer top-countries" id = ${
           cased.CountryCode
         }>
         <img src="https://www.countryflags.io/${
Original file line number	Diff line number	Diff line change
		@@ -1 +1,3 @@
		# Cov19Strain

		Link: https://covidstrain.netlify.app