Trying to implement a functional shopping cart on a webpage has been a challenge for me. I've encountered issues in my JavaScript code that are preventing the cart from working as intended. As a newbie to JavaScript, I'm struggling to pinpoint the exact source of the problem.
The goal was to allow users to add items to the cart and view the total amount, but I'm facing difficulties in getting this functionality to work. While the initial function seemed to be working, subsequent JavaScript additions failed to impact the webpage. I suspect that I may have made a typo or missed some brackets while coding.
For reference, here's the tutorial that I followed:
https://www.youtube.com/watch?v=0I1TorcXFP0&list=PLnHJACx3NwAey1IiiYmxFbXxieMYqnBKF&index=5
The complete code can be found on CodePen at the following link:
https://codepen.io/jlcdevdesign/pen/GRqxBzz
Below is my JavaScript code snippet:
(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;
}
})();