<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="myContent"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
itemcontainer = document.getElementById('myContent');
cartarry = {};
cartarry.products = [
{id: "1510-01-312-3501-OkqcPp3xJwfgmNinwGsKZmAa8xt1-1514542566148", name: "AIRPLANE UTILITY", price: "$90", quantity: "1"},
{id: "1510-00-033-6312-OkqcPp3xJwfgmNinwGsKZmAa8xt1-1514540733034", name: "AIRPLANE UTILITY", price: "$43", quantity: "3"},
{id: "1510-00-033-6312-OkqcPp3xJwfgmNinwGsKZmAa8xt1-1514540733035", name: "AIRPLANE UTILITY", price: "$50", quantity: "1"}
];
function renderProducts(){
itemcontainer.innerHTML = '';
cartarry.products.forEach(function(element) {
var id = element.id;
var itemname = element.name;
var itemprice = element.price;
var itemcard = `
<div class="product" id="${id}">
<div class="product-image">
<img src="https://s.cdpn.io/3/dingo-dog-bones.jpg">
</div>
<div class="product-details">
<div class="product-title">Dingo Dog Bones</div>
<p class="product-description"> ${itemname}</p>
</div>
<div class="product-price">${itemprice}</div>
<div class="product-quantity">
<input type="number" value="2" min="1">
</div>
<div class="product-removal">
<button class="remove-product">
Remove
</button>
</div>
<div class="product-line-price">25.98</div>
</div>
`;
itemcontainer.innerHTML += itemcard;
});
}
$(document).on('click', '.product', function(element){
console.log(this.id)
var index = cartarry.products.map(function(element) {
return element.id;
}).indexOf(this.id);
console.log(index);
cartarry.products.splice(index, 1);
renderProducts();
});
renderProducts();
</script>
</body>
</html>
// Code goes here
/* Styles go here */