Add function to count and render number of meals

ookino · ookino · commit 0be1038106df · 2021-09-17T08:12:58.000+01:00
diff --git a/src/index.html b/src/index.html
@@ -21,7 +21,9 @@
             <p>Ready Meals</p>
           </div>
           <div class="nav-buttons">
-            <a href="index.html" class="nav-button">Home</a>
+            <a href="index.html" class="nav-button"
+              >Meals(<span id="meal-counter"></span>)</a
+            >
             <a href="#Planets" class="nav-button">Planets</a>
             <a href="#Races" class="nav-button">Races</a>
           </div>
diff --git a/src/index.js b/src/index.js
@@ -1,18 +1,24 @@
 import './style/style.css';
 
 import API from './modules/data';
+import counter from './modules/counter';
 import render from './modules/render/meals';
 
+const mealCounter = document.getElementById('meal-counter');
+
 const endpoint = 'https://www.themealdb.com/api/json/v1/1/';
-const likesEndpoint = 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/lvQFdeSbvijlsDX1Y4VY/likes/';
+const likesEndpoint =
+  'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/lvQFdeSbvijlsDX1Y4VY/likes/';
 
 const displayMeals = () => {
   Promise.all([
     API.getMeals(`${endpoint}search.php?f=b`),
     API.getLikes(likesEndpoint),
   ]).then((data) => {
     render(data[0], data[1]);
+    const length = counter.meals(data[0].meals);
+    mealCounter.innerText = length;
   });
 };
 
-window.addEventListener('load', displayMeals);
+window.addEventListener('load', displayMeals);
diff --git a/src/modules/counter.js b/src/modules/counter.js
@@ -0,0 +1,7 @@
+const counter = {
+  meals: (allMeals) => allMeals.length,
+  comments: (allComments) => allComments.length,
+  reservation: (allReservations) => allReservations.length,
+};
+
+export default counter;
