Okay, let's design and create a basic interactive web app for choosing a car.
This will be a frontend-only application using HTML, CSS, and JavaScript. It won't connect to a live database of all cars (that's a huge undertaking!), but we'll use a sample dataset to demonstrate the functionality.
Core Features:
Filters:
Budget (Price Range)
Car Type (SUV, Sedan, Hatchback, Truck, EV)
Number of Seats
Fuel Efficiency (MPG - simplified)
Dynamic Results: The list of cars updates as filters change.
Car Details: Clicking a car shows a bit more info (could be a modal or a dedicated section).
Here's the code structure:
1. index.html (The main structure)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Car Chooser</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Find Your Perfect Car</h1>
<div class="filters">
<h2>Filters</h2>
<div class="filter-group">
<label for="budget">Max Budget ($):</label>
<input type="number" id="budget" value="50000" min="5000" step="1000">
</div>
<div class="filter-group">
<label for="carType">Car Type:</label>
<select id="carType">
<option value="all">All Types</option>
<option value="SUV">SUV</option>
<option value="Sedan">Sedan</option>
<option value="Hatchback">Hatchback</option>
<option value="Truck">Truck</option>
<option value="EV">Electric (EV)</option>
</select>
</div>
<div class="filter-group">
<label for="seats">Min. Seats:</label>
<select id="seats">
<option value="1">1+</option>
<option value="2">2+</option>
<option value="4">4+</option>
<option value="5">5+</option>
<option value="7">7+</option>
</select>
</div>
<div class="filter-group">
<label for="mpg">Min. MPG (Combined):</label>
<select id="mpg">
<option value="0">Any</option>
<option value="20">20+</option>
<option value="25">25+</option>
<option value="30">30+</option>
<option value="40">40+ (or MPGe for EVs)</option>
</select>
</div>
<button id="applyFilters">Apply Filters</button>
</div>
<div class="results">
<h2>Available Cars</h2>
<div id="carList" class="car-list">
<!-- Car cards will be injected here by JavaScript -->
</div>
<p id="noResults" style="display:none;">No cars match your criteria.</p>
</div>
<!-- Modal for Car Details -->
<div id="carModal" class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<h3 id="modalCarName"></h3>
<img id="modalCarImage" src="" alt="Car Image" style="max-width:100%; height:auto;">
<p><strong>Price:</strong> $<span id="modalCarPrice"></span></p>
<p><strong>Type:</strong> <span id="modalCarType"></span></p>
<p><strong>Seats:</strong> <span id="modalCarSeats"></span></p>
<p><strong>MPG:</strong> <span id="modalCarMpg"></span> (combined)</p>
<p><strong>Description:</strong> <span id="modalCarDescription"></span></p>
</div>
</div>
</div>
<script src="cars.js"></script>
<script src="app.js"></script>
</body>
</html>
2. style.css (Basic styling)
body {
font-family: sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
color: #333;
}
.container {
max-width: 1000px;
margin: auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1, h2 {
text-align: center;
color: #333;
}
.filters {
margin-bottom: 30px;
padding: 20px;
background-color: #e9e9e9;
border-radius: 5px;
}
.filter-group {
margin-bottom: 15px;
}
.filter-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.filter-group input[type="number"],
.filter-group select {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box; /* Important for width calculation */
}
#applyFilters {
display: block;
width: 100%;
padding: 10px;
background-color: #5cb85c;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
#applyFilters:hover {
background-color: #4cae4c;
}
.car-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.car-card {
background: #fff;
border: 1px solid #ddd;
border-radius: 5px;
padding: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
cursor: pointer;
transition: transform 0.2s ease-in-out;
}
.car-card:hover {
transform: translateY(-5px);
}
.car-card img {
max-width: 100%;
height: auto;
border-radius: 4px;
margin-bottom: 10px;
}
.car-card h3 {
margin-top: 0;
color: #007bff;
}
/* Modal styles */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto; /* Enable scroll if needed */
background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
margin: 10% auto; /* 10% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 600px;
border-radius: 8px;
position: relative;
}
.close-button {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close-button:hover,
.close-button:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
3. cars.js (Sample car data)
// Sample car data
// In a real app, this would come from a database/API
// Placeholder image: use a generic car image or specific ones if you have them.
const placeholderImageUrl = 'https://via.placeholder.com/300x200.png?text=Car+Image';
const allCars = [
{
id: 1,
name: "Toyota Camry",
type: "Sedan",
price: 25000,
seats: 5,
mpg: 32,
imageUrl: placeholderImageUrl,
description: "A reliable and fuel-efficient family sedan."
},
{
id: 2,
name: "Honda CR-V",
type: "SUV",
price: 28000,
seats: 5,
mpg: 29,
imageUrl: placeholderImageUrl,
description: "Versatile compact SUV with ample cargo space."
},
{
id: 3,
name: "Ford F-150",
type: "Truck",
price: 35000,
seats: 5, // Crew cab example
mpg: 20,
imageUrl: placeholderImageUrl,
description: "America's best-selling powerful and capable truck."
},
{
id: 4,
name: "Tesla Model 3",
type: "EV",
price: 40000,
seats: 5,
mpg: 130, // MPGe
imageUrl: placeholderImageUrl,
description: "Popular electric sedan with cutting-edge tech."
},
{
id: 5,
name: "Volkswagen Golf",
type: "Hatchback",
price: 23000,
seats: 5,
mpg: 33,
imageUrl: placeholderImageUrl,
description: "Fun-to-drive and practical hatchback."
},
{
id: 6,
name: "Subaru Outback",
type: "SUV", // Often classified as Wagon/SUV Crossover
price: 30000,
seats: 5,
mpg: 28,
imageUrl: placeholderImageUrl,
description: "All-wheel-drive capable wagon/SUV for adventurers."
},
{
id: 7,
name: "Kia Telluride",
type: "SUV",
price: 38000,
seats: 7,
mpg: 23,
imageUrl: placeholderImageUrl,
description: "Spacious and award-winning 3-row family SUV."
},
{
id: 8,
name: "Hyundai Elantra",
type: "Sedan",
price: 21000,
seats: 5,
mpg: 35,
imageUrl: placeholderImageUrl,
description: "Stylish and affordable compact sedan."
},
{
id: 9,
name: "Chevrolet Bolt",
type: "EV",
price: 32000,
seats: 5,
mpg: 120, // MPGe
imageUrl: placeholderImageUrl,
description: "Affordable electric vehicle with good range."
},
{
id: 10,
name: "Toyota RAV4 Hybrid",
type: "SUV", // Could also be "Hybrid" in a more complex type system
price: 31000,
seats: 5,
mpg: 40,
imageUrl: placeholderImageUrl,
description: "Efficient hybrid SUV, great for city and highway."
}
];
4. app.js (The core logic)
document.addEventListener('DOMContentLoaded', () => {
const carListDiv = document.getElementById('carList');
const budgetInput = document.getElementById('budget');
const carTypeSelect = document.getElementById('carType');
const seatsSelect = document.getElementById('seats');
const mpgSelect = document.getElementById('mpg');
const applyFiltersButton = document.getElementById('applyFilters');
const noResultsP = document.getElementById('noResults');
// Modal elements
const modal = document.getElementById('carModal');
const modalCarName = document.getElementById('modalCarName');
const modalCarImage = document.getElementById('modalCarImage');
const modalCarPrice = document.getElementById('modalCarPrice');
const modalCarType = document.getElementById('modalCarType');
const modalCarSeats = document.getElementById('modalCarSeats');
const modalCarMpg = document.getElementById('modalCarMpg');
const modalCarDescription = document.getElementById('modalCarDescription');
const closeButton = document.querySelector('.close-button');
function displayCars(carsToDisplay) {
carListDiv.innerHTML = ''; // Clear previous results
if (carsToDisplay.length === 0) {
noResultsP.style.display = 'block';
return;
}
noResultsP.style.display = 'none';
carsToDisplay.forEach(car => {
const carCard = document.createElement('div');
carCard.classList.add('car-card');
carCard.innerHTML = `
<img src="${car.imageUrl}" alt="${car.name}">
<h3>${car.name}</h3>
<p>Price: $${car.price.toLocaleString()}</p>
<p>Type: ${car.type}</p>
<p>Seats: ${car.seats}</p>
<p>MPG: ${car.mpg}</p>
`;
carCard.addEventListener('click', () => showCarDetails(car));
carListDiv.appendChild(carCard);
});
}
function filterCars() {
const budget = parseInt(budgetInput.value);
const carType = carTypeSelect.value;
const minSeats = parseInt(seatsSelect.value);
const minMpg = parseInt(mpgSelect.value);
const filteredCars = allCars.filter(car => {
return (
car.price <= budget &&
(carType === 'all' || car.type === carType) &&
car.seats >= minSeats &&
car.mpg >= minMpg
);
});
displayCars(filteredCars);
}
function showCarDetails(car) {
modalCarName.textContent = car.name;
modalCarImage.src = car.imageUrl;
modalCarImage.alt = car.name;
modalCarPrice.textContent = car.price.toLocaleString();
modalCarType.textContent = car.type;
modalCarSeats.textContent = car.seats;
modalCarMpg.textContent = car.mpg;
modalCarDescription.textContent = car.description;
modal.style.display = 'block';
}
// Close modal
closeButton.addEventListener('click', () => {
modal.style.display = 'none';
});
// Close modal if clicked outside content
window.addEventListener('click', (event) => {
if (event.target === modal) {
modal.style.display = 'none';
}
});
// Event Listeners
applyFiltersButton.addEventListener('click', filterCars);
// Initial display of all cars
displayCars(allCars);
});
How to Run This:
Create three files in the same directory: index.html, style.css, cars.js, and app.js.
Copy and paste the respective code into each file.
Open index.html in your web browser.
Functionality:
You'll see a list of all cars initially.
You can adjust the budget, select a car type, minimum seats, and minimum MPG.
Click "Apply Filters" to see the updated list.
If no cars match, a message will appear.
Clicking on a car card will open a modal with more details about that car.
You can close the modal by clicking the 'x' or outside the modal content.
Possible Enhancements (for a more advanced version):
Real-time filtering: Update results as soon as a filter changes, without needing an "Apply" button.
More complex data: Add features like engine type, transmission, safety ratings, colors, etc.
Sorting: Allow sorting results by price, MPG, etc.
Comparison Tool: Select multiple cars to compare them side-by-side.
Better UI/UX: Use a UI framework (like Bootstrap, Tailwind CSS) or more sophisticated custom CSS.
Image Handling: Use actual car images instead of placeholders.
Backend Integration: Connect to a real database for a vast and up-to-date car inventory.
User Accounts: Allow users to save searches or favorite cars.
More Granular Filters:
New/Used.
Specific features (sunroof, leather seats, Apple CarPlay).
Brand.
Pagination: For large result sets.
This basic version provides a solid foundation for an interactive car chooser app!
No comments:
Post a Comment