There are 10 bugs in this code, each one is labelled in the form: TODO: Bug n – xyz
Here’s the code

Readme

ShopNow – Colorful E-Commerce Website

A vibrant and responsive e-commerce product page built with HTML, CSS, and JavaScript. This project showcases a modern, colorful design with product filtering, shopping cart functionality, and a simulated checkout flow.

Features

• Stunning UI Design: Vibrant colors, gradients, and animations for an engaging shopping experience
• Product Listing: Display products in a responsive grid layout with hover effects
• Filtering System: Filter products by category, price range, and ratings
• Shopping Cart: Add products to cart, adjust quantities, and remove items
• Responsive Design: Optimized for all devices (mobile, tablet, desktop)
• Checkout Flow: Simulated checkout process with order confirmation
• Local Storage: Cart data persists between page refreshes
• Category Showcase: Visual category cards with hover animations
• Interactive Elements: Form validation, notifications, and feedback elements

Visual Design Elements

• Modern Color Scheme: Vibrant purples, pinks, and complementary accents
• Gradient Effects: Smooth color transitions for buttons, backgrounds, and headers
• Card Animations: Subtle animations on hover for product and category cards
• Interactive UI Elements: Visual feedback for user interactions
• Custom Icons: FontAwesome integration with consistent styling
• Typography: Google Fonts integration with Poppins for a clean, modern look

Technologies Used

• HTML5: Semantic markup structure
• CSS3:
  • Flexbox and Grid for layouts
  • CSS Variables for theming
  • Custom animations and transitions
  • Gradients and color effects
  • Media queries for responsiveness
• JavaScript (Vanilla):
  • DOM manipulation
  • Event handling
  • Local storage for cart persistence
  • Filter functionality

Project Structure

e-commerce/
├── index.html                # Main HTML file
├── css/
│   ├── reset.css             # CSS reset and base styles
│   ├── styles.css            # Main styles with color scheme
│   ├── product.css           # Product-specific styles
│   ├── cart.css              # Shopping cart styles
│   └── responsive.css        # Responsive design rules
├── js/
│   ├── products.js           # Product data
│   ├── app.js                # Main application logic
│   └── cart.js               # Shopping cart functionality
├── img/                      # Product images and assets
│   ├── hero.jpg
│   ├── product1.jpg - product12.jpg
│   ├── category-electronics.jpg
│   ├── category-fashion.jpg
│   ├── category-home.jpg
│   ├── category-beauty.jpg
│   └── ...
└── README.md                 # Project documentation

Getting Started

1. Clone or download this repository
2. Open index.html in your web browser
3. No build process or dependencies required

Usage

Product Filtering

1. Use the category checkboxes to filter by product type
2. Adjust the price slider to set maximum price
3. Select star ratings to filter by minimum rating
4. Click “Apply Filters” to see filtered results
5. Click “Clear All” to reset filters

Shopping Cart

1. Click “Add to Cart” on any product to add it to your cart
2. Click the cart icon in the header to view your cart
3. Adjust quantities using the + and – buttons
4. Remove items using the trash icon
5. Click “Proceed to Checkout” to continue

Checkout Process

1. Fill in the shipping information form
2. Enter payment details
3. Review order summary
4. Click “Complete Purchase” to place the order
5. View order confirmation with reference number

Customization

Color Scheme

The website uses CSS variables for easy color customization:

:root {
    --primary-color: #6c5ce7;
    --primary-light: #a29bfe;
    --secondary-color: #2d3436;
    --accent-color: #fd79a8;
    --accent-hover: #e84393;
    /* Other color variables */
}

You can change these variables in styles.css to completely transform the site’s appearance.

Adding New Products

To add new products, edit the products.js file following the existing structure:

{
    id: 13,
    name: "New Product Name",
    category: "category-name",
    price: 99.99,
    oldPrice: 129.99,  // Set to null if no discount
    rating: 4.5,
    reviewCount: 200,
    image: "img/product13.jpg",
    isNew: true,
    isSale: false,
    description: "Product description here."
}

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Opera (latest)

Future Enhancements

• Product detail page
• User authentication
• Wishlist functionality
• Product reviews
• Related products
• Advanced filtering options
• Payment gateway integration
• Dark mode theme toggle

License

This project is licensed under the MIT License – see the LICENSE file for details.

Acknowledgments

• Font Awesome for icons
• Google Fonts for typography
• Unsplash for product and category images

**app.js **-

// DOM Elements
const productGrid = document.getElementById('product-grid');
const applyFiltersBtn = document.getElementById('apply-filters');
const clearFiltersBtn = document.getElementById('clear-filters');
const priceRange = document.getElementById('price-range');
const priceValue = document.getElementById('price-value');
const categoryFilters = document.querySelectorAll('.category-filter');
const ratingFilters = document.querySelectorAll('.rating-filter');
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
const overlay = document.getElementById('overlay');

// State
let filteredProducts = [...products];
let selectedCategories = ['all'];
let selectedRatings = [];
let maxPrice = 1000;

// Initialize the page
document.addEventListener('DOMContentLoaded', () => {
    renderProducts(products);
    setupEventListeners();
});

// Setup Event Listeners
function setupEventListeners() {
    // Mobile menu toggle
    hamburger.addEventListener('click', () => {
        navLinks.classList.toggle('active');
    });

    // Price range input
    priceRange.addEventListener('input', (e) => {
        maxPrice = e.target.value;
        priceValue.textContent = `$${maxPrice}`;
    });

    // Category filters
    categoryFilters.forEach(filter => {
        filter.addEventListener('change', (e) => {
            if (e.target.value === 'all') {
                // If 'All' is checked, uncheck other categories
                if (e.target.checked) {
                    categoryFilters.forEach(cat => {
                        if (cat.value !== 'all') {
                            cat.checked = false;
                        }
                    });
                    selectedCategories = ['all'];
                } else {
                    // If 'All' is unchecked, make sure at least one category is selected
                    e.target.checked = true;
                }
            } else {
                // If another category is checked, uncheck 'All'
                const allCategoryFilter = document.querySelector('.category-filter[value="all"]');
                allCategoryFilter.checked = false;
                
                // Update selected categories
                selectedCategories = Array.from(categoryFilters)
                    .filter(cat => cat.checked && cat.value !== 'all')
                    .map(cat => cat.value);
                
                // If no category is selected, check 'All'
                if (selectedCategories.length === 0) {
                    allCategoryFilter.checked = true;
                    selectedCategories = ['all'];
                }
            }
        });
    });

    // Rating filters
    ratingFilters.forEach(filter => {
        filter.addEventListener('change', (e) => {
            if (e.target.checked) {
                selectedRatings.push(Number(e.target.value));
            } else {
                selectedRatings = selectedRatings.filter(rating => rating !== Number(e.target.value));
            }
        });
    });

    // Apply filters
    applyFiltersBtn.addEventListener('click', applyFilters);

    // Clear filters
    clearFiltersBtn.addEventListener('click', clearFilters);
}

// Filter products based on selected criteria
function applyFilters() {
    // Start with all products
    let filtered = [...products];

    // Filter by price
    filtered = filtered.filter(product => product.price <= maxPrice);

    // Filter by category
    if (!selectedCategories.includes('all')) {
        filtered = filtered.filter(product => selectedCategories.includes(product.category));
    }

    // Filter by rating
    if (selectedRatings.length > 0) {
        const minRating = Math.min(...selectedRatings);
        filtered = filtered.filter(product => product.rating >= minRating);
    }

    // Update the UI
    filteredProducts = filtered;
    renderProducts(filteredProducts);
}

// Clear all filters
function clearFilters() {
    // Reset price filter
    priceRange.value = 1000;
    maxPrice = 1000;
    priceValue.textContent = `$${maxPrice}`;

    // Reset category filters
    categoryFilters.forEach(filter => {
        filter.checked = filter.value === 'all';
    });
    selectedCategories = ['all'];

    // Reset rating filters
    ratingFilters.forEach(filter => {
        filter.checked = false;
    });
    selectedRatings = [];

    // Show all products
    filteredProducts = [...products];
    renderProducts(filteredProducts);
}

// Render products in the grid
function renderProducts(productsToRender) {
    productGrid.innerHTML = '';

    if (productsToRender.length === 0) {
        productGrid.innerHTML = `
            <div class="product-not-found">
                <h3>No products found</h3>
                <p>Try adjusting your filters to find products.</p>
            </div>
        `;
        return;
    }

    productsToRender.forEach(product => {
        const productEl = createProductElement(product);
        productGrid.appendChild(productEl);
    });
}

// Create a product element
function createProductElement(product) {
    const productEl = document.createElement('div');
    productEl.className = 'product-card';

    // Generate stars based on rating
    const fullStars = Math.floor(product.rating);
    const hasHalfStar = product.rating % 1 !== 0;
    let starsHTML = '';
    
    for (let i = 0; i < fullStars; i++) {
        starsHTML += '<i class="fas fa-star"></i>';
    }
    
    if (hasHalfStar) {
        starsHTML += '<i class="fas fa-star-half-alt"></i>';
    }
    
    const emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0);
    for (let i = 0; i < emptyStars; i++) {
        starsHTML += '<i class="far fa-star"></i>';
    }

    productEl.innerHTML = `
        <div class="product-image">
            <img src="${product.image}" alt="${product.name}">
            ${product.isNew ? '<span class="product-tag new">New</span>' : ''}
            ${product.isSale ? '<span class="product-tag sale">Sale</span>' : ''}
            <div class="product-actions">
                <button class="action-btn" title="Add to Wishlist"><i class="far fa-heart"></i></button>
                <button class="action-btn" title="Quick View"><i class="far fa-eye"></i></button>
                <button class="action-btn" title="Compare"><i class="fas fa-sync-alt"></i></button>
            </div>
        </div>
        <div class="product-info">
            <div class="product-category">${product.category}</div>
            <h3 class="product-title">${product.name}</h3>
            <div class="product-price">
                <span class="current-price">$${product.price.toFixed(2)}</span>
                ${product.oldPrice ? `<span class="original-price">$${product.oldPrice.toFixed(2)}</span>` : ''}
            </div>
            <div class="product-rating">
                <div class="stars">${starsHTML}</div>
                <span class="rating-count">(${product.reviewCount})</span>
            </div>
            <button class="add-to-cart" data-id="${product.id}">
                <i class="fas fa-shopping-cart"></i> Add to Cart
            </button>
        </div>
    `;

    // Add event listener to the Add to Cart button
    const addToCartBtn = productEl.querySelector('.add-to-cart');
    addToCartBtn.addEventListener('click', () => {
        addToCart(product.id);
    });

    return productEl;
}

// Trigger 'Add to Cart' with animations
function addToCart(productId) {
    // Create a visual effect for adding to cart
    const notification = document.createElement('div');
    notification.className = 'add-to-cart-notification';
    notification.textContent = `${productId} added to cart!`;
    document.body.appendChild(notification);

    // Trigger cart update
    if (typeof updateCart === 'function') {
        updateCart(productId);
    }

    // Remove notification after animation completes
    setTimeout(() => {
        notification.classList.add('fade-out');
        setTimeout(() => {
            document.body.removeChild(notification);
        }, 300);
    }, 2000);
}

// TODO: Bug 1 - Critical: Authentication bypass
function checkAuth() {
    return localStorage.getItem('token');  // Bug: No token validation
}

// TODO: Bug 2 - Critical: XSS vulnerability
function renderProducts() {
    const products = getProducts();
    return products.map(p => `<div>${p.name}</div>`).join('');  // Bug: No HTML escaping
}

// TODO: Bug 3 - Critical: CSRF protection missing
function submitOrder(orderData) {
    fetch('/api/orders', {  // Bug: No CSRF token
        method: 'POST',
        body: JSON.stringify(orderData)
    });
}

// TODO: Bug 4 - Critical: Price manipulation vulnerability
function updatePrice(item, price) {
    item.price = price;  // Bug: Client-side price modification possible
    updateCart();
}

// TODO: Bug 5 - Critical: Event listener timing
document.querySelector('.products-container').innerHTML = renderProducts();

// TODO: Bug 6 - Critical: Local storage error
function loadCart() {
    const cart = JSON.parse(localStorage.getItem('cart'));  // Bug: No error handling
    return cart || [];
}

// TODO: Bug 7 - Critical: Race condition in checkout
async function checkout() {
    const items = getCartItems();
    // Bug: Stock levels could change between check and purchase
    if (checkStock(items)) {
        await processPurchase(items);
    }
}

// TODO: Bug 8 - Critical: SQL Injection in search
function searchProducts(query) {
    return fetch(`/api/products/search?q=${query}`);  // Bug: No parameter escaping
}

// TODO: Bug 9 - Critical: Infinite loop potential
function calculateDiscount(items) {
    return items.reduce((acc, item) => {
        return acc + calculateDiscount(item.subItems);  // Bug: No base case
    }, 0);
}

// TODO: Bug 10 - Critical: Cart persistence
window.addEventListener('unload', () => {
    // Bug: Missing cart save to localStorage
    console.log('Page unloading...');
});

let cart = [];

// Initialize store
function initializeStore() {
    try {
        const storedCart = localStorage.getItem('cart');
        if (storedCart) {
            cart = JSON.parse(storedCart);
        }
    } catch (error) {
        console.error("Error parsing cart from localStorage:", error);
        cart = [];
    }
    updateCart(cart);
}

// Update cart display
function updateCart(cart) {
    const cartCountElem = document.querySelector('.cart-count');
    if (cartCountElem) {
        cartCountElem.textContent = cart.length;
    } else {
        console.warn("cart-count element not found");
    }
}

// Add to cart function
function addToCart(productId) {
    const product = products.find(p => p.id === productId);
    if (!product) {
        console.error("Product not found:", productId);
        return;
    }

    cart.push(product);
    localStorage.setItem('cart', JSON.stringify(cart));
    updateCart(cart);
}

cart.js

// DOM Elements
const cartIcon = document.getElementById('cart-icon');
const cartSidebar = document.getElementById('cart-sidebar');
const closeCartBtn = document.getElementById('close-cart');
const cartItems = document.getElementById('cart-items');
const cartTotalPrice = document.getElementById('cart-total-price');
const checkoutBtn = document.getElementById('checkout-btn');
const checkoutModal = document.getElementById('checkout-modal');
const closeCheckoutBtn = document.getElementById('close-checkout');
const confirmationModal = document.getElementById('confirmation-modal');
const closeConfirmationBtn = document.getElementById('close-confirmation');
const continueShoppingBtn = document.getElementById('continue-shopping');
const checkoutForm = document.getElementById('checkout-form');
const summarySubtotal = document.getElementById('summary-subtotal');
const summaryTax = document.getElementById('summary-tax');
const summaryTotal = document.getElementById('summary-total');
const orderReference = document.getElementById('order-reference');

// Cart state
let cart = [];
let cartTotal = 0;

// Initialize cart
document.addEventListener('DOMContentLoaded', () => {
    // Load cart from localStorage if available
    const savedCart = localStorage.getItem('cart');
    if (savedCart) {
        cart = JSON.parse(savedCart);
        updateCartCount();
        renderCart();
    }

    setupCartEvents();
});

// Setup cart event listeners
function setupCartEvents() {
    // Toggle cart sidebar
    cartIcon.addEventListener('click', () => {
        cartSidebar.classList.add('active');
        overlay.classList.add('active');
    });

    // Close cart
    closeCartBtn.addEventListener('click', () => {
        cartSidebar.classList.remove('active');
        overlay.classList.remove('active');
    });

    // Checkout button
    checkoutBtn.addEventListener('click', () => {
        if (cart.length === 0) {
            alert('Your cart is empty. Add some products first!');
            return;
        }
        
        openCheckoutModal();
    });

    // Close checkout modal
    closeCheckoutBtn.addEventListener('click', () => {
        checkoutModal.classList.remove('active');
        overlay.classList.remove('active');
    });

    // Close confirmation modal
    closeConfirmationBtn.addEventListener('click', () => {
        confirmationModal.classList.remove('active');
        overlay.classList.remove('active');
    });

    // Continue shopping button
    continueShoppingBtn.addEventListener('click', () => {
        confirmationModal.classList.remove('active');
        overlay.classList.remove('active');
    });

    // Handle checkout form submission
    checkoutForm.addEventListener('submit', (e) => {
        e.preventDefault();
        processOrder();
    });

    // Close modals when clicking on overlay
    overlay.addEventListener('click', () => {
        cartSidebar.classList.remove('active');
        checkoutModal.classList.remove('active');
        confirmationModal.classList.remove('active');
        overlay.classList.remove('active');
    });
}

// Add a product to cart
function updateCart(product) {
    // Check if product already exists in cart
    const existingItem = cart.find(item => item.id === product.id);
    
    if (existingItem) {
        existingItem.quantity += 1;
    } else {
        cart.push({
            ...product,
            quantity: 1
        });
    }
    
    // Save cart to localStorage
    localStorage.setItem('cart', JSON.stringify(cart));
    
    // Update UI
    updateCartCount();
    renderCart();
}

// Render cart items
function renderCart() {
    if (cart.length === 0) {
        cartItems.innerHTML = '<div class="empty-cart-message">Your cart is empty</div>';
        cartTotalPrice.textContent = '$0.00';
        cartTotal = 0;
        return;
    }
    
    cartItems.innerHTML = '';
    let total = 0;
    
    cart.forEach(item => {
        const itemTotal = item.price * item.quantity;
        total += itemTotal;
        
        const cartItem = document.createElement('div');
        cartItem.className = 'cart-item';
        cartItem.innerHTML = `
            <div class="cart-item-image">
                <img src="${item.image}" alt="${item.name}">
            </div>
            <div class="cart-item-details">
                <h4 class="cart-item-title">${item.name}</h4>
                <div class="cart-item-price">$${item.price.toFixed(2)}</div>
                <div class="cart-item-quantity">
                    <button class="quantity-btn decrease" data-id="${item.id}">-</button>
                    <input type="text" class="quantity-input" value="${item.quantity}" readonly>
                    <button class="quantity-btn increase" data-id="${item.id}">+</button>
                </div>
            </div>
            <button class="remove-item" data-id="${item.id}">
                <i class="fas fa-trash-alt"></i>
            </button>
        `;
        
        cartItems.appendChild(cartItem);
    });
    
    // Update cart total
    cartTotal = total;
    cartTotalPrice.textContent = `$${total.toFixed(2)}`;
    
    // Add event listeners to quantity buttons and remove buttons
    const decreaseButtons = document.querySelectorAll('.quantity-btn.decrease');
    const increaseButtons = document.querySelectorAll('.quantity-btn.increase');
    const removeButtons = document.querySelectorAll('.remove-item');
    
    decreaseButtons.forEach(button => {
        button.addEventListener('click', () => {
            decreaseQuantity(Number(button.dataset.id));
        });
    });
    
    increaseButtons.forEach(button => {
        button.addEventListener('click', () => {
            increaseQuantity(Number(button.dataset.id));
        });
    });
    
    removeButtons.forEach(button => {
        button.addEventListener('click', () => {
            removeFromCart(Number(button.dataset.id));
        });
    });
}

// Update cart count badge
function updateCartCount() {
    const cartCount = document.querySelector('.cart-count');
    const count = cart.reduce((total, item) => total + item.quantity, 0);
    cartCount.textContent = count;
}

// Decrease item quantity
function decreaseQuantity(productId) {
    const item = cart.find(item => item.id === productId);
    
    if (item.quantity > 1) {
        item.quantity -= 1;
    } else {
        removeFromCart(productId);
        return;
    }
    
    localStorage.setItem('cart', JSON.stringify(cart));
    renderCart();
}

// Increase item quantity
function increaseQuantity(productId) {
    const item = cart.find(item => item.id === productId);
    item.quantity += 1;
    
    localStorage.setItem('cart', JSON.stringify(cart));
    renderCart();
}

// Remove item from cart
function removeFromCart(productId) {
    cart = cart.filter(item => item.id !== productId);
    
    localStorage.setItem('cart', JSON.stringify(cart));
    updateCartCount();
    renderCart();
}

// Open checkout modal
function openCheckoutModal() {
    // Update summary values
    const subtotal = cartTotal;
    const tax = subtotal * 0.08; // Assuming 8% tax
    const total = subtotal + tax + 10; // Adding $10 shipping
    
    summarySubtotal.textContent = `$${subtotal.toFixed(2)}`;
    summaryTax.textContent = `$${tax.toFixed(2)}`;
    summaryTotal.textContent = `$${total.toFixed(2)}`;
    
    // Show modal
    checkoutModal.classList.add('active');
    overlay.classList.add('active');
}

// Process the order
function processOrder() {
    // Generate a random order number
    const orderNumber = `ORD-${Math.floor(100000 + Math.random() * 900000)}`;
    orderReference.textContent = orderNumber;
    
    // Close checkout modal
    checkoutModal.classList.remove('active');
    
    // Show confirmation modal
    confirmationModal.classList.add('active');
    
    // Clear cart
    cart = [];
    localStorage.removeItem('cart');
    updateCartCount();
    renderCart();
}

function updateCartTotal() {
    // TODO: Bug - Cart total calculation is incorrect (hint: floating point precision error in price calculations)
    let total = 0;
    const cartItems = document.querySelectorAll('.cart-item');
    cartItems.forEach(item => {
        const price = parseFloat(item.querySelector('.price').textContent);
        const quantity = parseInt(item.querySelector('.quantity').value);
        total += price * quantity;
    });
    // Bug: Direct floating point multiplication causes precision errors
    document.querySelector('.cart-total').textContent = total;
}

// TODO: Bug 9 - Critical: Cart total calculation (hint: floating point precision error)
function calculateTotal() {
    return cart.reduce((total, item) => {
        return total + item.price * item.quantity;
    }, 0);
}

// TODO: Bug 10 - Critical: Cart persistence (hint: cart not saved before page unload)
window.addEventListener('unload', () => {
    // Bug: Missing cart save to localStorage
    console.log('Page unloading...');
}); 

please give the answers fast and i need them one by one if possible
ai answers are allowed