This project is a web application that allows users to search and filter products based on various criteria. It is built using HTML, CSS, and JavaScript, making it easy to run on any modern web browser.
-
Product Search: Users can search for products by entering keywords in the search bar. The search functionality dynamically updates the displayed products as the user types.
-
Filtering: Users can filter products based on specific criteria such as category, price range, or availability. The filter options are presented as checkboxes or dropdown menus, allowing users to select multiple filters simultaneously.
To run the product search filter project on your local machine, follow these steps:
-
Clone the repository to your local machine or download the source code as a ZIP file.
-
Open the project directory and locate the index.html file.
-
Double-click on the index.html file to open it in your default web browser.
Once you have the project running in your web browser, you can use the following instructions to search and filter products:
-
Search: Enter keywords related to the product you are looking for in the search bar. The displayed products will automatically update as you type.
-
Filter: Use the filter options provided to narrow down the displayed products. Select the desired checkboxes or dropdown options to apply filters. The products will be updated instantly based on the chosen filters.
You can customize the project according to your specific needs:
-
Product Data: Modify the script.js file to include your own product data. Each product should have properties such as name, category, price, and availability.
-
Filter Options: Modify the filter options in the index.html file to match the properties of your product data. Update the checkbox labels and dropdown options to reflect your desired filter criteria.
-
Styling: Customize the visual appearance of the web application by modifying the CSS styles in the style.css file. You can change colors, fonts, layouts, and more to suit your design preferences.
This project was created by Rishabh Singh Sahil. Feel free to modify and use it for your own purposes. If you have any questions or suggestions, please contact rs4230@srmist.edu.in or create an issue in the project repository.