Added Display Reservation modal

.env

@@ -0,0 +1 @@
+API_KEY = qwFEh0Dwu7LrqmgqtV9u

src/apis/index.js

@@ -1,3 +1,3 @@
 /* eslint-disable no-unused-vars */
-const involvementID = 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/qwFEh0Dwu7LrqmgqtV9u/likes/'
+const involvementID = 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/qwFEh0Dwu7LrqmgqtV9u/likes/';
 const involvmentAPI = 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi';

src/index.html

@@ -161,6 +161,65 @@
       </div>
     </div>
 
+    <!-- main -->
+    <div class="container text-center">
+        <button class="reservation-btn">Resevation</button>
+    </div>
+
+    <!-- Resevation Modal -->
+    <div id="reservation-modal" class="modal">
+      <div class="modal-content-wrapper">
+        <div class="modal-content">
+          <span id="closeBtn" class="close-modal">&times;</span>
+          <div class="container">
+            <div class="inner-content">
+              <img src="https://images.squarespace-cdn.com/content/v1/5190d201e4b0e86c59643db1/1596337984880-PLN8JEIO6PHZNBNN2ZNO/8F053A6A-0C62-4BE2-8AFB-7A0FEC7F2282.JPG?format=1000w" alt="">
+
+              <div class="text-box">
+                <h1 class="heading text-center">Bounty Food :)</h1>
+                <div class="flex-items">
+                  <div class="left">
+                    <p class="text">Food: Assorted Meal</p>
+                    <p class="text">Weight: 500</p>
+                  </div>
+                  <div class="right">
+                    <p class="text">Length: 100 000 00</p>
+                    <p class="text">Power: 500 00 000 00 000</p>
+                  </div>
+                </div>
+              </div>
+
+              <div class="reservations">
+                <h1 class="sub-heading text-center">Reservation (2)</h1>
+                <p>03-10-2022 - 11-05-2022 by Jimmy</p>
+                <p>03-10-2022 - 11-05-2022 by Jidula</p>
+              </div>
+
+              <form class="reservation-form">
+                <h1 class="sub-heading text-center">Add a reservation</h1>
+                <div>
+                  <label for="name"></label>
+                  <input type="text" placeholder="Your name">
+                </div>
+                <div>
+                  <label for="start-date"></label>
+                  <input type="number" placeholder="Start date (dd-mm-yyyy)">
+                </div>
+                <div>
+                  <label for="end-date"></label>
+                  <input type="number" placeholder="End date (dd-mm-yyyy)">
+                </div>
+
+                <button class="reserve-btn">Reserve</button>
+              </form>
+
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
     <footer class="py-16 bg-white border-t border-stone-200">
         <div class="px-8 max-w-7xl mx-auto">
           <div class="grid grid-cols-3">

src/index.js

@@ -1,3 +1,8 @@
 import './base.css';
 import './style.css';
-// import logo from './yummly.svg';
+// import logo from './yummly.svg';
+
+import { displayReservationModal, closeModal } from './module/reservation.js';
+
+displayReservationModal();
+closeModal();

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 };