diff --git a/.eslintrc.json b/.eslintrc.json
index 606da72..d7f2717 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -16,7 +16,8 @@
"eol-last": "off",
"import/extensions": [ 1, {
"js": "always", "json": "always"
- }]
+ }],
+ "import/no-cycle": 0
},
"ignorePatterns": [
"dist/",
diff --git a/src/apis/food.js b/src/apis/food.js
index 9252cd5..cf80484 100644
--- a/src/apis/food.js
+++ b/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;
diff --git a/src/defaultTemplate.js b/src/defaultTemplate.js
index 4938f10..02df1f1 100644
--- a/src/defaultTemplate.js
+++ b/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) => {
+
+
+
{
+ 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 = `
+
+ `;
+ const closeBtn = () => {
+ const closeBtn = document.querySelector('.close-modal');
+ closeBtn.addEventListener('click', () => {
+ commentsModal.innerHTML = '';
+ });
+ };
+ closeBtn();
+ });
+ }
+};
+
+export default commentsPopup;
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index 20b5b8f..22c307d 100644
--- a/src/style.css
+++ b/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;
+}
+
+.comments-form input,
+.comments-form input[type="text"] {
+ margin: 10px 0;
+ padding: 5px;
+ border-radius: 1px;
+ border: 2px solid #3741518a;
+}
+
+.comment-btn {
+ margin: 10px 0;
+ padding: 7px 12px;
+ color: white;
+ background-color: #374151;
+ width: 30%;
+}