From 03c31aa473dcbc3c9b3086fb1085e1d658e272d7 Mon Sep 17 00:00:00 2001
From: vern wolfley <vern.wolfley@gmail.com>
Date: Thu, 4 Apr 2024 17:37:50 -0700
Subject: [PATCH] updates

---
 scoots/reservations.html       | 26 +++++++++++++--------
 scoots/scripts/reservations.js | 42 ++++++++++++++++++++++++++++++++++
 scoots/styles/main.css         |  9 ++++++--
 3 files changed, 65 insertions(+), 12 deletions(-)

diff --git a/scoots/reservations.html b/scoots/reservations.html
index 82d8723..7d8c968 100644
--- a/scoots/reservations.html
+++ b/scoots/reservations.html
@@ -77,7 +77,10 @@ <h2>Reservations</h2>
             </section>
             <section class="reservations-area">
                 <h3>Scoots Rental Reservations</h3>
-                <p>Elevate your Cozumel getaway with the convenience of reserving your rental vehicle today. Simply read the services agreement below and complete the form to begin your adventure.</p>
+                <p>
+                    Elevate your Cozumel getaway with the convenience of reserving your rental vehicle today. Simply read the services agreement below
+                    and complete the form to begin your adventure.
+                </p>
                 <div class="reservations-body">
                     <div class="reservations-info">
                         <div class="">
@@ -103,12 +106,12 @@ <h2>Rental Services and Agreement</h2>
                                 <label class="top">Pickup Date*<input type="date" id="start-date" name="start-date" required /></label>
                                 <label class="top">Return Date*<input type="date" id="end-date" name="end-date" required /></label>
                                 <div>Rental Length</div>
-                                <label class="sbs"><input type="radio" name="period" value="half-day" required /> Half Day</label>
-                                <label class="sbs"><input type="radio" name="period" value="full-day" required /> Full Day</label>
+                                <label class="rad"><input type="radio" name="period" value="half-day" required /> Half Day</label>
+                                <label class="rad"><input type="radio" name="period" value="full-day" required /> Full Day</label>
                                 <label class="top"
                                     >Choose a Vehicle:
                                     <select id="vehicle" class="" name="vehicle" required>
-                                        <option value="none">Select One</option>
+                                        <option value="">Select One</option>
                                         <option value="honda-metro">Honda Metro Scooter</option>
                                         <option value="honda-dio">Honda Dio Scooter</option>
                                         <option value="honda-pcx">Honda PCX150 Scooter</option>
@@ -120,7 +123,7 @@ <h2>Rental Services and Agreement</h2>
                                 <label class="top"
                                     >Number of Riders:
                                     <select id="riders" class="" name="riders" required>
-                                        <option value="0">0</option>
+                                        <option value="">0</option>
                                         <option value="1">1</option>
                                         <option value="2">2</option>
                                         <option value="3">3</option>
@@ -128,7 +131,7 @@ <h2>Rental Services and Agreement</h2>
                                         <option value="5">5</option>
                                     </select>
                                 </label>
-                                <label class="sbs"><input type="checkbox" name="insurance" value="yes" required /> Add Vehicle Insurance</label>
+                                <label class="sbs"><input type="checkbox" name="insurance" value="yes" /> Add Vehicle Insurance</label>
                             </fieldset>
                             <fieldset>
                                 <legend>Drivers Information</legend>
@@ -168,7 +171,7 @@ <h2>Rental Services and Agreement</h2>
                                     </select>
                                 </label>
 
-                                <label class="sbs"><input type="checkbox" name="drop-off" value="yes" required /> Request Drop Off</label>
+                                <label class="sbs"><input type="checkbox" name="drop-off" value="yes" /> Request Drop Off</label>
                                 <label class="top"
                                     >Special Accommodations
                                     <textarea
@@ -179,7 +182,7 @@ <h2>Rental Services and Agreement</h2>
                                 </label>
                             </fieldset>
 
-                            <button class="btn btn-primary"><a href="">Reserve my Ride</a></button>
+                            <button class="btn btn-primary" onclick="validateForm(event)">Reserve my Ride</button>
                         </form>
                     </div>
                 </div>
@@ -328,7 +331,10 @@ <h3>Quick Links</h3>
 
                 <div class="legal">
                     <div class="">
-                        <span><span id="cYear">&copy;</span> Scoots Rentals | Vern Wolfley | WDD 230 Final Project | <a href="./attributions.html">Attribution</a></span>
+                        <span
+                            ><span id="cYear">&copy;</span> Scoots Rentals | Vern Wolfley | WDD 230 Final Project |
+                            <a href="./attributions.html">Attribution</a></span
+                        >
                     </div>
                     <div class="">
                         <span id="lastModified"></span>
@@ -338,7 +344,7 @@ <h3>Quick Links</h3>
         </footer>
         <!-- /Footer  -->
         <!-- Scripts -->
-         <script src="scripts/main.js"></script>
+        <script src="scripts/main.js"></script>
         <script src="scripts/reservations.js"></script>
     </body>
 </html>
diff --git a/scoots/scripts/reservations.js b/scoots/scripts/reservations.js
index eac244b..9c12acd 100644
--- a/scoots/scripts/reservations.js
+++ b/scoots/scripts/reservations.js
@@ -67,3 +67,45 @@ function populateCountryDropdown() {
 }
 // Call the function
 populateCountryDropdown();
+
+function validateForm(event) {
+    const elements = document.querySelectorAll("#start-date, #end-date, #vehicle, #riders, #name, #phone, #email, #countryDropdown");
+    const radioInputs = document.querySelectorAll('input[type="radio"][name="period"]');
+    let isValid = true;
+
+    elements.forEach((input) => {
+        if (input.value.trim() === "") {
+            isValid = false;
+            showError();
+        }
+    });
+    // Check if any radio option is selected
+    let radioSelected = false;
+    radioInputs.forEach((input) => {
+        if (input.checked) {
+            radioSelected = true;
+        }
+    });
+    if (!radioSelected) {
+        isValid = false;
+        showError();
+    }
+
+    if (isValid) {
+        // Form is valid, submit it
+        event.preventDefault(); // Prevent form submission
+    } else {
+        event.preventDefault(); // Prevent form submission
+    }
+}
+function showError() {
+    const error = document.getElementById("submitmessage");
+    error.textContent = "Error! Please correctly fill out the request!";
+    error.classList.remove("hide");
+    error.classList.add("error", "show");
+    // Reset the display property after 3 seconds
+    setTimeout(function () {
+        error.classList.remove("error", "show");
+        error.classList.add("hide");
+    }, 3000); // Hide the message after 3 seconds
+}
diff --git a/scoots/styles/main.css b/scoots/styles/main.css
index 9a0d6c7..44116fc 100644
--- a/scoots/styles/main.css
+++ b/scoots/styles/main.css
@@ -837,7 +837,7 @@ fieldset {
     margin: 1rem 0;
     border: 1px solid var(--text-color-header);
     border-radius: 10px;
-    padding: 0.5rem 2%;
+    padding: 0.5rem 5%;
     width: 20rem;
 }
 fieldset:last-of-type {
@@ -872,7 +872,12 @@ fieldset label.top select {
 }
 fieldset label.sbs {
     display: block;
-    padding: 0.75rem 0;
+    padding: 0.70rem 0;
+    color: var(--text-color-header);
+}
+fieldset label.rad {
+    display: block;
+    padding: 0.15rem 0;
     color: var(--text-color-header);
 }
 fieldset label.top input:required,