Food Ordering App: Cart Implementation in JavaScript

Food Ordering App: Cart Implementation in JavaScript

The cart is the most important part of the food ordering app. Here is how to implement it cleanly.

Cart Data Structure

let cart = {}; // { itemId: quantity }
``
Using an object with item ID as key and quantity as value is simple and efficient.

### Add to Cart

```js
function addToCart(itemId) {
  cart[itemId] = (cart[itemId] || 0) + 1;
  renderCart();
}
``
If the item is not in the cart, start at 0 and add 1. If it is, increment.

### Remove from Cart

```js
function removeFromCart(itemId) {
  delete cart[itemId];
  renderCart();
}
``
### Change Quantity

```js
function changeQuantity(itemId, delta) {
  cart[itemId] = (cart[itemId] || 0) + delta;
  if (cart[itemId] <= 0) delete cart[itemId];
  renderCart();
}
``
If quantity drops to 0 or below, remove the item from the cart.

### Calculate Total

```js
function calculateTotal() {
  return Object.entries(cart).reduce((sum, [id, qty]) => {
    const item = menu.find((m) => m.id === parseInt(id));
    return sum + item.price * qty;
  }, 0);
}
``
### Render Cart

```js
function renderCart() {
  const cartItems = Object.entries(cart);
  if (cartItems.length === 0) {
    cartDiv.innerHTML = "<p>Your cart is empty</p>";
    return;
  }
  cartItems.forEach(([id, qty]) => {
    const item = menu.find((m) => m.id === parseInt(id));
    // render item with +/- buttons and subtotal
  });
  // render total and checkout button
}
``
### The Takeaway

Cart implementation: use an object { itemId: quantity }. Add increments, remove deletes, changeQuantity adjusts and removes at 0. Calculate total by summing price * qty. Render the cart with +/- buttons, subtotals, and a total. Handle empty cart.