• Sunday , 31 May 2020

JavaScript Project Tutorial: Shopping Cart

Code Canyon



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

3d Ocean

Related Posts

32 Comments

  1. Taimur Shah.
    July 15, 2019 at 02:12

    its too much helpful and your method of coding are much understandable

  2. John Ali Batac
    July 15, 2019 at 02:12

    js file is empty

  3. noirsociety
    July 15, 2019 at 02:12

    You are an amazing teacher! Can you please do a backend version of this tutorial?

  4. Flamoondoon
    July 15, 2019 at 02:12

    idk why… but I love your soothing voice.

  5. Geokiller Near
    July 15, 2019 at 02:12

    hi, I have this error: TypeError: fullPath.indexOF is not a function and Im new on javascript, can you help me.

  6. tuburcio palangelay
    July 15, 2019 at 02:12

    how to remove item sir?

  7. Kanishk Magare
    July 15, 2019 at 02:12

    When i click on aad to cart n on the cart nothing happens plzz reply asap

  8. Suresh Asokan
    July 15, 2019 at 02:12

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

  9. Sonia Wilson
    July 15, 2019 at 02:12

    By chance is there a video for the checkout process that takes all the items and displays it on another page with stripe and or paypal implementation?

  10. Blogger King
    July 15, 2019 at 02:12

    can any one suggest me or give me the good resources on woocommerce or shopify E-Commerce Store Development ?? I need it asap

  11. CK 002
    July 15, 2019 at 02:12

    Now, got it why everyone should finish w3schools first.

  12. Fagner Batista
    July 15, 2019 at 02:12

    where the arrow funciton ??

  13. mikej747
    July 15, 2019 at 02:12

    Nothing works. Follow/copy letter by letter and nothing works.

  14. PRATIK SHRESTHA
    July 15, 2019 at 02:12

    thank you

  15. Phillip Shim
    July 15, 2019 at 02:12

    Hey guys, I added rest of the features except checkout, if anyone is interested
    You can check it out at https://shimphillip.github.io/grandmas/
    source code at https://github.com/shimphillip/grandmas

  16. Hunter x Hunter
    July 15, 2019 at 02:12

    if want to learn javaScript check this up https://stude.co/504453/javascript-course

  17. Raita Sorin
    July 15, 2019 at 02:12

    Why you didn't do a tutorial from the beginning on exactly how to design that site from 0 ????

  18. MTLScorp
    July 15, 2019 at 02:12

    Thank you very usefull project !

  19. bjaeken
    July 15, 2019 at 02:12

    Please fix your voice…

  20. Ashish Arora
    July 15, 2019 at 02:12

    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

  21. Chechnical Chagar
    July 15, 2019 at 02:12

    Thanks Sir ! #SarvagyaSagar

  22. Anil S
    July 15, 2019 at 02:12

    good practice video, thanks

  23. Chintu Yadav Sara
    July 15, 2019 at 02:12

    Is it a good practice to add event listener to each and every item? I don't think it is.
    Rather add event to single item and bind the event to the target

  24. Thom Twd
    July 15, 2019 at 02:12

    very well 🙂 , thanks

  25. ALWAYS UNDERCOVER
    July 15, 2019 at 02:12

    ******************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

  26. Eduard Fedoruk
    July 15, 2019 at 02:12

    I don't think it's a good idea to relay on a folder name – "img" to get the image name on 19:40 . If someon in the future change name of the folder to "image" for example, then code will be broken.

  27. LevensLes
    July 15, 2019 at 02:12

    Would've been nice to see some sort of check out integrations with let's say PayPal for example

  28. GoCode Media
    July 15, 2019 at 02:12

    Cool project with real life functionality. thanks

  29. KGebriel Aknaw
    July 15, 2019 at 02:12

    it is so nice. and if you have a video that implements for bank system using android studio and SQLite i'm so happy. Thank you!

  30. Programming Training
    July 15, 2019 at 02:12

    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.

  31. Vincent
    July 15, 2019 at 02:12

    Nice!

Leave A Comment

You must be logged in to post a comment.