JavaScriptLesson 16 of 16

Final project: an online store cart

Time to put it all together. The cart of a small store is a class, arrays and their methods, errors, a closure, JSON and an async payment in one program.

Key points

Cart keeps items and offers add, total and lines
An unknown product throws new Error, and try...catch handles it outside
The sum comes from reduce, the receipt lines from map with destructuring
The promo code lives in a closure: it works once, the second time there is no discount
Payment is a promise with setTimeout, and await waits for the result

Example

// The pieces of the project in one placeconst prices = { mug: 12, cap: 18 };const order = [["mug", 2], ["cap", 1]]; const sum = order.reduce((total, [id, qty]) => total + prices[id] * qty, 0);console.log(`Sum: ${sum}`); function makeLimiter(max) {  let used = 0;  return () => (used < max ? `ok ${++used}` : "limit reached");}const tryCode = makeLimiter(1);console.log(tryCode(), tryCode()); const saved = JSON.stringify({ sum });console.log(saved, JSON.parse(saved).sum === sum);

The example is a warm-up: reduce that destructures each [id, qty] pair, a limiter built on a closure and a check that JSON gives back the same sum.

Task

How to use the editor⌘ Enter or Ctrl Enter runs the code, ⇧ ⌘ Enter checks the task.Tab and Shift Tab indent the line or the selection; Esc, then Tab leaves the editor.The check compares what the program printed with the task; spaces at line ends do not matter.After two failed checks you may open the solution. Your code is kept in this browser.

Finish the cart. add(id, qty) looks the product up in catalog (if it is missing, throw new Error(`Unknown product: ${id}`)) and either raises qty or pushes { id, ...product, qty }; total is the sum of price * qty; lines() returns lines like Mug x3 = 36; makePromo gives a percent discount only once. Output: Unknown product: sofa, Mug x3 = 36, T-shirt x1 = 25, Total: 54.90, Promo again: 61.00, {"items":2,"total":54.9} and Paid 54.90.

// Final project: the shopping cart of a small online storeconst catalog = {  mug: { name: "Mug", price: 12 },  tee: { name: "T-shirt", price: 25 },  cap: { name: "Cap", price: 18 },}; class Cart {  items = [];   add(id, qty = 1) {    // TODO: find the product in catalog; if there is none,    // throw new Error(`Unknown product: ${id}`)    // TODO: if the product is already in items, increase its qty,    // otherwise push { id, ...product, qty }  }   get total() {    // TODO: the sum of price * qty for every item (reduce)    return 0;  }   lines() {    // TODO: one string per item, like "Mug x3 = 36" (map)    return [];  }} // TODO: a promo code that works only once (closure)function makePromo(code, percent) {  return (input, amount) => amount;} // A pretend payment service: answers a moment laterconst pay = (amount) =>  new Promise((resolve) => setTimeout(() => resolve(`Paid ${amount}`), 0)); async function main() {  const cart = new Cart();  cart.add("mug", 2);  cart.add("tee");  cart.add("mug");  try {    cart.add("sofa");  } catch (error) {    console.log(error.message);  }   for (const line of cart.lines()) console.log(line);   const applyPromo = makePromo("HELLO10", 10);  const total = applyPromo("HELLO10", cart.total);  console.log(`Total: ${total.toFixed(2)}`);  console.log(`Promo again: ${applyPromo("HELLO10", cart.total).toFixed(2)}`);   console.log(JSON.stringify({ items: cart.items.length, total }));  console.log(await pay(total.toFixed(2)));} main();

// Final project: the shopping cart of a small online store
const catalog = {
  mug: { name: "Mug", price: 12 },
  tee: { name: "T-shirt", price: 25 },
  cap: { name: "Cap", price: 18 },
};

class Cart {
  items = [];

  add(id, qty = 1) {
    // TODO: find the product in catalog; if there is none,
    // throw new Error(`Unknown product: ${id}`)
    // TODO: if the product is already in items, increase its qty,
    // otherwise push { id, ...product, qty }
  }

  get total() {
    // TODO: the sum of price * qty for every item (reduce)
    return 0;
  }

  lines() {
    // TODO: one string per item, like "Mug x3 = 36" (map)
    return [];
  }
}

// TODO: a promo code that works only once (closure)
function makePromo(code, percent) {
  return (input, amount) => amount;
}

// A pretend payment service: answers a moment later
const pay = (amount) =>
  new Promise((resolve) => setTimeout(() => resolve(`Paid ${amount}`), 0));

async function main() {
  const cart = new Cart();
  cart.add("mug", 2);
  cart.add("tee");
  cart.add("mug");
  try {
    cart.add("sofa");
  } catch (error) {
    console.log(error.message);
  }

  for (const line of cart.lines()) console.log(line);

  const applyPromo = makePromo("HELLO10", 10);
  const total = applyPromo("HELLO10", cart.total);
  console.log(`Total: ${total.toFixed(2)}`);
  console.log(`Promo again: ${applyPromo("HELLO10", cart.total).toFixed(2)}`);

  console.log(JSON.stringify({ items: cart.items.length, total }));
  console.log(await pay(total.toFixed(2)));
}

main();

Output

What your program prints appears here.