JavaScript Shopping Cart Tutorial for Beginners

Web Dev Simplified · 1.1M views · 2018 · 43:55

Open on YouTube

Web developmenttutorial

Why Stack Overflow recommends it

Stack Overflow users cite it as the tutorial they followed when building a JavaScript shopping cart, and they reference specific timestamps when their code misbehaves.

Recommended by 1 people across 1 different months, 2019 to 2022.

What it is

A 44-minute beginner tutorial from Web Dev Simplified that adds vanilla JavaScript behavior to a pre-built shopping cart web page. It covers waiting for the document to load, selecting elements by class, attaching event listeners, and wiring these together so items can be added, removed, and totaled.

What people said

Recommends basiclad · 2020-04 · Stack Overflow · on “Alert in forloop does not get recognie when running code (javascript)”

I tried to follow the tutroail on youtube: [this video] Time: 35:10 however the alert does not work,though no error is displayed when running the code. *function addItemToCart(title, price, srcImage) { var cartRow = document.createElement("div"); cartRow.classList.add("cart-row"); var cartItems = document.getElementsByClassName("cart-items")[0]; var cartItemNames = cartItems.getElementsByClassName("cart-item-title"); for (var i = 0; i < cartItemNames.length; i++) { if (cartItemNames[i].innertext == title) { alert("Item is already added to cart"); return; } } var cartItemsContent = ` <div class="cart-item cart-column">* <img class="cart-item-image" src="${srcImage}" width="100" height="100" /> <sp

Cites Behar · 2019-03 · Stack Overflow · on “Shopping Cart with JavaScript”

and you code works now thanks mate, but i still don't get why this code of mine doesn't show in Console Log the price as this YouTube video does from min 12:10 [this video]

Cites IVO GELOV · 2022-04 · Stack Overflow · on “How to make a shopping cart?”

A simple Google search will return hundreds (if not thousands) of tutorials - e.g. [LINK] or [LINK] or [this video] People should first learn how to use Google before trying to learn programming - just like we first learn arithmetic before going to differential equations.

Cites LilRi · 2022-09 · Stack Overflow · on “How can I get javascript 'add to cart' function to work when shopping cart is in separate html page? Unsure how to apply local storage to my code”

(New to JavaScript) With the help of a youtube tutorial ( [this video] ) I created a custom shopping cart for my website. When the items added to the cart are on the same page as the cart/checkout, they are tallied up in the checkout total successfully. However, I want the cart to be on a separate HTML page to the items, so that when the user is finished adding items to the cart they may navigate there to see their total and complete checkout. But when I put the items on a separate HTML page and add them to the cart, the cart no longer updates. I figure the problem is because I have not specified any storage, so when I navigate to the cart the page is refreshed and the stored variables are lost (