Electronics Shop Website

A modern, responsive e-commerce web application for browsing, filtering, searching, and purchasing electronics. Built with HTML, CSS (Tailwind), and JavaScript.

Features

• Product Catalog: Browse a variety of electronics including phones, laptops, and accessories.
• Search & Filter: Powerful search and filter options by category, brand, price, and more.
• Cart: Add, remove, and update product quantities. View cart summary and apply coupon codes.
• Favorites: Mark products as favorites and view them on a dedicated favorites page.
• Dark Mode: Toggle between light and dark themes.
• Responsive Design: Works on desktop and mobile devices.

Project Structure

├── cart.html           # Shopping cart page
├── favorites.html      # Favorite products page
├── filter-feature.js   # Filtering logic
├── home.html           # Landing page
├── package.json        # (If using npm for dependencies)
├── products.js         # Product data and cart/favorites logic
├── README.md           # Project documentation
├── search-feature.js   # Search logic
├── shop.html           # Main shop/catalog page
├── style.css           # Custom styles (if any)
└── images/             # Product and UI images

Usage

1. Clone the repository

   git clone https://github.com/yourusername/Electronics-Shop-Website.git
   

2. Open home.html in your browser

   • No build step is required. All logic is client-side JavaScript.

3. View the website Online

   • open https://ace-electronics.netlify.app

Key Files

• home.html: Landing page with hero, categories, and featured products.
• shop.html: Product catalog with filters and search.
• cart.html: Shopping cart with coupon and checkout.
• favorites.html: View and manage your favorite products.
• products.js: Product data, cart, and favorites logic.
• filter-feature.js: Filtering logic for the shop page.
• search-feature.js: Search logic for products.

Customization

• Add Products: Edit products.js to add or modify products.
• Images: Place product images in the images/ folder and update product data accordingly.
• Styling: Customize Tailwind classes or add to style.css.

Credits

• Icons: Font Awesome
• Fonts: Google Fonts - Inter
• UI: Tailwind CSS

License

This project is for educational/demo purposes. Feel free to use and modify for your own learning or non-commercial projects.