added Vehicle name with price in index page , Pickup Date max (20days…

[abhisek2004]

Pull Request for CabRental💡

Issue Title: Added Vehicle name with price, Pickup Date max (20 days), and Drop-off Date max (30 days) on index page

• Name: Abhisek Panda
• GitHub ID: abhisek2004
• Email ID: [email protected]

Describe the add-ons or changes I've made 📃

I have made several enhancements to the index page, specifically regarding vehicle selection and date restrictions:

1. Vehicle Selection with Pricing:

   • Added a dropdown menu for vehicle selection. Each vehicle option now displays the name along with the price per day:

   <div class="form-group">
       <label for="vehicle">Vehicle</label>
       <select id="vehicle">
           <option disabled selected>Select Vehicle</option>
           <option value="Civic">Maruti Suzuki Ertiga - 7 Seater - ₹2500/day</option>
           <option value="Swift Dzire">Maruti Suzuki Eeco - 7 Seater - ₹1700/day</option>
           <option value="Innova">Maruti Suzuki Swift - 5 Seater - ₹1200/day</option>
           <option value="Creta">Toyota Innova Crysta - 7 Seater - ₹4000/day</option>
           <option value="GrandVistara">Honda City - 5 Seater - ₹1900/day</option>
           <option value="GrandVistara">Tata Indigo - 5 Seater - ₹1200/day</option>
       </select>
   </div>

2. Pickup Date Restrictions:

   • Implemented logic to prevent users from selecting past dates for the pickup date. The user can now select a pickup date that is either today or within the next 20 days:

   <div class="form-group">
       <label for="pickupDate">Pickup Date</label>
       <input type="date" id="pickupDate" min="" max="" required>
   </div>
   <script>
       document.addEventListener('DOMContentLoaded', function () {
           const today = new Date();
           const minDate = today.toISOString().split('T')[0]; // Today's date
           const maxDate = new Date(today);
           maxDate.setDate(today.getDate() + 20); // 20 days from today
           const maxDateString = maxDate.toISOString().split('T')[0]; // Format as YYYY-MM-DD
   
           document.getElementById('pickupDate').setAttribute('min', minDate);
           document.getElementById('pickupDate').setAttribute('max', maxDateString);
       });
   </script>

3. Drop-off Date Restrictions:

   • Similarly, restricted the drop-off date selection to today or any date within the next 30 days, ensuring users cannot select past dates:

   <div class="form-group">
       <label for="dropoffDate">Drop-off Date</label>
       <input type="date" id="dropoffDate" min="" max="" required>
   </div>
   <script>
       document.addEventListener('DOMContentLoaded', function () {
           const today = new Date();
           const minDate = today.toISOString().split('T')[0]; // Today's date
           document.getElementById('dropoffDate').setAttribute('min', minDate);
   
           // Calculate the max date (30 days from today)
           const maxDate = new Date();
           maxDate.setDate(today.getDate() + 30);
           const maxDateString = maxDate.toISOString().split('T')[0]; // Date in YYYY-MM-DD format
           document.getElementById('dropoffDate').setAttribute('max', maxDateString);
       });
   </script>

Summary

• The above changes ensure users are provided with clear pricing information for each vehicle and that they can only select valid pickup and drop-off dates. I have made the calendar like this for user safety, ensuring that no other user faces issues or any type of fraud in booking. This enhances the overall user experience and minimizes potential errors during the vehicle rental process.

My work Screen Shot

[github-actions]

🎉 Thank you for your contribution! Your pull request has been submitted successfully. A maintainer will review it as soon as possible. We appreciate your support in making this project better

[abhisek2004]

Pull Request for Cab Rental 💡

Issue Title: Added Total Price Calculation on Index Page

• Name: Abhisek Panda
• GitHub ID: abhisek2004
• Email ID: [email protected]

Add-ons or Changes I've Made 📃

Total Price Calculation:

• Added a field to display the total price, which updates based on the selected vehicle and the duration between the pickup and drop-off dates.
• JavaScript functionality calculates the total price dynamically as the user selects a vehicle or updates the dates.
• The total price is displayed in a read-only input field, ensuring clarity for the user.

Summary of Changes:

• Updated the HTML structure of the booking form to include new fields.
• Added JavaScript logic for managing date selections and automatic price calculations.
• Ensured the total price updates automatically when the vehicle or dates are selected, enhancing user experience.

Code Implementation:

The following JavaScript function is responsible for calculating the total price based on user selections:

// Function to calculate total price
function calculateTotalPrice() {
    const vehicleSelect = document.getElementById('vehicle');
    const pickupDate = new Date(document.getElementById('pickupDate').value);
    const dropoffDate = new Date(document.getElementById('dropoffDate').value);
    const days = Math.ceil((dropoffDate - pickupDate) / (1000 * 3600 * 24));

    if (days > 0 && vehicleSelect.value) {
        const pricePerDay = parseFloat(vehicleSelect.options[vehicleSelect.selectedIndex].dataset.price);
        const totalPrice = pricePerDay * days;
        document.getElementById('totalPrice').value = `₹${totalPrice}`;
    } else {
        document.getElementById('totalPrice').value = '';
    }
}

// Add event listeners to update the price on vehicle change and date selection
document.getElementById('vehicle').addEventListener('change', calculateTotalPrice);
document.getElementById('pickupDate').addEventListener('change', calculateTotalPrice);
document.getElementById('dropoffDate').addEventListener('change', calculateTotalPrice);

User Interaction:

• As users select a vehicle or adjust the pickup and drop-off dates, the total rental cost is recalculated in real-time, providing immediate feedback and preventing confusion regarding pricing.

Conclusion:

This update significantly improves the booking process by ensuring that users are fully informed about their rental costs based on their selections, enhancing both usability and transparency.

Work Screen Shot ------