From 67e5c7dd1a309ccfc3b841c278e25dc9959b386a Mon Sep 17 00:00:00 2001 From: Manajit Saha Date: Mon, 7 Oct 2024 17:04:28 +0530 Subject: [PATCH] Changes done. --- Form.css | 98 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ Form.html | 66 +++++++++++++++++++++++++++++++++++++ Form.js | 72 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 236 insertions(+) create mode 100644 Form.css create mode 100644 Form.html create mode 100644 Form.js diff --git a/Form.css b/Form.css new file mode 100644 index 0000000..a2d83b7 --- /dev/null +++ b/Form.css @@ -0,0 +1,98 @@ +/* Reset some default styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Arial, sans-serif; +} + +body { + background-color: rgb(238, 239, 241); + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +/* Container for the entire form */ +.booking-form-container { + background-color: #ffe6e1; + border: 1px solid #ff665a; + padding: 20px; + border-radius: 8px; + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); + width: 350px; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.form-group { + margin-bottom: 15px; +} + +label { + color: #ff4500; + font-size: 14px; + font-weight: bold; + display: block; + margin-bottom: 5px; +} + +/* Input fields styling with hover animation */ +input, +select { + width: 100%; + padding: 10px; + border: 1px solid #ff665a; + border-radius: 4px; + background-color: #ffe6e1; + color: #333; + font-size: 14px; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +/* Hover effect on input fields */ +input:hover, +select:hover { + transform: scale(1.05); + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15); +} + +/* Inputs focus effect */ +input:focus, +select:focus { + border-color: #ff4500; + outline: none; + box-shadow: 0 0 5px rgba(255, 69, 0, 0.3); +} + +/* Button styling */ +button { + width: 100%; + background-color: #ff4500; + color: white; + padding: 10px; + border: none; + border-radius: 4px; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +/* Button hover effect with no animation */ +button:hover { + background-color: #e63e00; +} + +.button-group { + margin-top: 20px; +} + +/* Optional media queries for responsiveness */ +@media (max-width: 400px) { + .booking-form-container { + width: 100%; + padding: 15px; + } +} \ No newline at end of file diff --git a/Form.html b/Form.html new file mode 100644 index 0000000..0388672 --- /dev/null +++ b/Form.html @@ -0,0 +1,66 @@ + + + + + + + Document + + + + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+ + + + + + \ No newline at end of file diff --git a/Form.js b/Form.js new file mode 100644 index 0000000..8f0c8d3 --- /dev/null +++ b/Form.js @@ -0,0 +1,72 @@ +// Get form elements +const form = document.querySelector('.booking-form'); +const fullName = document.getElementById('fullName'); +const phone = document.getElementById('phone'); +const email = document.getElementById('email'); +const city = document.getElementById('city'); +const vehicle = document.getElementById('vehicle'); +const pickupDate = document.getElementById('pickupDate'); +const dropoffDate = document.getElementById('dropoffDate'); +const bookNowButton = document.getElementById('bookNow'); + +// Helper function to validate input fields +function validateForm() { + if (fullName.value === "") { + alert("Please enter your full name."); + fullName.focus(); + return false; + } + + if (phone.value === "" || !/^\d{10}$/.test(phone.value)) { + alert("Please enter a valid 10-digit phone number."); + phone.focus(); + return false; + } + + if (email.value === "" || !/\S+@\S+\.\S+/.test(email.value)) { + alert("Please enter a valid email address."); + email.focus(); + return false; + } + + if (city.value === "Select City") { + alert("Please select a city."); + city.focus(); + return false; + } + + if (vehicle.value === "Select Vehicle") { + alert("Please select a vehicle."); + vehicle.focus(); + return false; + } + + if (pickupDate.value === "") { + alert("Please select a pickup date."); + pickupDate.focus(); + return false; + } + + if (dropoffDate.value === "") { + alert("Please select a drop-off date."); + dropoffDate.focus(); + return false; + } + + if (new Date(pickupDate.value) > new Date(dropoffDate.value)) { + alert("Drop-off date cannot be earlier than pickup date."); + dropoffDate.focus(); + return false; + } + + return true; +} + +// Handle form submission +bookNowButton.addEventListener('click', (e) => { + e.preventDefault(); + + if (validateForm()) { + alert("Form submitted successfully!"); + } +});