Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improvement of Form section . #290

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Improvement of Form section . #290

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 98 additions & 0 deletions Form.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
66 changes: 66 additions & 0 deletions Form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="Form.css">
</head>

<body>
<div class="booking-form-container">
<div class="booking-form">
<div class="form-group">
<label for="fullName">Full Name</label>
<input type="text" id="fullName" placeholder="Your Name">
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="tel" id="phone" placeholder="Telephone">
</div>
<div class="form-group">
<label for="email">Email Id</label>
<input type="email" id="email" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="city">City</label>
<select id="city">
<option disabled selected>Select City</option>
<option value="Delhi-NCR">Delhi-NCR</option>
<option value="Bangalore">Bangalore</option>
<option value="Mumbai">Mumbai</option>
<option value="Hyderabad">Hyderabad</option>
<option value="Pune">Pune</option>
</select>
</div>
<div class="form-group">
<label for="vehicle">Vehicle</label>
<select id="vehicle">
<option disabled selected>Select Vehicle</option>
<option value="Civic">Honda Civic</option>
<option value="Swift Dzire">Maruti Swift Dzire</option>
<option value="Innova">Toyota Innova</option>
<option value="Creta">Hyundai Creta</option>
<option value="GrandVistara">Maruti Grand Vistara</option>
</select>
</div>
<div class="form-group">
<label for="pickupDate">Pickup Date</label>
<input type="date" id="pickupDate">
</div>
<div class="form-group">
<label for="dropoffDate">Drop-off Date</label>
<input type="date" id="dropoffDate">
</div>
</div>
<div class="form-group button-group">
<button id="bookNow">Book Now</button>
</div>
</div>

<script src="Form.js"></script>

</body>

</html>
72 changes: 72 additions & 0 deletions Form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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!");
}
});