JavaScriptУрок 16 из 16

Итоговый проект: корзина интернет-магазина

Пора собрать всё вместе. Корзина небольшого магазина — это класс, массивы, их методы, ошибки, замыкание, JSON и асинхронная оплата в одной программе.

Главное

Cart хранит items и умеет add, total и lines
Неизвестный товар — throw new Error, а снаружи его ловит try...catch
Сумма считается через reduce, строки чека — через map с деструктуризацией
Промокод живёт в замыкании: срабатывает один раз, второй раз скидки нет
Оплата — промис с setTimeout, результат ждём через await

Пример

// 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);

Пример — разминка перед проектом: reduce с деструктуризацией пары [id, qty], ограничитель на замыкании и проверка, что JSON вернул ту же сумму.

Задание

Как пользоваться редактором⌘ Enter или Ctrl Enter — запустить код, ⇧ ⌘ Enter — проверить задание.Tab и Shift Tab сдвигают строку или выделение; Esc, затем Tab — выйти из редактора.Проверка сравнивает то, что напечатала программа, с заданием; пробелы в конце строк не важны.После двух неудачных проверок можно открыть решение. Ваш код сохраняется в этом браузере.

Допишите корзину. add(id, qty) ищет товар в catalog (нет товара — throw new Error(`Unknown product: ${id}`)) и либо увеличивает qty, либо добавляет { id, ...product, qty }; total — сумма price * qty; lines() возвращает строки вида Mug x3 = 36; makePromo даёт скидку percent процентов только один раз. Вывод: Unknown product: sofa, Mug x3 = 36, T-shirt x1 = 25, Total: 54.90, Promo again: 61.00, {"items":2,"total":54.9} и 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();

Вывод

Здесь появится то, что напечатает программа.