JavaScriptLeçon 16 sur 16

Projet final : le panier d’une boutique en ligne

Place à l’assemblage. Le panier d’une petite boutique, c’est une classe, des tableaux et leurs méthodes, des erreurs, une closure, du JSON et un paiement asynchrone dans un seul programme.

L’essentiel

Cart garde items et propose add, total et lines
Un produit inconnu lance new Error, que try...catch traite à l’extérieur
La somme vient de reduce, les lignes du ticket de map avec déstructuration
Le code promo vit dans une closure : il marche une fois, la deuxième il n’y a plus de remise
Le paiement est une promesse avec setTimeout, et await attend le résultat

Exemple

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

L’exemple sert d’échauffement : un reduce qui déstructure chaque paire [id, qty], un limiteur bâti sur une closure et la vérification que JSON rend la même somme.

Exercice

Utiliser l’éditeur⌘ Entrée ou Ctrl Entrée lance le code, ⇧ ⌘ Entrée vérifie l’exercice.Tab et Maj Tab indentent la ligne ou la sélection ; Échap puis Tab quitte l’éditeur.La vérification compare ce que le programme a affiché à l’exercice ; les espaces en fin de ligne ne comptent pas.Après deux vérifications ratées, la solution s’ouvre. Votre code reste dans ce navigateur.

Terminez le panier. add(id, qty) cherche le produit dans catalog (s’il manque, throw new Error(`Unknown product: ${id}`)) puis augmente qty ou ajoute { id, ...product, qty } ; total est la somme des price * qty ; lines() renvoie des lignes comme Mug x3 = 36 ; makePromo n’accorde la remise percent qu’une seule fois. Sortie : Unknown product: sofa, Mug x3 = 36, T-shirt x1 = 25, Total: 54.90, Promo again: 61.00, {"items":2,"total":54.9} et 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();

Sortie

Ce que le programme affiche apparaîtra ici.