Skip to content

Commit

Permalink
updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@vwolfley
vwolfley committed Apr 5, 2024
1 parent f4843a3 commit 03c31aa
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 12 deletions.
26 changes: 16 additions & 10 deletions scoots/reservations.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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="">
Expand All @@ -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>
Expand All @@ -120,15 +123,15 @@ <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>
<option value="4">4</option>
<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>
Expand Down Expand Up @@ -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
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
42 changes: 42 additions & 0 deletions scoots/scripts/reservations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
9 changes: 7 additions & 2 deletions scoots/styles/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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,
Expand Down

0 comments on commit 03c31aa

Please sign in to comment.