La meilleure façon d'apprendre un nouveau langage de programmation est de créer autant de projets que possible. Vous vivrez une expérience plus fluide en tant que débutant si vous créez des mini-projets axés sur ce que vous avez appris.
L'objectif est d'éviter « l'enfer des tutoriels » – cet endroit effrayant où vous continuez à regarder plusieurs vidéos de tutoriels sans avoir de projet concret pour montrer vos compétences – et également de développer la confiance nécessaire pour aborder des projets à plus grande échelle.
Dans cet article, je vais vous expliquer comment créer un système de panier d'achat en tant que débutant, en utilisant les concepts de base de Javascript.

Conditions préalables

Pour tenter ce projet, vous devez avoir une connaissance approfondie de :

• Fonctions
• Méthodes
• Tableaux

Que construire ?

Le panier d'achat disposera d'un système permettant aux utilisateurs de :

• Ajouter des articles au panier
• Supprimer les articles du panier
• Afficher le contenu du panier
• Calculer le prix total des articles dans le panier

Étape 1 : configuration des données

Pour commencer, nous devons créer quelques tableaux qui contiendront les données de nos éléments. Les tableaux nécessaires spécifiquement sont :

• itemNames : spécifie le nom de chaque élément.
• itemPrices : contient le prix de chaque article.
• itemQuantities : indique la quantité d'un article spécifique disponible.
• itemInStock : Détermine si un article est en stock grâce à l'utilisation de true ou false.

const itemNames = ["Laptop", "Phone"];
const itemPrices = [1000, 500];
const itemQuantities = [1, 2];
const itemInStock = [true, true];

Étape 2 : Créer le panier avec des fonctions

Nous allons créer une fonction principale de panier d'achat qui contiendra la logique du panier. Nous utiliserons des fermetures pour garantir que le panier reste privé et que seules certaines fonctions puissent interagir avec lui.

const ShoppingCart = () => {
  const cart = []; // The cart is a private array

  // Add an item to the cart
  const addItemToCart = (itemIndex) => {
    if (itemInStock[itemIndex]) {
      cart.push(itemIndex);
      console.log(`${itemNames[itemIndex]} added to the cart`);
    } else {
      console.log(`${itemNames[itemIndex]} is out of stock`);
    }
  };

  // Remove an item from the cart
  const removeItemFromCart = (itemIndex) => {
    const index = cart.indexOf(itemIndex);
    if (index > -1) {
      cart.splice(index, 1);
    }
  };

  // Get the names of items in the cart
  const getCartItems = () => {
    return cart.map(itemIndex => itemNames[itemIndex]);
  };

  // Calculate the total price of items in the cart
  const calculateTotal = () => {
    return cart.reduce((total, itemIndex) => {
      return total   itemPrices[itemIndex] * itemQuantities[itemIndex];
    }, 0);
  };

  return {
    addItemToCart,
    removeItemFromCart,
    getCartItems,
    calculateTotal
  };
};

Pour décomposer le code :

• addItemToCart(itemIndex) : ajoute un article au panier en fonction de son index (uniquement s'il est en stock).
• RemoveItemFromCart(itemIndex) : supprime un article du panier en utilisant son index.
• getCartItems() : renvoie le nom des articles dans le panier en utilisant map() pour convertir les index en noms.
• calculateTotal() : calcule le prix total en multipliant les prix et les quantités des articles dans le panier à l'aide de la méthode réduire().

Étape 3 : tester le panier

Un projet terminé doit être testé pour s'assurer qu'il fonctionne comme nécessaire. Nous allons tester :

• ajout d'éléments

• consultation du panier

• vérification du prix total

const myCart = ShoppingCart();

// Add a Laptop (item 0)
myCart.addItemToCart(0);

// Add a Phone (item 1)
myCart.addItemToCart(1);

// View cart contents
console.log(myCart.getCartItems()); // Output: ['Laptop', 'Phone']

// Calculate the total price
console.log(myCart.calculateTotal()); // Output: 2000

Pour décomposer le code :

• Nous créons une instance du panier en l'appelant : const monCart = shoppingCart();.
• Nous ajoutons des articles au panier en utilisant leur index du tableau itemNames : monCart.addItemToCart(0); pour l'ordinateur portable et myCart.addItemTocart(1); pour le téléphone.
• Nous utilisons getCartItems() pour imprimer les noms des articles dans le panier
• Enfin, nous calculons le prix total à l'aide de calculateTotal().

Étape 4 : Supprimer des articles du panier

Un bon système de panier d'achat doit permettre à l'utilisateur de supprimer des articles du panier. Nous pouvons le faire en appelant RemoveItemFromCart().

myCart.removeItemFromCart(1); // Remove the Phone

// View the updated cart
console.log(myCart.getCartItems()); // Output: ['Laptop']

// Recalculate the total price
console.log(myCart.calculateTotal()); // Output: 1000

Bonus : Comprendre les fermetures dans le système de panier d'achat

Les fermetures aident le tableau de paniers à rester privé, accessible uniquement via les fonctions renvoyées par la fonction ShoppingCart().

• Le tableau de paniers est défini à l'intérieur du panier d'achat() et n'est pas accessible directement de l'extérieur. Cependant, étant donné que les fonctions addItemTocart(), removeItemFromCart(), getCartItems() et calculateTotal() sont définies dans la même portée, elles peuvent interagir avec cart.
• Les fermetures sont une fonctionnalité puissante de JavaScript qui aide à maintenir la confidentialité et la structure des données dans votre code.

Conclusion

En utilisant des tableaux et des fonctions de base, vous avez créé un système de panier d'achat entièrement fonctionnel qui peut ajouter, supprimer et calculer les totaux des articles. La partie géniale de ce projet est qu'il utilise des fermetures pour encapsuler et gérer l'état sans nécessiter d'objets ou de classes complexes.

Code final

const itemNames = ["Laptop", "Phone"];
const itemPrices = [1000, 500];
const itemQuantities = [1, 2];
const itemInStock = [true, true];

const ShoppingCart = () => {
  const cart = [];

  const addItemToCart = (itemIndex) => {
    if (itemInStock[itemIndex]) {
      cart.push(itemIndex);
      console.log(`${itemNames[itemIndex]} added to the cart`);
    } else {
      console.log(`${itemNames[itemIndex]} is out of stock`);
    }
  };

  const removeItemFromCart = (itemIndex) => {
    const index = cart.indexOf(itemIndex);
    if (index > -1) {
      cart.splice(index, 1);
    }
  };

  const getCartItems = () => {
    return cart.map(itemIndex => itemNames[itemIndex]);
  };

  const calculateTotal = () => {
    return cart.reduce((total, itemIndex) => {
      return total   itemPrices[itemIndex] * itemQuantities[itemIndex];
    }, 0);
  };

  return {
    addItemToCart,
    removeItemFromCart,
    getCartItems,
    calculateTotal
  };
};

const myCart = ShoppingCart();
myCart.addItemToCart(0);
myCart.addItemToCart(1);
console.log(myCart.getCartItems());
console.log(myCart.calculateTotal());
myCart.removeItemFromCart(1);
console.log(myCart.getCartItems());
console.log(myCart.calculateTotal());

J'espère que vous avez apprécié apprendre et je suis ravi que vous puissiez construire d'autres projets géniaux !