Product List with Cart - Frontend Mentor Challenge

A responsive dessert product list with fully functional shopping cart built with vanilla HTML, CSS, and JavaScript.

🎯 Challenge Overview

This project is a solution to the Frontend Mentor Product List with Cart challenge. The challenge focuses on building a dynamic product listing page with cart functionality and order confirmation flow.

💼 Portfolio Project

This project also serves as a portfolio demonstration showcasing:

• Frontend Development Skills: Vanilla JavaScript, responsive CSS, and semantic HTML
• UI/UX Implementation: Translating design mockups into functional interfaces
• Problem-Solving: Building interactive cart functionality and state management
• Code Organization: Clean, maintainable code structure and documentation
• Responsive Design: Mobile-first approach with cross-device compatibility

✨ Features

• Product Catalog: Browse through a selection of desserts with responsive images
• Shopping Cart: Add/remove items and adjust quantities
• Order Management:
  • Increase/decrease item quantities
  • Remove items from cart
  • View cart total and item count
• Order Confirmation: Modal popup showing order summary
• Responsive Design: Optimized for mobile, tablet, and desktop
• Interactive States: Hover and focus states for all interactive elements

🛠️ Built With

• HTML5 - Semantic markup
• CSS3 - Custom styling with responsive design
• JavaScript - Vanilla JS for interactivity
• Bootstrap 5 - CSS framework for responsive layout
• Google Fonts - Red Hat Text typography

🚀 Getting Started

Prerequisites

• A modern web browser
• Basic web server (optional, for local development)

Installation

1. Clone or download the project files
2. Open index.html in your web browser

📁 Project Structure

├── index.html          # Main HTML file
├── style.css           # Custom CSS styles
├── script.js           # JavaScript functionality
├── desserts.js         # Product data
├── images/             # Product images and icons
│   ├── favicon-32x32.png
│   ├── icon-*.svg      # UI icons
│   └── image-*.jpg     # Product images (mobile/tablet/desktop)
└── README.md

🎨 Design Features

• Responsive Images: Product images adapt to different screen sizes
• Mobile-First: Optimized for mobile devices with progressive enhancement
• Accessibility: Keyboard navigation and focus management
• Modern UI: Clean, modern interface with smooth interactions

🔧 Functionality

Core Features Implemented:

• ✅ Add items to cart
• ✅ Remove items from cart
• ✅ Increase/decrease quantities
• ✅ Cart total calculation
• ✅ Order confirmation modal
• ✅ "Start New Order" functionality
• ✅ Responsive design
• ✅ Hover/focus states

User Actions:

1. Browse Products: View dessert catalog with images and prices
2. Add to Cart: Click "Add to Cart" button on any product
3. Manage Cart: Adjust quantities or remove items
4. Checkout: Click "Confirm Order" to see order summary
5. Reset: Use "Start New Order" to clear cart and start over

💡 Key Implementation Details

• Dynamic Product Loading: Products are loaded from desserts.js data file
• State Management: Cart state is managed in JavaScript with local storage persistence
• Responsive Images: Uses different image sizes for optimal loading

🌟 Future Enhancements

• Add product search/filtering
• Implement user accounts and order history
• Add payment processing integration
• Include product reviews and ratings
• Add wishlist functionality
• Enhance keyboard navigation for better accessibility

📱 Browser Support

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

📄 License

This project is for educational purposes as part of the Frontend Mentor challenge.

Author

• GitHub - @gumballoon
• Frontend Mentor - @gumballoon
• CSS Battle - @gumballoon

🙏 Acknowledgments

• Frontend Mentor for the design and challenge
• Design assets and requirements provided by Frontend Mentor
• Bootstrap team for the CSS framework
• Google Fonts for typography

---

Frontend Mentor Challenge: Product List with Cart