Display popup comments

.eslintrc.json

@@ -16,7 +16,8 @@
     "eol-last": "off",
     "import/extensions": [ 1, {
       "js": "always", "json": "always"
-    }]
+    }],
+    "import/no-cycle": 0
   },
   "ignorePatterns": [
     "dist/",

src/apis/food.js

@@ -1,7 +1,8 @@
 /* eslint-disable import/no-cycle */
 import paginate from '../index.js';
 
-let meals = [];
+/* eslint-disable-next-line */
+export let meals = [];
 let currentPosts = [];
 let currentPage = 1;
 const postsPerPage = 10;

src/defaultTemplate.js

@@ -1,5 +1,6 @@
 /* eslint-disable import/no-cycle */
 import { getMealsLength } from './apis/food.js';
+import commentsPopup from './modal/comments-popup.js';
 
 export default async (defaultFood, mealsEl, getLike, resultHeading) => {
   const meals = await defaultFood;
@@ -31,7 +32,7 @@ export default async (defaultFood, mealsEl, getLike, resultHeading) => {
 
         </div>
         <div class="comment-like">
-          <button class="meal-btn" data-mealID="${
+          <button class="meal-btn comments-btn" data-mealID="${
   meal.idMeal
 }">Comments<svg class="meal-svg" width="3" height="6" viewBox="0 0 3 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style=""><path d="M0 0L3 3L0 6"></path></svg>
           </button>
@@ -53,6 +54,7 @@ export default async (defaultFood, mealsEl, getLike, resultHeading) => {
       )
       .join('');
     getMealsLength();
+    commentsPopup();
   }
 
   const hearts = document.querySelectorAll('.fa-heart');

src/index.html

@@ -84,6 +84,9 @@
 
           <div class="meal-details-content"></div>
         </div>
+
+        <div class="comments-modal"></div>
+
       </main>
 
       <div

src/modal/comments-popup.js

@@ -0,0 +1,67 @@
+import { meals } from '../apis/food.js';
+
+const commentsPopup = () => {
+  const commentsBtn = document.querySelectorAll('.comments-btn');
+  const commentsModal = document.querySelector('.comments-modal');
+
+  for (let i = 0; i < commentsBtn.length; i += 1) {
+    commentsBtn[i].addEventListener('click', () => {
+      commentsModal.innerHTML = `
+            <div id="comments-modal" class="modal">
+     <div class="modal-content-wrapper">
+       <div class="modal-content">
+         <span id="close-btn" class="close-modal">&times;</span>
+         <div class="container">
+           <div class="inner-content">
+             <img src="${meals[i].strMealThumb}" alt="${meals[i].strMeal}" class="meal-img"/>
+
+             <div class="text-box">
+               <h1 class="heading text-center">${meals[i].strMeal}</h1>
+               <div class="flex-items">
+                 <div class="left">
+                   <p class="text">Food: Assorted Meal</p>
+                 </div>
+                 <div class="right">
+                   <p class="text">Calories: 480</p>
+                 </div>
+               </div>
+             </div>
+
+             <div class="comments">
+               <h1 class="sub-heading text-center">Comments (2)</h1>
+             <div class="displayed-comments">
+               <p>03-10-2022  Jimmy: Delicious</p>
+               <p>11-05-2022  Jidula: I want to try it again!</p>
+             </div>
+             </div>
+
+             <div class="comments-form">
+               <form id="comments-form">
+                 <h1 class="sub-heading text-center">Add a comment</h1>
+                 <div class="form-control">
+                   <input type="text" id="name" placeholder="Enter your name" />
+                   <textarea id="comment" rows="3" placeholder="Enter your comment"></textarea>
+                 </div>
+                 <button type="submit" class="comment-btn">Submit</button>
+               </form>
+             </div>
+
+           </div>
+         </div>
+       </div>
+     </div>
+
+   </div>
+   `;
+      const closeBtn = () => {
+        const closeBtn = document.querySelector('.close-modal');
+        closeBtn.addEventListener('click', () => {
+          commentsModal.innerHTML = '';
+        });
+      };
+      closeBtn();
+    });
+  }
+};
+
+export default commentsPopup;

src/style.css

@@ -198,12 +198,26 @@ main {
   margin-left: 0;
 }
 
+.comments {
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+  gap: 10px;
+}
+
+.displayed-comments {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
 form {
   display: flex;
   flex-direction: column;
   max-width: 800px;
   margin: auto;
-  padding: 15px 10px;
+  padding: 15px 0;
+  text-align: left;
 }
 
 form input[type="text"],
@@ -225,6 +239,12 @@ form input[type="submit"] {
   font-size: 20px;
 }
 
+.form-control {
+  display: flex;
+  flex-direction: column;
+  width: 70%;
+}
+
 .comment-count-header {
   margin-bottom: 20px;
   font-weight: 700;
@@ -267,3 +287,93 @@ li.page-item.active {
 .ease-out {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
+
+/* Styling Modal */
+.modal {
+  display: block;
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100vh;
+  width: 100%;
+  overflow: auto;
+  background-color: rgba(65, 63, 63, 0.6);
+}
+
+.modal-content {
+  background-color: #fff;
+  margin: 40px auto;
+  width: 60%;
+  border-radius: 8px;
+  padding: 6px;
+}
+
+.close-modal {
+  float: right;
+  font-weight: 600;
+  font-size: 30px;
+  color: #374151;
+  margin-right: 10px;
+}
+
+.close-modal:hover {
+  cursor: pointer;
+}
+
+.modal .container {
+  border: 1px solid#ccc;
+  height: 80%;
+  border-radius: 8px;
+}
+
+.inner-content {
+  width: 70%;
+  margin: 20px auto;
+  padding: 20px;
+}
+
+.inner-content img {
+  width: 100%;
+  height: 300px;
+  border-radius: 8px;
+}
+
+.flex-items {
+  display: flex;
+  justify-content: space-between;
+  margin: 25px 0;
+}
+
+.text-box {
+  margin-top: 40px;
+}
+
+.heading {
+  font-weight: 900;
+  font-size: 30px;
+}
+
+.sub-heading {
+  font-weight: 600;
+  font-size: 20px;
+}
+
+.comments-form {
+  margin-top: 10px;
+}
+