EcoCompare is a front-end web project that helps users discover and compare eco-friendly products side by side. It focuses on making sustainable shopping decisions easier by highlighting key product metrics such as eco score, carbon footprint, recyclability, and price.
- Clean landing page with hero section and sustainability-focused messaging
- Search products by name or category
- Category-based filtering (All, Clothing, Electronics, Kitchen, Bags, Drinkware)
- Product cards with image, category, price, and eco score bar
- Compare selected products in a side-by-side comparison table
- Remove products from comparison directly in the comparison table
- Responsive navigation with mobile menu toggle
- Scroll-based fade-in animations for sections
- HTML5
- CSS3 (custom properties, responsive layout, animations)
- Vanilla JavaScript (DOM rendering and interactions)
- index.html - App layout and sections (navbar, hero, products, compare, about, footer)
- style.css - Complete styling, responsive behavior, and UI animations
- script.js - Product data, rendering logic, search/filter, compare table, and interactions
This is a static project, so no build step is required.
- Open the project folder.
- Open index.html in a browser.
Optional (recommended): use VS Code Live Server for auto-reload during development.
Products are rendered dynamically from a JavaScript array and displayed as cards in a grid.
Typing in the search box filters products by:
- Product name
- Product category
Category buttons show products from a selected category or all products.
Users can add products to compare. When at least two products are selected, a comparison table appears with:
- Price
- Eco score
- Carbon footprint
- Recyclability
A compact menu is available on smaller screens.
This project is for academic and learning purposes.