Scribd
Upload
75 views10 pages

Webpage Filter Css Micro Project

Uploaded by

virajkurhadework
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
75 views10 pages

Webpage Filter Css Micro Project

Uploaded by

virajkurhadework
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

1.

Introduction
This project is a web-based product filter application that allows users to filter products by category,
price, and search keywords. The application is built with HTML, CSS, and JavaScript, providing a
user-friendly interface for product browsing. This filter functionality can be useful for e-commerce
websites, enabling users to narrow down product listings efficiently.

2. Project Objectives
• Implement a dynamic product filter using HTML, CSS, and JavaScript.
• Enable users to filter products based on:
• **Category**: Select from predefined product categories (e.g., Electronics, Clothing, Home).
• **Price**: Set a maximum price limit for displayed products.
• **Search**: Search for products by name.
• Create a responsive, user-friendly interface for browsing products.

3. Project Structure

3.1 HTML Structure


The HTML document is structured into two main sections:

1. **Filter Section**: Contains input elements for filtering the products.

- A dropdown for category selection.

- An input for maximum price.

- A search box for keyword-based filtering.

2. **Product List**:
Contains individual product items, each with a name, category, and price. Each product item is represented by a
`div` element with relevant data attributes (e.g., `data-category`, `data-price`) for easy access by JavaScript.
3.2 CSS Styling
• **Flexbox Layout**: The body uses a flexbox to arrange the filter section and product list side-by-
side, providing a neat and organized layout.
• **Grid Layout**: The product list is displayed as a responsive grid with two columns, making it
visually appealing and easy to browse.
• **Styling**: Basic styles are applied to the product items to give them a consistent look, with borders,
padding, and rounded corners.

3.3 JavaScript Functionality


The filtering functionality is achieved through the `applyFilters()` JavaScript function. This function is triggered
each time the filter inputs change, updating the displayed products based on the user's selections.

Key Steps in `applyFilters()`:

1. **Retrieve Filter Values**:


o Category: `categoryFilter`
o Price: `priceFilter`
o Search: `searchFilter`

2. **Iterate through Product Items**:


o Each product item is accessed via the `document.querySelectorAll('.product-item')` selection.
o Extract product details such as category, price, and name from each item’s data attributes and text
content.

3. **Filter Logic**:
o Products are checked against each filter criterion (category, price, and search term).
o Each criterion uses a logical condition to determine if the product meets the specified filters:
o **Category**: Matches if either no category is selected or if the product's category matches the
selected category.
o **Price**: Matches if either no price is specified or if the product's price is within the user-defined
limit.
o **Search**: Matches if the product name includes the search term.

4. **Display Logic**:
o Products that meet all filter criteria are displayed by removing the `hidden` class.
o Products that do not match are hidden by adding the `hidden` class.
4. Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Filter Demo</title>
<style>
body { font-family: Arial, sans-serif; display: flex; }
.filter-section { width: 200px; margin-right: 20px; }
.product-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.product-item { border: 1px solid #ccc; padding: 10px; border-radius: 5px; }
.hidden { display: none; }
</style>
</head>
<body>

<!-- Filter Section -->


<div class="filter-section">
<h3>Filter Products</h3>

<!-- Category Filter -->


<label for="categoryFilter">Category:</label>
<select id="categoryFilter" onchange="applyFilters()">
<option value="">All</option>
<option value="Electronics">Electronics</option>
<option value="Clothing">Clothing</option>
<option value="Home">Home</option>
</select>
<!-- Price Filter -->
<label for="priceFilter">Max Price:</label>
<input type="number" id="priceFilter" placeholder="Enter max price" oninput="applyFilters()">

<!-- Search Filter -->


<label for="searchFilter">Search:</label>
<input type="text" id="searchFilter" placeholder="Search products" onkeyup="applyFilters()">
</div>

<!-- Product List -->


<div class="product-list" id="productList">
<div class="product-item" data-category="Clothing" data-price="50">
<h4>T-shirt</h4>
<p>Category: Clothing</p>
<p>Price: ₹150</p>
</div>
<div class="product-item" data-category="Clothing" data-price="50">
<h4>Jeans</h4>
<p>Category: Clothing</p>
<p>Price: ₹699</p>
</div>
<div class="product-item" data-category="Home" data-price="150">
<h4>Blender</h4>
<p>Category: Home</p>
<p>Price: ₹1050</p>
</div>
<div class="product-item" data-category="Electronics" data-price="200">
<h4>Smartphone</h4>
<p>Category: Electronics</p>
<p>Price: ₹20,000</p>
</div>
<div class="product-item" data-category="Home" data-price="150">
<h4>Induction</h4>
<p>Category: Home</p>
<p>Price: ₹1,526</p>
</div>
<div class="product-item" data-category="Electronics" data-price="120">
<h4>Headphones</h4>
<p>Category: Electronics</p>
<p>Price: ₹1200</p>

</div>
<div class="product-item" data-category="Electronics" data-price="120">
<h4>TV</h4>
<p>Category: Electronics</p>
<p>Price: ₹12,000</p>

</div>
<div class="product-item" data-category="Electronics" data-price="120">
<h4>Laptop</h4>
<p>Category: Electronics</p>
<p>Price: ₹49,999</p>

</div>
<!-- Add more products as needed -->
</div>

<script>
function applyFilters() {
const categoryFilter = document.getElementById('categoryFilter').value.toLowerCase();
const priceFilter = parseFloat(document.getElementById('priceFilter').value);
const searchFilter = document.getElementById('searchFilter').value.toLowerCase();

// Select all product items


const products = document.querySelectorAll('.product-item');

products.forEach(product => {
const category = product.getAttribute('data-category').toLowerCase();
const price = parseFloat(product.getAttribute('data-price'));
const name = product.querySelector('h4').textContent.toLowerCase();

// Apply filters
const categoryMatch = !categoryFilter || category.includes(categoryFilter);
const priceMatch = isNaN(priceFilter) || price <= priceFilter;
const searchMatch = name.includes(searchFilter);

// Show or hide based on match


if (categoryMatch && priceMatch && searchMatch) {
product.classList.remove('hidden');
} else {
product.classList.add('hidden');
}
});
}
</script>

</body>
</html>
Output :-
4. Code Analysis

• Html

<!-- Category Filter -->

<select id="categoryFilter" onchange="applyFilters()">

<option value="">All</option>

<option value="Electronics">Electronics</option>

<option value="Clothing">Clothing</option>

<option value="Home">Home</option>

</select>

This `select` element enables users to filter products based on category, with an event listener that calls the
`applyFilters()` function whenever the selection changes.

• JavaScript Filtering Logic

const categoryMatch = !categoryFilter || category.includes(categoryFilter);

const priceMatch = isNaN(priceFilter) || price <= priceFilter;

const searchMatch = name.includes(searchFilter);

These conditions ensure each product matches the selected filters.

• CSS Layout

.product-list {

display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 10px;

}
5. Conclusion

This product filter application demonstrates a simple but effective use of HTML, CSS, and JavaScript to create a
dynamic, interactive product browsing experience. The filtering functionality allows users to search and narrow
down product listings based on multiple criteria, enhancing the user experience for potential e-commerce
applications.

6. References

- HTML, CSS, and JavaScript documentation on [MDN Web Docs](https://developer.mozilla.org/).

You might also like