diff --git a/src/index.js b/src/index.js
index 39516b7..4dde16c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,3 +1,8 @@
import './base.css';
import './style.css';
-// import logo from './yummly.svg';
\ No newline at end of file
+// import logo from './yummly.svg';
+
+import { displayReservationModal, closeModal } from './module/reservation.js';
+
+displayReservationModal();
+closeModal();
diff --git a/src/module/reservation.js b/src/module/reservation.js
new file mode 100644
index 0000000..0b6198c
--- /dev/null
+++ b/src/module/reservation.js
@@ -0,0 +1,21 @@
+const reservationBtn = document.querySelector('.reservation-btn');
+const modal = document.querySelector('.modal');
+
+const displayReservationModal = () => {
+ window.addEventListener('DOMContentLoaded', () => {
+ modal.style.display = 'none';
+ });
+ reservationBtn.addEventListener('click', () => {
+ modal.style.display = 'block';
+ });
+};
+
+const closeModal = () => {
+ const closeBtn = document.querySelector('#closeBtn');
+
+ closeBtn.addEventListener('click', () => {
+ modal.style.display = 'none';
+ });
+};
+
+export { displayReservationModal, closeModal };
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index 5d5098d..e2b5f6e 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,269 +1,367 @@
/* Main Styling */
main {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- text-align: center;
- margin: auto;
- background-color: #374151;
- }
-
- .container {
- margin: auto;
- }
-
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ margin: auto;
+ background-color: #374151;
+}
+
+.container {
+ margin: auto;
+}
+
+.meals {
+ display: grid;
+ grid-template-columns: repeat(1, minmax(0, 1fr));
+ gap: 1.25rem /* 20px */;
+ margin-top: 1.25rem; /* 20px */
+ padding: 20px 10px;
+}
+
+.meal-img {
+ width: 100%;
+ border-style: solid;
+ border-width: 4px;
+ border-color: rgba(255, 255, 255, 1);
+}
+
+.meal {
+ border-radius: 0.25rem /* 4px */;
+ overflow: hidden;
+
+ --tw-shadow:
+ 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+ 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+ box-shadow:
+ var(--tw-ring-offset-shadow, 0 0 #0000),
+ var(--tw-ring-shadow, 0 0 #0000),
+ var(--tw-shadow);
+ position: relative;
+ height: 21rem /* 240px */;
+ width: 15rem /* 240px */;
+ text-align: left;
+}
+
+.title-likes {
+ display: flex;
+ justify-content: center;
+}
+
+.meal-title {
+ font-weight: bold;
+ padding: 0 0.5rem;
+}
+
+.comment-like {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 0.5rem;
+}
+
+.meal-btn {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-radius: 9999px;
+ font-size: 0.875rem;
+ font-weight: 600;
+ white-space: nowrap;
+ padding: 0.5rem 12px;
+ background-color: rgb(238 242 255 / 1);
+ color: rgb(79 70 229 / 1);
+}
+
+.meal-btn:hover {
+ background-color: rgb(199 210 254 / 1);
+}
+
+.fas.fa-heart {
+ cursor: pointer;
+}
+
+.meal-svg {
+ overflow: visible;
+ margin-left: 0.75rem /* 12px */;
+ color: rgb(165 180 252 / 1);
+}
+
+.meal-svg:hover {
+ color: rgb(129 140 248 / 1);
+}
+
+@media (min-width: 475px) {
.meals {
- display: grid;
- grid-template-columns: repeat(1, minmax(0, 1fr));
- gap: 1.25rem /* 20px */;
- margin-top: 1.25rem; /* 20px */
- padding: 20px 10px;
- }
-
- .meal-img {
- width: 100%;
- border-style: solid;
- border-width: 4px;
- border-color: rgba(255, 255, 255, 1);
+ grid-template-columns: repeat(2, minmax(0, 1fr));
}
-
+
.meal {
- border-radius: 0.25rem /* 4px */;
- overflow: hidden;
-
- --tw-shadow:
- 0 4px 6px -1px rgba(0, 0, 0, 0.1),
- 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
- box-shadow:
- var(--tw-ring-offset-shadow, 0 0 #0000),
- var(--tw-ring-shadow, 0 0 #0000),
- var(--tw-shadow);
- position: relative;
- height: 21rem /* 240px */;
- width: 15rem /* 240px */;
- text-align: left;
- }
-
- .title-likes {
- display: flex;
- justify-content: center;
- }
-
- .meal-title {
- font-weight: bold;
- padding: 0 0.5rem;
- }
-
- .comment-like {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0 0.5rem;
- }
-
- .meal-btn {
- display: flex;
- justify-content: space-between;
- align-items: center;
- border-radius: 9999px;
- font-size: 0.875rem;
- font-weight: 600;
- white-space: nowrap;
- padding: 0.5rem 12px;
- background-color: rgb(238 242 255 / 1);
- color: rgb(79 70 229 / 1);
- }
-
- .meal-btn:hover {
- background-color: rgb(199 210 254 / 1);
- }
-
- .fas.fa-heart {
- cursor: pointer;
- }
-
- .meal-svg {
- overflow: visible;
- margin-left: 0.75rem /* 12px */;
- color: rgb(165 180 252 / 1);
- }
-
- .meal-svg:hover {
- color: rgb(129 140 248 / 1);
- }
-
- @media (min-width: 475px) {
- .meals {
- grid-template-columns: repeat(2, minmax(0, 1fr));
- }
-
- .meal {
- height: 19rem /* 224px */;
- width: 13rem /* 208px */;
- }
- }
-
- @media (min-width: 640px) {
- .meals {
- grid-template-columns: repeat(3, minmax(0, 1fr));
- }
-
- .meal {
- height: 19rem /* 224px */;
- width: 13rem /* 208px */;
- }
- }
-
- @media (min-width: 1280px) {
- .meals {
- grid-template-columns: repeat(4, minmax(0, 1fr));
- }
- }
-
- /* Modals */
-
- /* meal details */
- .meal-details {
- z-index: 10;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- -webkit-transform: translate(-50%, -50%);
- -moz-transform: translate(-50%, -50%);
- -ms-transform: translate(-50%, -50%);
- -o-transform: translate(-50%, -50%);
- color: #374151;
- background: #d1d5db;
- border-radius: 1rem;
- -webkit-border-radius: 1rem;
- -moz-border-radius: 1rem;
- -ms-border-radius: 1rem;
- -o-border-radius: 1rem;
- width: 90%;
- height: 90%;
- overflow-y: scroll;
- display: none;
- padding: 2rem 0;
- }
-
- .meal-details::-webkit-scrollbar {
- width: 10px;
- }
-
- .meal-details::-webkit-scrollbar-thumb {
- background: rgba(17, 24, 39, 1);
- border-radius: 2rem;
- -webkit-border-radius: 2rem;
- -moz-border-radius: 2rem;
- -ms-border-radius: 2rem;
- -o-border-radius: 2rem;
+ height: 19rem /* 224px */;
+ width: 13rem /* 208px */;
}
-
- .meal-details.showRecipe {
- display: block;
- }
-
- .single-meal-p {
- margin: auto;
- letter-spacing: 0.025em;
- line-height: 1.5;
- max-width: 56rem /* 896px */;
- }
-
- .single-meal-ul {
- padding-left: 0;
- }
-
- .single-meal-ul-li {
- border-width: 2px;
- border-style: solid;
- border-color: rgba(229, 231, 235, 1);
- border-radius: 0.25rem /* 4px */;
- background-color: rgba(255, 255, 255, 1);
- background-color: rgba(17, 24, 39, 1);
- display: inline-block;
- color: rgba(17, 24, 39, 1);
- color: rgba(229, 231, 235, 1);
- font-size: 0.75rem /* 12px */;
- line-height: 1rem /* 16px */;
- font-weight: 700;
- padding: 0.25rem /* 4px */;
- margin-top: 0;
- margin-right: 0.25rem /* 4px */;
- margin-bottom: 0.25rem /* 4px */;
- margin-left: 0;
- }
-
- form {
- display: flex;
- flex-direction: column;
- max-width: 800px;
- margin: auto;
- padding: 15px 10px;
- }
-
- form input[type="text"],
- textarea {
- margin: 10px 0;
- padding: 10px;
- border-radius: 6px;
- max-width: 100%;
- border: 2px solid #3741518a;
- }
-
- form input[type="submit"] {
- background: #374151;
- padding: 10px;
- margin: 10px 0;
- color: #fff;
- max-width: 100%;
- border-radius: 6px;
- font-size: 20px;
- }
-
- .comment-count-header {
- margin-bottom: 20px;
- font-weight: 700;
- font-size: 2rem;
- }
-
- .comment-header {
- font-size: 1.5rem;
- font-weight: 700;
- }
-
- .comment-display {
- max-width: 800px;
- margin: 50px auto;
- }
-
- .comment-display li {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- margin-left: 20px;
- }
-
- /* active page button styles */
- li.page-item.active {
- background-color: aqua;
- }
-
- /* Transitions */
- .transition-all {
- transition-property: all;
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
- transition-duration: 150ms;
- }
-
- .duration-1000 {
- transition-duration: 1000ms;
+}
+
+@media (min-width: 640px) {
+ .meals {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
}
-
- .ease-out {
- transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+
+ .meal {
+ height: 19rem /* 224px */;
+ width: 13rem /* 208px */;
}
-
\ No newline at end of file
+}
+
+@media (min-width: 1280px) {
+ .meals {
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ }
+}
+
+/* Modals */
+
+/* meal details */
+.meal-details {
+ z-index: 10;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ -webkit-transform: translate(-50%, -50%);
+ -moz-transform: translate(-50%, -50%);
+ -ms-transform: translate(-50%, -50%);
+ -o-transform: translate(-50%, -50%);
+ color: #374151;
+ background: #d1d5db;
+ border-radius: 1rem;
+ -webkit-border-radius: 1rem;
+ -moz-border-radius: 1rem;
+ -ms-border-radius: 1rem;
+ -o-border-radius: 1rem;
+ width: 90%;
+ height: 90%;
+ overflow-y: scroll;
+ display: none;
+ padding: 2rem 0;
+}
+
+.meal-details::-webkit-scrollbar {
+ width: 10px;
+}
+
+.meal-details::-webkit-scrollbar-thumb {
+ background: rgba(17, 24, 39, 1);
+ border-radius: 2rem;
+ -webkit-border-radius: 2rem;
+ -moz-border-radius: 2rem;
+ -ms-border-radius: 2rem;
+ -o-border-radius: 2rem;
+}
+
+.meal-details.showRecipe {
+ display: block;
+}
+
+.single-meal-p {
+ margin: auto;
+ letter-spacing: 0.025em;
+ line-height: 1.5;
+ max-width: 56rem /* 896px */;
+}
+
+.single-meal-ul {
+ padding-left: 0;
+}
+
+.single-meal-ul-li {
+ border-width: 2px;
+ border-style: solid;
+ border-color: rgba(229, 231, 235, 1);
+ border-radius: 0.25rem /* 4px */;
+ background-color: rgba(255, 255, 255, 1);
+ background-color: rgba(17, 24, 39, 1);
+ display: inline-block;
+ color: rgba(17, 24, 39, 1);
+ color: rgba(229, 231, 235, 1);
+ font-size: 0.75rem /* 12px */;
+ line-height: 1rem /* 16px */;
+ font-weight: 700;
+ padding: 0.25rem /* 4px */;
+ margin-top: 0;
+ margin-right: 0.25rem /* 4px */;
+ margin-bottom: 0.25rem /* 4px */;
+ margin-left: 0;
+}
+
+form {
+ display: flex;
+ flex-direction: column;
+ max-width: 800px;
+ margin: auto;
+ padding: 15px 10px;
+}
+
+form input[type="text"],
+textarea {
+ margin: 10px 0;
+ padding: 10px;
+ border-radius: 6px;
+ max-width: 100%;
+ border: 2px solid #3741518a;
+}
+
+form input[type="submit"] {
+ background: #374151;
+ padding: 10px;
+ margin: 10px 0;
+ color: #fff;
+ max-width: 100%;
+ border-radius: 6px;
+ font-size: 20px;
+}
+
+.comment-count-header {
+ margin-bottom: 20px;
+ font-weight: 700;
+ font-size: 2rem;
+}
+
+.comment-header {
+ font-size: 1.5rem;
+ font-weight: 700;
+}
+
+.comment-display {
+ max-width: 800px;
+ margin: 50px auto;
+}
+
+.comment-display li {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ margin-left: 20px;
+}
+
+/* active page button styles */
+li.page-item.active {
+ background-color: aqua;
+}
+
+/* Transitions */
+.transition-all {
+ transition-property: all;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-duration: 150ms;
+}
+
+.duration-1000 {
+ transition-duration: 1000ms;
+}
+
+.ease-out {
+ transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
+.reservation-btn {
+ border: 1px solid #374151;
+ margin: 10px 0;
+ padding: 5px 12px;
+ color: white;
+ background-color: #374151;
+}
+
+/* Styling Modal */
+.modal {
+ /* display: none; */
+ 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;
+}
+
+.reservation-form {
+ margin-top: 10px;
+}
+
+.reservation-form input,
+.reservation-form input[type="text"] {
+ margin: 10px 0;
+ padding: 5px;
+ border-radius: 1px;
+ width: 80%;
+ border: 2px solid #3741518a;
+}
+
+.reserve-btn {
+ margin: 10px 0;
+ padding: 7px 12px;
+ color: white;
+ background-color: #374151;
+ width: 30%;
+}
+
+