Here’s a complete working project (HTML + CSS + JS in one file) you can copy and run directly 👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>E-commerce Filter</title>
<style>
body {
font-family: Arial;
margin: 20px;
background: #f5f5f5;
}
h1 {
text-align: center;
}
.controls {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 20px;
justify-content: center;
}
input, select, button {
padding: 10px;
font-size: 14px;
}
.products {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
}
.product {
background: white;
padding: 10px;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
text-align: center;
}
.product img {
width: 100%;
height: 150px;
object-fit: cover;
}
</style>
</head>
<body>
<h1>🛒 Product Filter</h1>
<div class="controls">
<input type="text" id="search" placeholder="Search products...">
<select id="category">
<option value="all">All Categories</option>
<option value="Electronics">Electronics</option>
<option value="Clothes">Clothes</option>
</select>
<select id="sort">
<option value="">Sort by Price</option>
<option value="low-high">Low → High</option>
<option value="high-low">High → Low</option>
</select>
<input type="number" id="price" placeholder="Max Price">
</div>
<div class="products" id="product-list"></div>
<script>
const products = [
{name: "iPhone 13", price: 70000, category: "Electronics", rating: 4.5, image: "https://via.placeholder.com/200"},
{name: "Samsung TV", price: 40000, category: "Electronics", rating: 4.2, image: "https://via.placeholder.com/200"},
{name: "Laptop", price: 55000, category: "Electronics", rating: 4.7, image: "https://via.placeholder.com/200"},
{name: "T-Shirt", price: 999, category: "Clothes", rating: 4.1, image: "https://via.placeholder.com/200"},
{name: "Jeans", price: 1999, category: "Clothes", rating: 4.3, image: "https://via.placeholder.com/200"},
{name: "Jacket", price: 2999, category: "Clothes", rating: 4.6, image: "https://via.placeholder.com/200"}
];
// Display Products
function displayProducts(data) {
const container = document.getElementById("product-list");
container.innerHTML = "";
data.forEach(p => {
container.innerHTML += `
<div class="product">
<img src="${p.image}">
<h3>${p.name}</h3>
<p>₹${p.price}</p>
<p>⭐ ${p.rating}</p>
</div>
`;
});
}
// Filter Logic
function filterProducts() {
let result = [...products];
const search = document.getElementById("search").value.toLowerCase();
const category = document.getElementById("category").value;
const sort = document.getElementById("sort").value;
const price = document.getElementById("price").value;
// Search
if (search) {
result = result.filter(p => p.name.toLowerCase().includes(search));
}
// Category
if (category !== "all") {
result = result.filter(p => p.category === category);
}
// Price
if (price) {
result = result.filter(p => p.price <= price);
}
// Sorting
if (sort === "low-high") {
result.sort((a, b) => a.price - b.price);
} else if (sort === "high-low") {
result.sort((a, b) => b.price - a.price);
}
displayProducts(result);
}
// Events
document.getElementById("search").addEventListener("input", filterProducts);
document.getElementById("category").addEventListener("change", filterProducts);
document.getElementById("sort").addEventListener("change", filterProducts);
document.getElementById("price").addEventListener("input", filterProducts);
// Initial Load
displayProducts(products);
</script>
</body>
</html>🚀 What You Get
- ✅ Live search filtering
- ✅ Category filter
- ✅ Price filter
- ✅ Sorting
- ✅ Dynamic UI update (no reload)
