Improving Restaurant Billing System

Business Scenario

Hello talented developers!

In the previous lab, we introduced JavaScript into our BiteBox website by implementing our first customer interactions. We connected an external JavaScript file, collected the customer's name using prompt(), asked for their choice using confirm(), and displayed personalized messages.

In this lab, we will improve the BiteBox restaurant billing system by using JavaScript to calculate item totals, subtotal, discounts, delivery and packaging charges, and the final bill dynamically.

Pre-Lab Preparation

Module:

1) Unlocking JavaScript's Secrets: Mastering Core Concepts

2) Delving into JavaScript Object Dynamics

3) Journey into DOM and Event Dynamics

git pull origin branchName

Git Pull

Task 1: Build Dynamic Restaurant Billing System

Prepare the Order Summary for Dynamic Billing

1

We already have the Order Summary in cart.html.

Instead of keeping static billing values such as ₹826.00 or ₹886.00, we will initialize everything to ₹0.00.

<aside id="order-summary">
    <h2>Order Summary</h2>
    <p> <span>Subtotal (3 Items)</span>
        <span id="subtotal-amount">₹0.00</span>
    </p>

    <p> <span>Delivery Charges</span>
        <span id="delivery-amount">₹0.00</span>
    </p>
<p> <span>Packaging Charges</span>
        <span id="packaging-amount">₹0.00</span>
    </p>

    <p id="discount-row">
      <span>Discount</span>
        <span id="discount-amount">₹0.00</span>
    </p>

    <hr>
    <h3><span>Total Amount</span>
        <span id="total-amount">₹0.00</span>
    </h3>

    <button type="button"> Proceed to Checkout </button>

    <p> <img src="assets/icons/shield.png" width="18" height="18">
        Secure Checkout
    </p>

</aside>

Create the Item Total Calculation Function

2

Before calculating the complete bill, we need to calculate the total for each food item.

So we will create a reusable function that calculates the total price of one food item using its price and quantity.

function calculateItemTotal(price, quantity) {
    return price * quantity;
}

Read Cart Items from the UI

3

Our cart already contains food items - We should not hardcode these prices and quantities

inside JavaScript.

Instead:

JavaScript should read the existing price and quantity directly from the Cart UI.

let cartRows = document.querySelectorAll(
    "#shopping-cart tbody tr"
);

Calculate the Cart Subtotal

4

function calculateSubtotal() {
    let subtotal = 0;
    let cartRows = document.querySelectorAll("#shopping-cart tbody tr" );

    cartRows.forEach(function(row) {
        let priceText =  row.children[1].textContent;

Read the price and quantity of each existing cart item, calculate its item total, and add all item totals to calculate the subtotal.

let price = parseFloat(priceText.replace("₹", "")  );
        let quantityText = row.querySelector( ".quantity-box span" ).textContent;
        let quantity = parseInt(quantityText);
        let itemTotal = calculateItemTotal(price,quantity);
        subtotal += itemTotal;
    });
    return subtotal;
}

Calculate Delivery Charges

5

Create a function that calculates the delivery charge based on whether the cart contains an order.

function calculateDeliveryCharge(subtotal) {
    if (subtotal === 0) {
       return 0;
    }
    return 40;
}

Calculate Packaging Charges

6

Create a function that calculates the packaging charge when an order is present.

function calculatePackagingCharge(subtotal) {
    if (subtotal === 0) {
        return 0;
    }
  
    return 20;
}

Calculate Discount

7

Check whether the subtotal qualifies for a discount and calculate the applicable discount amount.

function calculateDiscount(subtotal) {
    if (subtotal > 500) {
        return subtotal * 0.10;
    }
    return 0;
}

Calculate final amount

8

function calculateTotal(subtotal,deliveryCharge,packagingCharge,discount) {
    return subtotal + deliveryCharge + packagingCharge - discount;
}

Calculate the final payable amount by adding the applicable charges and subtracting the discount.

Update the Order Summary

9

Calculate the complete bill and update each billing value in the existing Order Summary using DOM manipulation.

function updateOrderSummary() {

    let subtotal = calculateSubtotal();

    let deliveryCharge = calculateDeliveryCharge(subtotal);

    let packagingCharge = calculatePackagingCharge(subtotal);

    let discount = calculateDiscount(subtotal);

    let totalAmount = calculateTotal(subtotal, deliveryCharge, packagingCharge, discount);


    document.getElementById("subtotal-amount").textContent = "₹" + subtotal.toFixed(2);

    document.getElementById("delivery-amount").textContent = "₹" + deliveryCharge.toFixed(2);
  document.getElementById("packaging-amount").textContent = "₹" + packagingCharge.toFixed(2);

    document.getElementById("discount-amount").textContent = "-₹" + discount.toFixed(2);

    document.getElementById( "total-amount").textContent = "₹" + totalAmount.toFixed(2);

}

Start the billing system

10

At the end of script.js :

updateOrderSummary();

This tells JavaScript:​ Run the complete billing process now.

We are done with this lab. The latest source code has been uploaded to GitHub. You can access the latest commit using the link below: 

Github_repository_link

 

Great job!

You have successfully transformed the static BiteBox Order Summary into a dynamic restaurant billing system using JavaScript.

Checkpoint

   Git Push

git push origin branchName

Next-Lab Preparation

Module:

1) Unlocking JavaScript's Secrets: Mastering Core Concepts

2) Delving into JavaScript Object Dynamics

3) Journey into DOM and Event Dynamics