Table of Contents

• Task Overview
• Features
• Requirements
• Technologies Used
• Demo

Task Overview

This project presents a web interface that allows users to browse food items, add them to a cart, adjust quantities, calculate total costs, and remove items—all without reloading the page. The implementation emphasizes smooth interactivity and functionality, showcasing essential front-end development skills.

Features

• Food Item Listing: Displays available food items, each with an "Add to Cart" button.
• Dynamic Cart Sidebar: Shows selected items, allows for quantity adjustments, and supports item removal.
• Real-Time Price Calculations: Updates prices and totals instantly as items are added or modified.
• Prevention of Duplicates: Disables the "Add to Cart" button for items already in the cart.
• Asynchronous Operations: Uses JavaScript to handle all cart operations, creating a seamless user experience without page reloads.

Requirements

1. Food Item Section:

   • Display food items with an "Add to Cart" button for each item.

2. Add to Cart Functionality:

   • Ensure the "Add to Cart" button adds the selected item to the cart.
   • Disable the button for items already in the cart to avoid duplicate entries.

3. Cart Sidebar:

   • Implement a sidebar that displays added items, allowing users to:
     • Adjust item quantities
     • Remove items from the cart
   • Display updated prices for each item and the total cost in real time.

4. JavaScript Operations:

   • Use JavaScript to handle adding items, adjusting quantities, calculating prices, and removing items.
   • Perform all operations asynchronously, ensuring the page does not reload during any action.

5. Styling:

   • Tailwind CSS
   • Avoid using CMS platforms (e.g., WordPress, Wix) or JavaScript frameworks.

Technologies Used

• HTML5 - For structuring content.
• CSS - Tailwind CSS/Bootstrap for styling.
• JavaScript (ES6+) - For asynchronous operations handling cart interactions.
• Git - Version control.

Demo