places reviewed

assets/css/styles.css

@@ -115,6 +115,10 @@ body{
     text-decoration: underline;
 }
 
+#placesReviewed {
+    color: #ff8c00;
+}
+
 
 .carousel {
     max-width: 100%;
@@ -138,6 +142,10 @@ body{
     border-radius: 0px !important;
 }
 
+.places-reviewed {
+    color: #c5761b;
+    font-weight: bold;
+}
 
 footer { 
     text-align: center;

assets/scripts/scripts.js

@@ -25,6 +25,7 @@ document.addEventListener("DOMContentLoaded", function () {
         // Call a function to display the data
         displayFoodList(data);
         populateCategoryFilter(data);
+        updatePlacesReviewed(data);
     })
     .catch(error => console.error("Error fetching data:", error));
 
@@ -178,4 +179,19 @@ document.addEventListener("DOMContentLoaded", function () {
             displayFoodList(foodList);
         });
     }
+
+    function updatePlacesReviewed(foodList) {
+        const placesReviewedSpan = document.getElementById("placesReviewed");
+        placesReviewedSpan.textContent = countReviewedPlaces(foodList);
+    }
+
+    // Function to count the reviewed places
+    function countReviewedPlaces(foodList) {
+        return foodList.reduce((count, item) => {
+            if (item.category !== "PENDING") {
+                count++;
+            }
+            return count;
+        }, 0);
+    }
 });

index.html

@@ -23,6 +23,7 @@ <h1>OFFICIAL DUBLIN FOOD HITLIST 🍔🍔🍔</h1>
         <div class="row">
             <div class="col-md-7 px-0">
                 <input type="text" id="searchBar" class="form-control" placeholder="Search">
+                <p class="places-reviewed mt-1">Places Reviewed: <span id="placesReviewed"></span></p>
             </div>
             <div class="col-md-3 px-0">
                 <select id="categoryFilter" class="form-select">