How to make a javaScript basket

Learn how to create a JavaScript basket with a step-by-step example. Create a functional and stylish shopping cart for your website.

JavaScript Shopping Basket

A shopping basket is a great way to store items that customers want to buy while they are browsing an online store. A JavaScript shopping basket is a collection of items that can be stored in the browser and allows customers to add, remove and view items in the basket. In this tutorial, I will show you how to build a simple JavaScript shopping basket.

Creating a Shopping Basket

To create the shopping basket, we need to first create a JavaScript object. We will use this object to store the items in the basket. The object will have two properties: an array of items and a total cost. The array will store the items in the basket and the total cost will keep track of the total cost of all items in the basket.


// Create the shopping basket object
let basket = {
  items: [], // array to store items
  totalCost: 0 // total cost of items in basket
};

Adding Items to the Basket

Now that we have the shopping basket object, we can add items to it. To do that, we will create a function to add items to the basket. The function will take two arguments: the item and the price. It will then add the item to the items array and update the total cost.


// Function to add items to the basket
function addItemToBasket(item, price) {
  basket.items.push(item); // add item to items array
  basket.totalCost += price; // update total cost
}

Now we can call the addItemToBasket() function to add items to the basket. For example, to add an item called "T-Shirt" with a price of 20, we can call the function like this:


addItemToBasket('T-Shirt', 20);

Removing Items from the Basket

Now that we can add items to the basket, we also need to be able to remove items. To do that, we will create a function to remove items from the basket. The function will take one argument: the item to remove. It will then search the items array for the item and remove it from the array. It will also update the total cost.


// Function to remove items from the basket
function removeItemFromBasket(item) {
  // Get the index of the item
  let itemIndex = basket.items.indexOf(item);

  // Remove the item from the items array
  basket.items.splice(itemIndex, 1);

  // Update the total cost
  basket.totalCost -= price;
}

Now we can call the removeItemFromBasket() function to remove items from the basket. For example, to remove an item called "T-Shirt", we can call the function like this:


removeItemFromBasket('T-Shirt');

Viewing the Basket

Finally, we can create a function to view the items in the basket. The function will loop through the items array and print out each item and the total cost. It will also display the total cost of all items in the basket.


// Function to view the basket
function viewBasket() {
  // Loop through the items array
  for (let i = 0; i < basket.items.length; i++) {
    let item = basket.items[i];
    let price = basket.items[i].price;

    // Print out the item and its price
    console.log(item + ' - $' + price);
  }

  // Print out the total cost
  console.log('Total Cost: $' + basket.totalCost);
}

Now we can call the viewBasket() function to view the items in the basket. For example, we can call the function like this:


viewBasket();

And that's it! We have now created a simple JavaScript shopping basket that allows customers to add, remove and view items in the basket. We can now use this shopping basket in our online store to allow customers to add items to their basket and check out when they are ready.

javascript