D4mations.com

JavaScript Project Tutorial: Shopping Cart



Create a shopping cart using JavaScript. This project tutorial shows how to add all the basic functionality of a shopping cart into a website.

💻Source files: https://github.com/john-smilga/js-cart-setup

Tutorial from Coding Addict. Check out the Coding Addict YouTube channel: https://www.youtube.com/codingaddict

—

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://medium.freecodecamp.org

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

Original source

d4mer

, , , , , ,

32 responses to “JavaScript Project Tutorial: Shopping Cart”

  9. I'm not get output, pls help me

    (function(){ const cartInfo=document.getElementById("cart-Info"); const cart=document.getElementById("cart"); cartInfo.addEventListener("click",function(){ cart.classList.toggle("show-cart"); }); })(); (function(){ const cartBtn=document.querySelectorAll(".store-item-icon"); cartBtn.forEach(function(btn){ btn.addEventListener("click",function(event){ //console.log(event.target); if(event.target.parentElement.classList.contains(".store-item-icon")){ let fullPath=event.target.parentElement.previousElementSibling.src; let pos=fullPath.indexOf("img") +3; let partPath=fullPath.slice(pos); const item={}; item.img='img-cart${partPath}'; let name=event.target.parentElement.parentElement.nextElementSibling.children[0].children[0].textContent; item.name=name; let price=event.target.parentElement.parentElement.nextElementSibling.children[0].children[1].textContent; let finalPrice=price.slice(1).trim(); item.price=finalPrice; //console.log(finalPrice); //console.log(name); //console.log(item); const cartItem=document.createElement("div"); cartItem.classList.add( "cart-item", "d-flex", "justify-content-between", "text-capitalize", "my-3"); cartItem.innerHTML='
    ${item.name}

    $ ${item.price}
    ' ; const cart=document.getElementById("cart"); const total=document.querySelector(".cart-total-container"); cart.insertBefore(cartItem, total); alert("Item added to the cart"); showTotals(); } }); }); function showTotals(){ const total=[]; const items=document.querySelectorAll(".cart-item-price"); items.forEach(function(item){ total.push(parseFloat(item.textContent)); }); //console.log(total); const totalMoney=total.reduce(function(total,item){ total+=item; return total; },0); const finalMoney=totalMoney.toFixed(2); document.getElementById("cart-total").textContent=finalMoney; document.querySelector(".item-total").textContent=finalMoney; document.getElementById("item-count").textContent=total.length; //console.log(totalMoney); } })();

  21. You Are Awesome , Great And Talented Teacher . i really watched Ur all video . i learnt lots of lots of new things . i have learnt javaScript . i am learning React Because of you .You do Explain Very hard code very easily and properly . thanks you so much bro . i always love to watch ur tutorial . i have happily subscribed Ur channel . You are doing fantastic job . god bless u.

    You are not just a Sir to me, you are also an inspiration Very few people have the power to educate everything beyond his knowledge . You do it pretty well.Thanks a lot dear Sir for continuously inspiring me to do my best. Thanks Sir for making my world so perfect. I am so lucky to have a Sir as wonderful as you are. We will always be thankful to you for all the hard work and efforts you have put in, for educating us

  26. ******************URGENT DOUBT*****************************

    DOES BLCKCHAIN ONLY TRANSFERS MONEY OR IT STORES MONEY(BITCOIN)

    IF IT STORES DOES THE AMOUNT INCREASES ,(EX-WE KEEP MONEY IN BANK IT INCREASE IN INTREST AMOUNT) BUT THE CRYPTOCURENCY FLUCTES

  31. WOW I love this channel. It is very inspiring to me that i started my own channel on Programming Training for new coders in My Country in Local Language (Amharic) and also trying on English as well. Please check out my channel as well and your feedback and support would be great.

Leave a Reply