updates

vwolfley · Apr 8, 2024 · 61a4bc6 · 61a4bc6
1 parent e900820
commit 61a4bc6
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 11 deletions.
diff --git a/scoots/attributions.html b/scoots/attributions.html
@@ -82,13 +82,11 @@ <h3>Home Page:</h3>
                         >
                     </li>
                     <li>https://www.traveltomtom.net/destinations/north-america/mexico/scooter-rental-cozumel</li>
-                    <li></li>
                 </ul>
 
                 <h3>Rentals Page:</h3>
                 <ul>
                     <li>https://www.scooterrentalhawaii.com/moped-rentals/</li>
-                    <li></li>
                 </ul>
                 <h3>Reservations Page:</h3>
                 <ul>
@@ -123,7 +121,6 @@ <h3>Contact Page:</h3>
                             >Pixabay</a
                         >
                     </li>
-                    <li></li>
                 </ul>
 
                 <ul>
@@ -146,9 +143,6 @@ <h3>Contact Page:</h3>
                             >https://www.pexels.com/photo/people-riding-motorcycles-8070661/</a
                         >
                     </li>
-                    <li></li>
-
-                    <li></li>
                 </ul>
             </section>
             <!-- /End Content -->

diff --git a/scoots/reservations.html b/scoots/reservations.html
@@ -127,7 +127,7 @@ <h3>Let the adventure begin!</h3>
                         </section>
                     </div>
                     <div class="reservations-form">
-                        <form method="get" action="thankyou.html">
+                        <form method="get" action="#">
                             <fieldset>
                                 <legend>Vehicle Registration Information</legend>
                                 <label class="top">Pickup Date*<input type="date" id="start-date" name="start-date" required /></label>
@@ -166,8 +166,13 @@ <h3>Let the adventure begin!</h3>
                                         <option value="5">5</option>
                                     </select>
                                 </label>
-                                <label class="sbs"><input type="checkbox" name="insurance" value="yes" /> Add Vehicle Insurance</label>
-                                <label class="sbs"><input type="checkbox" name="agreement" value="yes" /> I have Read the Rental Agreement</label>
+                                <label for="insurance" class="sbs"
+                                    ><input type="checkbox" id="insurance" name="insurance" value="yes" /> Add Vehicle Insurance</label
+                                >
+                                <label for="agreement" class="sbs"
+                                    ><input type="checkbox" id="agreement" name="agreement" value="yes" required /> I have Read the Rental
+                                    Agreement</label
+                                >
                             </fieldset>
                             <fieldset>
                                 <legend>Drivers Information</legend>
@@ -217,11 +222,19 @@ <h3>Let the adventure begin!</h3>
                                     ></textarea>
                                 </label>
                             </fieldset>
-
                             <button class="btn btn-primary" onclick="validateForm(event)">Reserve my Ride</button>
                         </form>
                     </div>
                 </div>
+                <!-- Successful Submission Modal -->
+                <div class="modal" id="successModal">
+                    <div class="modal-content">
+                        <span class="close" onclick="closeModal()">&times;</span>
+                        <h2>Great!</h2>
+                        <p>Your reservation has been confirmed.</p>
+                    </div>
+                </div>
+                <!-- / Successful Submission Modal -->
             </section>
         </main>
         <!-- /End Content -->

diff --git a/scoots/scripts/reservations.js b/scoots/scripts/reservations.js
@@ -69,7 +69,7 @@ function populateCountryDropdown() {
 populateCountryDropdown();
 
 function validateForm(event) {
-    const elements = document.querySelectorAll("#start-date, #end-date, #vehicle, #riders, #name, #phone, #email, #countryDropdown");
+    const elements = document.querySelectorAll("#start-date, #end-date, #vehicle, #riders, #name, #phone, #email, #countryDropdown, #agreement");
     const radioInputs = document.querySelectorAll('input[type="radio"][name="period"]');
     let isValid = true;
 
@@ -92,9 +92,11 @@ function validateForm(event) {
     }
 
     if (isValid) {
+        openModal();
         // Form is valid, submit it
         event.preventDefault(); // Prevent form submission
     } else {
+        alert("Error! Please correctly fill out the request!");
         event.preventDefault(); // Prevent form submission
     }
 }
@@ -109,6 +111,13 @@ function showError() {
         error.classList.add("hide");
     }, 3000); // Hide the message after 3 seconds
 }
+function openModal() {
+    document.getElementById("successModal").style.display = "block";
+}
+
+function closeModal() {
+    document.getElementById("successModal").style.display = "none";
+}
 
 /* ****************************************************
     Rental Data and Details

diff --git a/scoots/styles/main.css b/scoots/styles/main.css
@@ -791,6 +791,42 @@ h5 {
         flex-direction: row;
     }
 }
+/* Modal styles */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal-content {
+    background-color: var(--success-background);
+    color: var(--success-text);
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+    max-width: 400px;
+}
+
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
 
 /* *********************************
     Contact Page Styles & Reservations Page Styles