JavaScript
Project final - Shopping cart
Finalize the cart app showing the added products and the total amount.
What we've built so far
Across the previous four lessons we built:
- An empty
cart array. - The
productNames and productPrices arrays. - Two products pushed into the cart.
- A
for loop that lists the products. - A
total accumulator that sums the prices.
The final step is to combine these into one clean flow: print a cart header, list and accumulate inside the same loop, then print the total.
List and sum in one loop
In the final step we'll use a single loop instead of two. For each product, the loop will both print info with console.log and add the price with total += productPrices[cart[i]].
This keeps the code shorter and clearer. We print a header before the loop and the total after it.
Exercise Finalize the cart app
Combine the code into one clean flow. Print a cart header with console.log, then inside a single for loop both list each product with console.log(productNames[cart[i]], productPrices[cart[i]]) and add the price with total += productPrices[cart[i]]. After the loop, print the total.
Show example solution
// Shopping cart app
// Product names and prices
const productNames = ["Pen", "Notebook", "Eraser"];
const productPrices = [15, 30, 10];
// Cart
const cart = [];
cart.push(0);
cart.push(2);
// List the cart and compute the total
let total = 0;
console.log("Cart:");
for (let i = 0; i < cart.length; i++) {
console.log(productNames[cart[i]], productPrices[cart[i]]);
total += productPrices[cart[i]];
}
console.log("Total:", total);
Project complete!
Congratulations! At the end of five lessons you have a working shopping cart app:
- It defines products with two parallel arrays.
- It adds products to the cart with
push. - It lists and sums in a single
for loop. - It shows the cart contents and the total amount.
In the next sections you'll learn how to power this up with objects and functions.
Test yourself
-
Which structure represents one product in the cart app?
- Items at the same index in productNames and productPrices
- The first element of the cart array
- A single line of console.log output
- The let total variable
Show answer
Items at the same index in productNames and productPrices — Correct! A product's name and price live at the same index in two parallel arrays.
-
Print the cart header
const cart = [0, 2];
let total = 25;
____
console.log("Cart:", cart.length, "items");
Show answer
const cart = [0, 2];
let total = 25;
console.log("Total:", total);
console.log("Cart:", cart.length, "items");
-
Match the project steps
- const cart = []
- Declares the empty cart
- cart.push(0)
- Adds the first product to the cart
- for (let i = 0; ...)
- Iterates over the cart
- total += productPrices[cart[i]]
- Adds the price to the total
Next lesson: Looping with forEach
