const formDiv = document.getElementById("purhcaseFormDiv");
const totalSum = document.getElementById("total");
const slider = document.querySelector(".slider-vertical");
const arr = [{name:"Rubix cube",Cost:250,image:"Pictures/3x3-Rubix-Cube.jpg"},{name:"Drone",Cost:5000,image:"Pictures/Rc.Drone.jpg"},{name:"Aeroplane",Cost:3000,image:"Pictures/Rc.Plane.jpg"},{name:"Cars",Cost:1500,image:"Pictures/Rc.Car.jpg"},{name:"Rc.Hellio",Cost:1000,image:"Pictures/Rc.Hellio.jpg"},{name:"Brown Teddy",Cost:800,image:"Pictures/Teddy.jpg"}];
const total = () => {
let totalAmt = 0;
let formHTML = []
let amt = 0;
arr.forEach((item,i) => {
if (item.qty && item.qty > 0) {
amt = item.qty * item.Cost;
formHTML.push(item.name + "<br/>Item Price: $" + item.Cost.toFixed(2) + "<br>Please Select Quantity" +
"<input type='button' class='subtract' value='-' data-idx='" + i + "'/>" +
"<input type='button' class='add' value='+' data-idx='" + i + "'/>" +
"<input type='text' name='qty' readonly=true value='" + item.qty + "' />" +
"<input type='text' name='subtotal' value='" + amt.toFixed(2) + "' />");
}
totalAmt += amt;
});
formDiv.innerHTML = formHTML.join("<hr/>");
totalSum.innerText = totalAmt.toFixed(2)
};
let html = [];
arr.forEach((item,i) => html.push(
'<div class="card"><h2>' + item.name + '</h2><img src=' + item.image + ' style="width:250px" border="3px"><p class="Cost">$ ' + item.Cost.toFixed(2) + '</p> <p> <button class="add" data-idx="' + i + '"> Add to cart </button> </p> </div>'))
slider.innerHTML = html.join("");
slider.addEventListener("click",(e) => {
const el = e.target;
if (el.className === "add") {
let i = el.getAttribute("data-idx");
if (arr[i].qty) {
arr[i].qty++
} else {
arr[i].qty = 1;
}
total()
}
})
formDiv.addEventListener("click",(e) => {
let el = e.target;
let cl = el.className;
let i = el.getAttribute("data-idx");
if (cl === "add" || cl === "subtract") {
let qty = arr[i].qty;
qty += cl === "add" ? 1 : -1;
arr[i].qty = qty < 0 ? 0 : qty;
total()
}
})
<div class="slider-vertical"></div>
<hr/>
<form id="purchaseForm">
<div id="purhcaseFormDiv"></div>
<hr/>
Total: $<span id="total">0.00</span>
</form>