From 97219a4746018bd8d48b253a368bb2c5d6bbaaec Mon Sep 17 00:00:00 2001 From: 23WH1A0513 <150132045+23wh1a0513@users.noreply.github.com> Date: Tue, 22 Oct 2024 21:47:05 +0530 Subject: [PATCH] Create Adding_Filters --- Adding_Filters | 171 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 171 insertions(+) create mode 100644 Adding_Filters diff --git a/Adding_Filters b/Adding_Filters new file mode 100644 index 0000000..b1e9f2f --- /dev/null +++ b/Adding_Filters @@ -0,0 +1,171 @@ +###html### + + + + + + Vehicle Filters + + + +
+

Find Your Vehicle

+
+

Filters

+
+
+ + +
+
+ + + $250 +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ +
+

Available Vehicles

+
+
+
+ + + + + +###css## +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + margin: 0; + padding: 20px; +} + +.container { + max-width: 800px; + margin: 0 auto; + background: #fff; + padding: 20px; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +h1, h2 { + color: #333; +} + +.filters, .results { + margin-top: 20px; +} + +.filter-group { + margin-bottom: 15px; +} + +.filter-group label { + display: block; + margin-bottom: 5px; +} + +#vehicleList { + margin-top: 20px; +} + +.vehicle-item { + background: #f9f9f9; + padding: 10px; + margin-bottom: 10px; + border: 1px solid #ddd; + border-radius: 4px; +} + +##js## +document.getElementById('filterButton').addEventListener('click', function() { + const vehicleType = document.getElementById('vehicleType').value; + const priceRange = document.getElementById('priceRange').value; + const location = document.getElementById('location').value; + const rentalDuration = document.getElementById('rentalDuration').value; + const userRating = document.getElementById('userRating').value; + + // Example vehicle data + const vehicles = [ + { type: 'car', model: 'Honda Civic', price: 250, location: 'New York', duration: 3, rating: 4 }, + { type: 'car', model: 'Maruti Swift Dzire', price: 150, location: 'Mumbai', duration: 2, rating: 5 }, + { type: 'car', model: 'Toyota Innova', price: 300, location: 'Delhi', duration: 5, rating: 3 }, + { type: 'car', model: 'Hyundai Creta', price: 220, location: 'Chennai', duration: 4, rating: 4 }, + { type: 'car', model: 'Maruti Grand Vitara', price: 200, location: 'Bengaluru', duration: 1, rating: 5 }, + // Additional vehicles can be added here... + ]; + + const filteredVehicles = vehicles.filter(vehicle => { + return ( + (vehicleType === '' || vehicle.type === vehicleType) && + vehicle.price <= priceRange && + (location === '' || vehicle.location === location) && + vehicle.duration >= rentalDuration && + (userRating === '' || vehicle.rating >= userRating) + ); + }); + + displayVehicles(filteredVehicles); +}); + +document.getElementById('priceRange').addEventListener('input', function() { + document.getElementById('priceValue').textContent = `$${this.value}`; +}); + +function displayVehicles(vehicles) { + const vehicleList = document.getElementById('vehicleList'); + vehicleList.innerHTML = ''; + + if (vehicles.length === 0) { + vehicleList.innerHTML = '

No vehicles found that match your criteria.

'; + return; + } + + vehicles.forEach(vehicle => { + const vehicleItem = document.createElement('div'); + vehicleItem.className = 'vehicle-item'; + vehicleItem.innerHTML = ` + Model: ${vehicle.model}
+ Type: ${vehicle.type}
+ Price: $${vehicle.price}
+ Location: ${vehicle.location}
+ Duration: ${vehicle.duration} days
+ Rating: ${vehicle.rating} stars + `; + vehicleList.appendChild(vehicleItem); + }); +}