Merge pull request #35 from yaseerokino/counter

ookino · web-flow · commit b0db9e3c9626 · 2021-09-17T09:13:59.000+01:00
Add function to count and render number of meals
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,8 +1,11 @@
 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/';
 
@@ -12,7 +15,9 @@ const displayMeals = () => {
     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;
diff --git a/src/style/style.css b/src/style/style.css
@@ -201,7 +201,6 @@ footer {
   border-radius: 1em;
   box-shadow: rgba(100, 100, 111, 0.5) 0 10px 20px 0;
   justify-content: center;
-  text-align: center;
 }
 
 .modal-header {
@@ -212,7 +211,6 @@ footer {
 .modal-details {
   display: flex;
   gap: 2em;
-  flex-direction: column;
 }
 
 .modal-img {
@@ -343,14 +341,11 @@ input {
 }
 
 .comment-form {
-  margin: auto;
   font-family: 'Space Grotesk', sans-serif;
   margin-top: 2em;
   display: flex;
   flex-direction: column;
   gap: 1em;
-  width: 70%;
-  text-align: center;
 }
 
 .no-comments {
@@ -364,7 +359,6 @@ input {
   display: flex;
   flex-direction: column;
   gap: 1em;
-  align-items: center;
   width: 100%;
 }
 
