Food Cart Application

A simple web application that allows users to add food items to a cart, view the total price, and checkout.

Features

• Display a list of available foods from db.json
• Add food items to cart
• Adjust quantity of items in cart
• Remove items from cart
• View total price of items in cart
• Checkout functionality

Prerequisites

• Node.js installed on your machine
• json-server installed (will be installed with npx)

Classroom Exercises

Project Structure

• index.html - Main HTML file for the application
• styles.css - CSS styling for the application
• script.js - JavaScript functionality
• db.json - Database file with food items

Customization

• To add more food items, edit the db.json file
• Each food item should have:
  • id
  • name
  • emoji
  • stock
  • price

Running the Application

1. Open the index.html file in your browser

   • If using Visual Studio Code, you can use the Live Server extension

2. Interact with the application:

   • Browse available food items
   • Add items to your cart
   • Adjust quantities or remove items
   • Click "Checkout" when ready

Exercise 1: Implementing the Fetch API

Overview: In this exercise, you will transform the application from using local data to fetching data from a JSON server API endpoint.

Current Implementation: The starter code uses a local array for storing food items:

// Initial food data - In memory data source
let foods = [
    {
        "id": 1,
        "name": "Pizza",
        "emoji": "🍕",
        "stock": 10,
        "price": 8.99
    },
    // More food items...
];

Tasks:

1. Examine the structure of the db.json file to understand the data format
2. Start the JSON Server:

npx json-server --watch db.json

3. Implement the fetchFoods() function to:
   • Use the Fetch API to get foods from http://localhost:3000/foods
   • Parse the JSON response
   • Update the foods array with the fetched data
   • Handle potential errors with appropriate user feedback
4. Modify the initializeFoods() function to call your new fetch implementation
5. Test that the food items load correctly from the server

Learning Objectives:

• Understanding asynchronous JavaScript with async/await
• Working with the Fetch API
• Handling API responses and errors
• Updating the UI based on fetched data

Exercise 2: Implementing Stock Updates with PATCH Requests

Overview: When a user checks out their cart, the server should be updated to reflect the new stock levels.

Current Implementation: The checkout function only updates the local foods array:

cart.forEach(item => {
    const currentFood = foods.find(food => food.id === item.id);
    if (currentFood) {
        // Calculate and update new stock locally
        currentFood.stock -= item.quantity;
    }
});

Tasks:

1. Modify the checkout function to use the Fetch API with PATCH requests
2. For each item in the cart:
   • Calculate the new stock level
   • Send a PATCH request to http://localhost:3000/foods/{id}
   • Include the appropriate headers and JSON body
   • Handle success and error responses
3. Wait for all PATCH requests to complete before showing the success message
4. Refresh the food data after successful checkout to show updated stock levels

Learning Objectives:

• Understanding HTTP PATCH method
• Creating and sending HTTP requests with headers and body
• Managing multiple asynchronous operations with Promise.all (optional)
• Handling API responses and errors

Tips for Success

• Test your API endpoints using curl or Postman before implementing them in code
• Check the browser's developer console for error messages
• Make sure json-server is running before testing your implementation
• Remember to refresh the food list after updating stock levels
• Use try/catch blocks to handle potential errors gracefully

Reference API Endpoints

• GET all foods: GET http://localhost:3000/foods
• GET a specific food: GET http://localhost:3000/foods/{id}
• Update a food item: PATCH http://localhost:3000/foods/{id}
  • Body: { "stock": newStockValue }
  • Headers: { "Content-Type": "application/json" }