Week 4: Web Fundamentals - Comprehensive Review

HTML Structure

<!-- product_card.html -->
<article class="product_card" data-product-id="123">
    <div class="product_image_container">
        <img src="placeholder.jpg" data-src="product123.jpg" alt="Blue cotton t-shirt" class="product_image lazy_load">
        <button type="button" class="quick_view_button" aria-label="Quick view">
            <span class="icon_eye"></span>
            Quick View
        </button>
    </div>
    
    <div class="product_info">
        <h3 class="product_name">
            <a href="/products/blue-cotton-t-shirt">Blue Cotton T-Shirt</a>
        </h3>
        
        <div class="product_price">
            <span class="current_price">$24.99</span>
            <span class="original_price">$29.99</span>
        </div>
        
        <div class="product_rating" aria-label="4.5 out of 5 stars">
            <span class="stars" style="--rating: 4.5;"></span>
            <span class="rating_count">(42)</span>
        </div>
        
        <button type="button" class="add_to_cart_button">
            Add to Cart
        </button>
    </div>
</article>

CSS Styling

/* product_card.css */
.product_card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    max-width: 300px;
}

.product_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.product_image_container {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
}

.product_image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.product_card:hover .product_image {
    transform: scale(1.05);
}

.quick_view_button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-weight: 500;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product_card:hover .quick_view_button {
    opacity: 1;
}

.product_info {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product_name {
    font-size: 16px;
    margin: 0;
}

.product_name a {
    color: #333;
    text-decoration: none;
}

.product_price {
    display: flex;
    align-items: center;
    gap: 8px;
}

.current_price {
    font-weight: bold;
    color: #e53935;
}

.original_price {
    text-decoration: line-through;
    color: #999;
    font-size: 14px;
}

.product_rating {
    display: flex;
    align-items: center;
    gap: 4px;
}

.stars {
    position: relative;
    display: inline-block;
    font-size: 0;
    line-height: 1;
}

.stars::before {
    content: "★★★★★";
    color: #e0e0e0;
    font-size: 16px;
}

.stars::after {
    content: "★★★★★";
    color: #ffc107;
    font-size: 16px;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--rating) * 20%);
    overflow: hidden;
}

.rating_count {
    color: #757575;
    font-size: 14px;
}

.add_to_cart_button {
    margin-top: 8px;
    padding: 8px 16px;
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

.add_to_cart_button:hover {
    background-color: #388e3c;
}

.feedback_message {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #388e3c;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

.add_to_cart_button.added .feedback_message {
    transform: translateY(0);
}

/* Responsive styles */
@media (max-width: 768px) {
    .product_card {
        max-width: 100%;
    }
    
    .quick_view_button {
        /* Always visible on touch devices */
        opacity: 1;
        font-size: 14px;
        padding: 6px 12px;
    }
}

JavaScript Functionality

// product_card.js
document.addEventListener('DOMContentLoaded', () => {
    // Lazy load product images
    const lazyImages = document.querySelectorAll('.lazy_load');
    
    if ('IntersectionObserver' in window) {
        const imageObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    img.src = img.dataset.src;
                    img.classList.remove('lazy_load');
                    imageObserver.unobserve(img);
                }
            });
        });
        
        lazyImages.forEach(img => imageObserver.observe(img));
    } else {
        // Fallback for browsers without IntersectionObserver
        lazyImages.forEach(img => {
            img.src = img.dataset.src;
            img.classList.remove('lazy_load');
        });
    }
    
    // Set up event delegation for product cards
    const productGrid = document.querySelector('.product_grid');
    if (!productGrid) return;
    
    productGrid.addEventListener('click', async (event) => {
        const addToCartButton = event.target.closest('.add_to_cart_button');
        if (addToCartButton) {
            const productCard = addToCartButton.closest('.product_card');
            const productId = productCard.dataset.productId;
            
            try {
                // Show loading state
                addToCartButton.disabled = true;
                
                // Make API request to add item to cart
                const response = await fetch('/api/cart/add', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ productId, quantity: 1 })
                });
                
                const result = await response.json();
                
                if (!response.ok) {
                    throw new Error(result.message || 'Failed to add item to cart');
                }
                
                // Show success feedback
                const feedbackMessage = document.createElement('span');
                feedbackMessage.className = 'feedback_message';
                feedbackMessage.textContent = 'Added!';
                addToCartButton.appendChild(feedbackMessage);
                addToCartButton.classList.add('added');
                
                // Update cart count in header
                updateCartCount(result.cartCount);
                
                // Reset button after animation
                setTimeout(() => {
                    addToCartButton.classList.remove('added');
                    addToCartButton.disabled = false;
                    // Remove feedback message after transition completes
                    setTimeout(() => {
                        feedbackMessage.remove();
                    }, 300);
                }, 1500);
                
            } catch (error) {
                console.error('Error adding to cart:', error);
                
                // Show error feedback
                addToCartButton.textContent = 'Failed';
                addToCartButton.style.backgroundColor = '#f44336';
                
                // Reset button after delay
                setTimeout(() => {
                    addToCartButton.textContent = 'Add to Cart';
                    addToCartButton.style.backgroundColor = '';
                    addToCartButton.disabled = false;
                }, 2000);
            }
        }
        
        const quickViewButton = event.target.closest('.quick_view_button');
        if (quickViewButton) {
            const productCard = quickViewButton.closest('.product_card');
            const productId = productCard.dataset.productId;
            
            // Open quick view modal
            openQuickViewModal(productId);
        }
    });
    
    // Function to update cart count in header
    function updateCartCount(count) {
        const cartCountElement = document.querySelector('.cart_count');
        if (cartCountElement) {
            cartCountElement.textContent = count;
            
            // Add animation class
            cartCountElement.classList.add('pulse');
            setTimeout(() => {
                cartCountElement.classList.remove('pulse');
            }, 600);
        }
    }
    
    // Function to open quick view modal
    async function openQuickViewModal(productId) {
        try {
            // Create modal if it doesn't exist
            let modal = document.querySelector('.quick_view_modal');
            if (!modal) {
                modal = document.createElement('div');
                modal.className = 'quick_view_modal';
                modal.innerHTML = `
                    

                        ×
                        

                            

                        
                    
                `;
                document.body.appendChild(modal);
                
                // Set up close button event
                modal.querySelector('.close_button').addEventListener('click', () => {
                    modal.classList.remove('active');
                    // Enable page scrolling again
                    document.body.style.overflow = '';
                });
                
                // Close on click outside content
                modal.addEventListener('click', (e) => {
                    if (e.target === modal) {
                        modal.classList.remove('active');
                        document.body.style.overflow = '';
                    }
                });
                
                // Close on Escape key
                document.addEventListener('keydown', (e) => {
                    if (e.key === 'Escape' && modal.classList.contains('active')) {
                        modal.classList.remove('active');
                        document.body.style.overflow = '';
                    }
                });
            }
            
            // Show modal with loading state
            const modalBody = modal.querySelector('.modal_body');
            modalBody.innerHTML = '
';
            modal.classList.add('active');
            
            // Disable page scrolling while modal is open
            document.body.style.overflow = 'hidden';
            
            // Fetch product details
            const response = await fetch(`/api/products/${productId}`);
            
            if (!response.ok) {
                throw new Error('Failed to load product details');
            }
            
            const product = await response.json();
            
            // Update modal content with product details
            modalBody.innerHTML = `
                

                    

                        
                    
                    

                        
${product.name}
                        

                            $${product.price.toFixed(2)}
                            ${product.originalPrice ? `$${product.originalPrice.toFixed(2)}` : ''}
                        
                        

                            
                            (${product.reviewCount})
                        
                        
${product.description}
                        

                            

                                -
                                
                                +
                            
                            Add to Cart
                        
                        View full details
                    
                
            `;
            
            // Set up quantity selector in modal
            const quantityInput = modalBody.querySelector('input[type="number"]');
            modalBody.querySelector('.quantity_decrease').addEventListener('click', () => {
                if (quantityInput.value > 1) {
                    quantityInput.value = parseInt(quantityInput.value) - 1;
                }
            });
            
            modalBody.querySelector('.quantity_increase').addEventListener('click', () => {
                quantityInput.value = parseInt(quantityInput.value) + 1;
            });
            
            // Add to cart from modal
            modalBody.querySelector('.add_to_cart_button').addEventListener('click', async () => {
                const button = modalBody.querySelector('.add_to_cart_button');
                const quantity = parseInt(quantityInput.value);
                
                try {
                    button.disabled = true;
                    button.textContent = 'Adding...';
                    
                    const response = await fetch('/api/cart/add', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({ productId, quantity })
                    });
                    
                    const result = await response.json();
                    
                    if (!response.ok) {
                        throw new Error(result.message || 'Failed to add item to cart');
                    }
                    
                    button.textContent = 'Added!';
                    button.style.backgroundColor = '#388e3c';
                    
                    // Update cart count
                    updateCartCount(result.cartCount);
                    
                    // Close modal after delay
                    setTimeout(() => {
                        modal.classList.remove('active');
                        document.body.style.overflow = '';
                    }, 1500);
                    
                } catch (error) {
                    console.error('Error adding to cart:', error);
                    button.textContent = 'Failed';
                    button.style.backgroundColor = '#f44336';
                    
                    setTimeout(() => {
                        button.textContent = 'Add to Cart';
                        button.style.backgroundColor = '';
                        button.disabled = false;
                    }, 2000);
                }
            });
            
        } catch (error) {
            console.error('Error opening quick view:', error);
            
            // Show error in modal
            const modalBody = document.querySelector('.modal_body');
            if (modalBody) {
                modalBody.innerHTML = `
                    

                        
Sorry, there was an error loading the product details.
                        Try Again
                    
                `;
                
                modalBody.querySelector('.retry_button').addEventListener('click', () => {
                    openQuickViewModal(productId);
                });
            }
        }
    }
});

Debugging Common Issues

When implementing this component, you might encounter these issues:

/* Ensure the button is properly sized and visible */
.quick_view_button {
    /* Fix: Add min-width and min-height */
    min-width: 120px;
    min-height: 40px;
    /* Fix: Ensure z-index is higher than product image */
    z-index: 1;
}

// Fix: Ensure proper CSS transition with correct initial state
.feedback_message {
    /* Fix: Changed from translateY(-100%) to translate(-50%, -100%) */
    transform: translate(-50%, -100%);
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    padding: 5px 10px;
    border-radius: 4px;
}

.add_to_cart_button.added .feedback_message {
    /* Fix: Updated transform to match initial state */
    transform: translate(-50%, -50%);
}

// Fix: Add CSRF token to API requests
async function addToCart(productId, quantity) {
    try {
        // Fix: Get CSRF token from meta tag
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        
        const response = await fetch('/api/cart/add', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                // Fix: Add CSRF token to request headers
                'X-CSRF-Token': csrfToken
            },
            body: JSON.stringify({ productId, quantity })
        });
        
        // Rest of function remains the same
        // ...
    } catch (error) {
        // Error handling
    }
}