एक नई प्रोग्रामिंग भाषा सीखने का सबसे अच्छा तरीका जितना संभव हो उतने प्रोजेक्ट बनाना है। यदि आप मिनी-प्रोजेक्ट बनाते हैं जो कि आपने जो सीखा है उस पर ध्यान केंद्रित करते हैं तो एक शुरुआत के रूप में आपको एक सहज अनुभव होगा।
लक्ष्य "ट्यूटोरियल नरक" से बचना है - वह डरावनी जगह जहां आप अपने कौशल दिखाने के लिए बिना किसी ठोस परियोजना के कई ट्यूटोरियल वीडियो देखते रहते हैं - और बड़े पैमाने की परियोजनाओं से निपटने के लिए आवश्यक आत्मविश्वास भी पैदा करते हैं।
इस लेख में, मैं बताऊंगा कि आप बुनियादी जावास्क्रिप्ट अवधारणाओं का उपयोग करके एक शुरुआत के रूप में शॉपिंग कार्ट सिस्टम कैसे बना सकते हैं।

आवश्यक शर्तें

इस परियोजना का प्रयास करने के लिए, आपको इसका गहन ज्ञान होना आवश्यक है:

• कार्य
• तरीके
• सरणी

क्या बनाना है?

शॉपिंग कार्ट में एक सिस्टम होगा जहां उपयोगकर्ता:

• गाड़ी के लिए आइटम जोड़ें
• कार्ट से आइटम निकालें
• कार्ट सामग्री देखें
• कार्ट में वस्तुओं की कुल कीमत की गणना करें

चरण 1: डेटा सेट करना

शुरू करने के लिए, हमें कुछ सारणी बनाने की आवश्यकता है जो हमारे आइटम के लिए डेटा रखेगी। विशेष रूप से आवश्यक सरणियाँ हैं:

• आइटमनाम: प्रत्येक आइटम का नाम निर्दिष्ट करता है।
• आइटमकीमतें: इसमें प्रत्येक आइटम की लागत शामिल होती है।
• आइटम मात्राएँ: बताती है कि कोई विशिष्ट वस्तु कितनी उपलब्ध है।
• आइटमइनस्टॉक: सही या गलत के उपयोग के माध्यम से निर्धारित करता है कि कोई आइटम स्टॉक में है या नहीं।

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

चरण 2: कार्यों के साथ शॉपिंग कार्ट का निर्माण

हम एक मुख्य शॉपिंग कार्ट फ़ंक्शन बनाने जा रहे हैं जिसमें कार्ट के लिए तर्क शामिल होंगे। हम यह सुनिश्चित करने के लिए क्लोजर का उपयोग करेंगे कि कार्ट निजी रहे और केवल कुछ फ़ंक्शन ही इसके साथ इंटरैक्ट कर सकें।

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
  };
};

कोड को तोड़ने के लिए:

• addItemToCart(itemIndex): किसी आइटम को उसके इंडेक्स के आधार पर कार्ट में जोड़ता है (केवल अगर वह स्टॉक में है)।
• रिमूवआइटमफ्रॉमकार्ट(आइटमइंडेक्स): किसी आइटम को उसके इंडेक्स का उपयोग करके कार्ट से हटाता है।
• getCartItems(): सूचकांकों को नामों में बदलने के लिए मानचित्र() का उपयोग करके कार्ट में आइटम का नाम लौटाता है।
• कैलकुलेटटोटल(): कम() विधि का उपयोग करके कार्ट में वस्तुओं की कीमतों और मात्रा को गुणा करके कुल कीमत की गणना करता है।

चरण 3: शॉपिंग कार्ट का परीक्षण

एक तैयार प्रोजेक्ट का परीक्षण यह सुनिश्चित करने के लिए किया जाना चाहिए कि यह आवश्यकतानुसार काम करता है। हम इसके लिए परीक्षण करने जा रहे हैं:

• आइटम जोड़ना

• कार्ट देखना

• कुल कीमत की जांच कर रहा है

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

कोड को तोड़ने के लिए:

• हम शॉपिंग कार्ट को कॉल करके उसका एक उदाहरण बनाते हैं: const myCart = shoppingCart();.
• हम आइटमनाम सरणी से उनके सूचकांक का उपयोग करके कार्ट में आइटम जोड़ते हैं: myCart.addItemToCart(0); लैपटॉप और myCart.addItemTocart(1) के लिए; फ़ोन के लिए.
• हम कार्ट में आइटम के नाम प्रिंट करने के लिए getCartItems() का उपयोग करते हैं
• अंत में, हम कैलकुलेटटोटल() का उपयोग करके कुल कीमत की गणना करते हैं।

चरण 4: कार्ट से आइटम हटाना

एक अच्छे शॉपिंग कार्ट सिस्टम को उपयोगकर्ता को कार्ट से आइटम निकालने की अनुमति देनी चाहिए। हम इसे deleteItemFromCart() पर कॉल करके कर सकते हैं।

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

बोनस: शॉपिंग कार्ट सिस्टम में क्लोजर को समझना

क्लोजर कार्ट ऐरे को निजी रहने में मदद करता है, केवल शॉपिंगकार्ट() फ़ंक्शन द्वारा लौटाए गए फ़ंक्शन के माध्यम से पहुंच योग्य होता है।

• कार्ट ऐरे को शॉपिंग कार्ट() के अंदर परिभाषित किया गया है और इसे सीधे बाहर से एक्सेस नहीं किया जा सकता है। हालाँकि, क्योंकि addItemTocart(), रिमूवआइटमफ्रॉमकार्ट(), getCartItems() और कैलकुलेटटोटल() फ़ंक्शन एक ही दायरे में परिभाषित हैं, वे कार्ट के साथ इंटरैक्ट कर सकते हैं।
• क्लोजर जावास्क्रिप्ट की एक शक्तिशाली सुविधा है जो आपके कोड में डेटा गोपनीयता और संरचना को बनाए रखने में मदद करती है।

निष्कर्ष

बुनियादी सरणियों और कार्यों का उपयोग करके, आपने एक पूरी तरह कार्यात्मक शॉपिंग कार्ट प्रणाली बनाई है जो वस्तुओं को जोड़, हटा और कुल की गणना कर सकती है। इस प्रोजेक्ट का अद्भुत हिस्सा यह है कि यह जटिल वस्तुओं या कक्षाओं की आवश्यकता के बिना राज्य को एनकैप्सुलेट और प्रबंधित करने के लिए क्लोजर का उपयोग करता है।

अंतिम कोड

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

मुझे आशा है कि आपको सीखने में आनंद आया होगा, और मैं आपके लिए और अधिक शानदार प्रोजेक्ट बनाने के लिए उत्साहित हूं!