A modern, responsive e-commerce web application featuring product browsing, search functionality, and shopping cart management
Features • Demo • Installation • Usage • Contributing
Click to expand
This e-commerce application provides a complete online shopping experience with a focus on electronics and tech products. The application features a clean, modern interface that allows users to browse products, search for specific items, manage their shopping cart, and view detailed product information.
The project demonstrates modern web development practices using vanilla JavaScript, CSS3, and HTML5, with localStorage integration for persistent cart functionality across browser sessions.
The application includes comprehensive product management with 11 different electronic products ranging from smart watches to laptops. Users can interact with products through an intuitive interface that includes hover effects and smooth transitions. The shopping cart functionality provides real-time updates and automatic subtotal calculations, while the search and sorting features enable efficient product discovery.
|
|
Home page featuring product categories and navigation
Product catalog with search and sorting functionality
Shopping cart with item management and subtotal display
Project Link: https://manjunathdharappanavar.github.io/e-commerce-project
- Frontend: Vanilla JavaScript ES6+ with DOM manipulation
- Styling: CSS3 with Flexbox and Grid layouts
- Data Storage: Browser localStorage for cart persistence
- Images: External CDN integration for product images
- Architecture: Multi-page application with shared JavaScript modules
No special software installation required. The application runs in any modern web browser that supports:
| Feature | Requirement | Purpose |
|---|---|---|
| JavaScript ES6+ | Modern browser | Core functionality |
| localStorage API | Supported browser | Cart persistence |
| CSS3 Grid/Flexbox | Recent browser | Layout rendering |
# Clone the repository
git clone https://github.com/ManjunathDharappanavar/e-commerce-project.git
# Navigate to project directory
cd e-commerce-project
# Option 1: Open directly in browser
open index.html
# Option 2: Serve with a local server (recommended)
# Using Python 3
python -m http.server 8000
# Using Node.js (if you have live-server installed)
npx live-server
# Using PHP (if available)
php -S localhost:8000Deploy to GitHub Pages
# Ensure your repository is public
# Go to Settings > Pages in your GitHub repository
# Select source: Deploy from a branch
# Choose branch: main
# Your site will be available at: https://username.github.io/repository-nameThe application consists of three main pages, each serving specific functionality:
Home Page (index.html): Displays product categories including Mobile Phones, Laptops, and Tech Items with visual galleries for each category.
Product Catalog (product.html): Features the complete product listing with search functionality, price sorting options, and detailed product cards with add-to-cart functionality.
Shopping Cart (cart.html): Provides cart management capabilities including item removal, quantity display, and automatic subtotal calculation.
// Products are defined in the script.js file
const products = [
{id: 1, name:"Smart Watch", price: "449", Image: "product-url"},
// Additional products...
];
// Render products dynamically
renderProducts(products, "productList");// Add item to cart
addToCart(productId);
// Remove item from cart
removeFromCart(productId);
// View cart contents
renderCart();// Search products by name
searchProducts("Smart Watch");
// Sort products by price
sortProducts("price");Users can browse products on the home page through categorized galleries, search for specific products using the search bar on the product page, sort products by price using the dropdown selector, add products to cart with single-click functionality, and manage cart contents including item removal and subtotal viewing.
e-commerce-project/
├── index.html # Home page with product categories
├── product.html # Product catalog with search/sort
├── cart.html # Shopping cart management
├── script.js # Core JavaScript functionality
├── style.css # Application styling
├── image.png # Logo image
├── alibaba.png # Favicon
├── banner11.png # Homepage banner
└── README.md # Project documentation
script.js contains all application logic including product data, cart management functions, search and sort functionality, and localStorage integration.
style.css provides comprehensive styling including responsive design, hover effects, grid layouts, and cross-page consistency.
HTML files structure the application pages with semantic markup and proper navigation links.
renderProducts(products, containerID)
Description: Renders product list in specified container
Parameters:
products(Array): Array of product objectscontainerID(String): DOM element ID for rendering
Usage:
renderProducts(products, "productList");searchProducts(query)
Description: Filters products based on search query
Parameters:
query(String): Search term for filtering
Returns: Filtered products rendered in UI
Usage:
searchProducts("Smart Watch");addToCart(productId)
Description: Adds product to shopping cart and localStorage
Parameters:
productId(Number): Unique product identifier
Side Effects: Updates localStorage, displays alert, refreshes cart display
removeFromCart(productId)
Description: Removes product from cart and updates storage
Parameters:
productId(Number): Product ID to remove
Side Effects: Updates localStorage, displays confirmation, refreshes cart
| Browser | Version | Support Level |
|---|---|---|
| Chrome | 60+ | ✅ Full Support |
| Firefox | 55+ | ✅ Full Support |
| Safari | 12+ | ✅ Full Support |
| Edge | 79+ | ✅ Full Support |
| Internet Explorer | 11 |
The application uses modern JavaScript features including arrow functions, template literals, and localStorage API. CSS Grid and Flexbox are utilized for layout management. Some features may require polyfills for older browser versions.
Contributions are welcome from the community. Please follow the established code style and testing practices when submitting pull requests.
- Fork the repository from the main branch
- Create a feature branch with descriptive naming (
feature/search-enhancement) - Implement changes following existing code patterns
- Test functionality across different browsers
- Submit a pull request with detailed description
Maintain consistent JavaScript formatting with proper indentation and semicolon usage. Follow established CSS naming conventions and maintain responsive design principles. Ensure HTML semantic structure and accessibility compliance.
Potential improvements include enhanced product filtering options, user authentication system, checkout and payment integration, product reviews and ratings, mobile app development, and performance optimization.
Planned Features
-
Version 2.0
- User authentication and profiles
- Product categories and subcategories
- Advanced search filters
- Wishlist functionality
-
Version 2.1
- Payment gateway integration
- Order history and tracking
- Product reviews and ratings
- Admin dashboard for product management
-
Future Releases
- Mobile application development
- Real-time inventory management
- Multi-language support
- Advanced analytics and reporting
Project Maintainer: Manjunath Dharappanavar
Project Repository: https://github.com/ManjunathDharappanavar/e-commerce-project
Special thanks to the web development community and open-source contributors who have provided guidance and inspiration for this project.
- MDN Web Docs - Comprehensive web development documentation
- Amazon Product Images - Product image resources
- CSS Grid and Flexbox - Modern layout techniques
- localStorage API - Client-side data persistence
