Interactive Coffee Shop Website with Dynamic Shopping Cart

This HTML, CSS, and JavaScript-based web application represents an interactive coffee shop menu where users can browse through various coffee products, view details upon hovering, and add items to a dynamically updating shopping cart. The user interface includes a toggle switch for a dark theme, enhancing the visual experience.

Key Features:

Dark Theme Toggle: Users can switch between light and dark themes for a personalized viewing experience.

Product Display: The menu displays a variety of coffee products, each with an image, title, price, and brief description. Additional details are revealed on mouse hover.

Add to Cart: Users can add products to their shopping cart by clicking the "Add to Cart" button. The quantity and total price are dynamically updated in the cart.

Shopping Cart: The shopping cart displays a list of selected items, including images, titles, prices, and quantities. Users can increase or decrease the quantity of items in the cart or remove them entirely.

Total Price and Quantity: The total price and quantity of items in the cart are shown at the top of the page for quick reference.

Responsive Design: The web application is designed to be responsive, ensuring a seamless experience across various devices.

The application fetches coffee product data from an external API (https://api.sampleapis.co...) using AJAX, providing a realistic demonstration of handling data in a real-world scenario.

Note: The application showcases modern web development techniques and can serve as a foundation for building more extensive e-commerce or menu-based websites. The code includes comments for clarity, and further enhancements can be made for additional features and improvements.