ShopSphere 🛍️

A simple and responsive e-commerce web application where users can browse products, search for items, filter products by category, and manage a shopping cart.

🚀 Features

• 🔍 Search products by name
• 🛒 Add products to the shopping cart
• 🔢 Automatic cart item count
• 💰 Calculate total cart price
• 🗂️ Filter products by category
• 📱 Responsive and user-friendly interface
• 🗑️ Clear all items from the cart
• 📦 Cart sidebar for viewing selected products

🛠️ Technologies Used

• HTML5 – Structure of the website
• CSS3 – Styling and responsive design
• JavaScript – Product rendering, search, filtering, and cart functionality

📂 Project Structureeee

ShopSphere/
│
├── index.html      # Main HTML structure
├── style.css       # Styling and layout
├── script.js       # Application functionality
└── README.md       # Project documentation

📋 How to Run the Project

1. Download or clone this repository.

2. Open the project folder.

3. Make sure the following files are present:

   • index.html
   • style.css
   • script.js

4. Open index.html in any modern web browser.

🛒 Categories

ShopSphere currently supports the following product categories:

• All
• Electronics
• Fashion
• Home

Users can click on a category button to view products from that category.

💡 How It Works

• Products are dynamically displayed using JavaScript.
• Users can search for products using the search bar.
• Category buttons filter the displayed products.
• Clicking Add to Cart adds a product to the shopping cart.
• The cart automatically updates the item count and total price.
• Users can open the cart sidebar to view or clear selected items.

🔮 Future Improvements

• User login and authentication
• Product details page
• Quantity increase/decrease controls
• Remove individual cart items
• Wishlist functionality
• Payment gateway integration
• Backend and database support
• Order history

👨‍💻 Author

Built as a demo e-commerce project for learning and practice.

---

© 2026 ShopSphere. All rights reserved.