CODEWITHSUNDEEP
javascripthtmljquerycssbootstrap-4
jenayescript
jenayescript

Reputation: 29

JavaScript shopping cart not functioning correctly

I tried coding a webpage with a functional shopping cart, where you can add items, and see the total money. There's obviously something wrong with my JS, I just don't know what it is since I'm new to JS. You’re supposed to be able to add items to the cart and see the total amount... I’m unable to add items to cart and see the total. The first function seemed to work but after that none of my JavaScript affected my webpage. I’m assuming I typed something in wrong or I’m missing a few brackets.. etc...

Here's a link to the tutorial I followed

https://www.youtube.com/watch?v=0I1TorcXFP0&list=PLnHJACx3NwAey1IiiYmxFbXxieMYqnBKF&index=5

There is a fair amount of code, I'm just going to put my JS here but the complete code can be found on codepen linked below

https://codepen.io/jlcdevdesign/pen/GRqxBzz

Here's the JS

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

       const cartItem = document.getElementById('div')
       cartItem.classList.add('cart-item', 'd-flex', 'justify-content-between', 'text-capitalize', 'my-3');

       cartItem.innerHTML = '

       <img src="${item.img}" class="img-fluid rounded-circle" id="item-img" alt="">
       <div class="item-text">

         <p id="cart-item-title" class="font-weight-bold mb-0">${item.name}</p>
         <span>$</span>
    <span id="cart-item-price" class="cart-item-price" class="mb-0">${item.price}</span>
       </div>
       <a href="#" id='cart-item-remove' class="cart-item-remove">
         <i class="fas fa-trash"></i>
       </a>
     </div>
       
       ';
       const cart = deocument.getElementById('cart');
       const total = deocument.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));
         });
     }
     const totalMoney = total.reduce(function(total,items){
         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;
 }
})();

Upvotes: 2

Views: 473

Answers (2)

user14400984
user14400984

Reputation:

I went to your website and found a lot of errors. And your code is also very weird and looks like you just copy pasted and if you really are a begginer or haven't done much projects than you should definetely not do this instead you should try building some simple things like a Rock Paper Scissor game like the one I built when I was a beginner (simple-rps.vercel.app).

(All the links I have given there are of my old projects you don't have to check them.) And you can press ctrl + u to see the codes then copy the code and paste it into your code editor so that it can get some colours. Then try to read the code and understand how things are working and then try to build your own. And you should not follow that 2 year old tutorial.

Instead you should follow some YouTube channels like Programming with Mosh and Online Tutorials.

Upvotes: 1

DhrubaJSBoruah
DhrubaJSBoruah

Reputation: 26

In line 53 and 54 you misspelled 'document' with 'deocument' and you also forgot to some braces. And your code is also bit messy, make it harder to read, since you are a beginner this mistakes are common.

Just go through your code carefully correct your spelling and properly put the braces in correct places. And it will solve most of your problems!

Upvotes: 1

Related Questions