I've been working on a shopping cart project using Vanilla JS. The interface handles DOM logic, while the backend deals with array manipulation.
The issue I'm facing is with a button that's supposed to remove items from the cart. Despite passing my tests, the code doesn't work as expected.
I attempted to link each cart item to a unique id, incrementing as more items are added. I then tried to access each item individually using addEventListener('click'), call the removeItem() method, and render the cart outside the loop. Unfortunately, it didn't work, and I'm stuck.
cart.js
class Cart {
constructor() {
this.cartArray = [];
this.total = 0;
}
add(item) {
this.cartArray.push(item);
}
removeItem(item) {
var position = this.cartArray.lastIndexOf(item);
this.cartArray.splice(position, 1);
}
calculateTotal() {
var reducedTotal = this.cartArray.reduce((previous, current) => {
return this.total = previous + current.price;
}, 0);
return reducedTotal;
}
}
interface.js - handles all DOM components
function initialize() {
var itemList = "<table border='1|1'>";
var shoppingCartList = document.getElementById("shoppingCartList");
var total = document.getElementById("total");
var eachParagraph = document.getElementsByClassName('delete-item');
var cart = new Cart();
function showItems() {
for (var i = 0; i < items.length; i++) {
itemList += "<tr>";
itemList += "<td>" + items[i].name + "</td>";
itemList += "<td>" + items[i].category + "</td>";
itemList += "<td> " + items[i].price + "</td>";
itemList += "<td> " + items[i].stock + "</td>";
itemList += ` <td> <button id=${items[i].id}>add to cart</button> </td>`
itemList += "</tr>";
}
itemList += "</table>";
document.getElementById("itemsList").innerHTML = itemList;
}
function renderCart() {
var print = "";
var indexOfItem = 0;
cart.cartArray.forEach(function(element, index) {
print += `<p id=${index} class=${index}>` + element.name + element.price
+ `<button id=${indexOfItem}>Remove from cart</button> </p>`
indexOfItem++;
}
return print;
}
function renderTotal(){
cart.calculateTotal();
return "£" + cart.total;
}
function removeItemButtonFunctionality() {
cart.cartArray.forEach(function(element, index) {
shoppingCartList.addEventListener('click', () => {
cart.removeItem(element);
});
});
renderCart();
}
function addToButtonFunctionality() {
items.forEach( function(element, index) {
document.getElementById(index).addEventListener('click', () => {
cart.add(element);
shoppingCartList.innerHTML = renderCart();
total.innerHTML = renderTotal();
});
});
}
showItems();
addToButtonFunctionality();
removeItemButtonFunctionality();
}
window.addEventListener("DOMContentLoaded", initialize);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<h1>Shopping retailer</h1>
</head>
<body>
<div id="itemsList"></div>
<br>
<h3>Total:</h3>
<div id="total">
</div>
<h3>Shopping Cart:</h3>
<p id="shoppingCartList"></p>
<script src="src/items.js"></script>
<script src="src/cart.js"></script>
<script src="./interface.js"></script>
</body>
</html>