Skip to content

Commit

Permalink
Cart Fix Complete
Browse files Browse the repository at this point in the history
  • Loading branch information
@richardkanai
richardkanai committed Aug 19, 2021
1 parent f33154c commit 779a068
Show file tree
Hide file tree
Showing 3 changed files with 246 additions and 89 deletions.
197 changes: 168 additions & 29 deletions app.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
document.addEventListener("DOMContentLoaded", ()=>{
// json fetching
GetProducts();

// display image changer every 5s
ChangeImage(Covers, D_image, 5000)
})

// get elements
const D_image = document.querySelector(".DisplayImage")
const IntroText = document.querySelector(".IntroText")
Expand All @@ -7,6 +15,13 @@ const CardsHolder = document.querySelector(".CardsHolder")
const ProductsCategory = document.querySelector("#ProductsCategory")
const ToggleCartbtn = document.querySelector("#Cartbtn")
const CartDiv = document.querySelector(".CartDiv")
const AddQuantityBtn = document.querySelector("#AddQuantity")
const ReduceQuantityBtn = document.querySelector("#ReduceQuantity")
const CartRemoveBtn = document.querySelector("#CartRemoveBtn")
const ProductQuantity = document.querySelector("#Quantity")
const ItemCost = document.querySelectorAll("#ItemCost")
const CartTotal = document.querySelector("#CartTotals")
const CartItemsHolder = document.querySelector(".CartItemsHolder")


// navigation
Expand All @@ -30,18 +45,11 @@ ToggleCartbtn.addEventListener("click",()=>{
CartDiv.classList.toggle("Show")
} )

// navigation end

// animate IntroText
ScrollReveal().reveal('.IntroText', { delay: 500});
ScrollReveal().reveal('.HomeBtns', { delay: 700});
ScrollReveal().reveal('.DisplayImage', { delay: 800});
ScrollReveal().reveal('.ProductCard', { delay: 2000});
ScrollReveal().reveal('form', { delay: 1000});
ScrollReveal().reveal('.SocialLinks', { delay: 1000});
ScrollReveal().reveal('.Links', { delay: 700});
ScrollReveal().reveal('#About', { delay: 900});

// display image changer every 5s

// list of display cover photos
const Covers = [
"(./Images/coveroriginal.png) center center /contain no-repeat",
"(./Images/cover6600.png) center center /contain no-repeat",
Expand All @@ -50,24 +58,20 @@ const Covers = [
"(./Images/cover3600.png) center center /contain no-repeat"
]

const ChangeImage = (images, container, step) => {
function ChangeImage(images, container, step){
images.forEach((image, index) => (
setTimeout(() => {
container.style.background = "url"+`${image}`;
}, step * (index + 1))
))
setTimeout(() => ChangeImage(images, container, step), step * images.length)
}

ChangeImage(Covers, D_image, 5000)


// photo changing end//////////////////////////////////////



// json fetching

GetProducts();
// // json fetching
function GetProducts(){
fetch("./products.json")
.then(response => response.json())
Expand All @@ -76,26 +80,31 @@ function GetProducts(){
// create card for each data
CreateProductCard(data.image, data.name, data.company, data.make, data.cost)
})
CreateCartItem()
});
}


}

// create a product Card and appends to CardsHolder
function CreateProductCard(Pimage, PName, PCompany, PMake, PCost){
let newCard = document.createElement("div")
newCard.classList = "ProductCard"
newCard.innerHTML = `
let newCard = document.createElement("div")
newCard.classList = "ProductCard"
newCard.innerHTML += `
<img src="${Pimage}" alt="Loading Image">
<h3 class="ProductName">${PName}</h3>
<h3 class="ProductCompany">${PCompany}</h3>
<h3 class="ProductMake">${PMake}</h3>
<h3>Ksh. <span id="ProductCost"></span>${PCost}</h3>
<button class="btn" id="CartItem">Add to Cart</button>
<h3>Ksh. <span id="ProductCost">${PCost}</span></h3>
<button class="btn" id="AddTocart">Add to Cart</button>
`;

CardsHolder.append(newCard);
CardsHolder.append(newCard);
}



// Products sorting
// Displaying Products depending on the category the user wants
ProductsCategory.addEventListener('change', ()=>{
CardsHolder.innerHTML = "";
Expand All @@ -106,16 +115,146 @@ ProductsCategory.addEventListener('change', ()=>{
}

})

// sorts catergoty depending on choice
function SortByCategory(userChoice){
let source = `./${userChoice}.json`
console.log(source);
fetch(source)
.then(response => response.json())
.then(data =>{
console.log(data);
data.map(data=>{
CreateProductCard(data.image, data.name, data.company, data.make, data.cost)
})
CreateCartItem()
})
}
}
// Product sorting end






// Card to Cart

function CreateCartItem(){
const Cards =document.querySelectorAll(".ProductCard")
Cards.forEach(card=>{
card.addEventListener("click",(e)=>{
let ClickedBtn = e.target; //Gets the buttons
let TargetParent = e.target.parentElement;
let ItemImage = TargetParent.querySelector("img").src
let ItemCost = TargetParent.querySelector("h3 #ProductCost").textContent

// ensure the button is clicked and the button is active
if(ClickedBtn.id=="AddTocart"){
//add to cart and open cart
// add item to cart ui
AddItemToCart(ItemImage,ItemCost)
ToggleCartbtn.style.transform = "rotate(360deg)"
} else {
CartDiv.classList.toggle("Show")
}
})
})

}

// add Item to the cart
function AddItemToCart(image, Cost){
CartItemsHolder.innerHTML +=`
<div class="CartItem" onmouseover="CartTotalCalc()">
<img src="${image}" alt="Loading Image">
<section>
<i class="bi bi-file-minus-fill" id="ReduceQuantity"></i>
<input type="number"name="Quantity" id="Quantity" contenteditable="true" value="1">
<i class="bi bi-file-plus-fill" id="AddQuantity"></i>
<span type="number" name="ItemCost" id="ItemCost">${Cost}</span>
</section>
<span class="TotalCost">${Cost}</span>
<i class="bi bi-file-x-fill" id="CartRemoveBtn"></i>
</div>
`
ManipulateCartItem()
}


function ManipulateCartItem(){
const CartItems = document.querySelectorAll(".CartItem")
CartItems.forEach(item=>{
item.addEventListener("click", (e)=>{
// console.log(e.target.id);
let TargetElement = e.target
if(TargetElement.id == "CartRemoveBtn"){
ToggleCartbtn.style.transform = "rotate(180deg)"
TargetElement.parentElement.remove()
ToggleCartbtn.style.transform = "rotate(0deg)"
}else if(TargetElement.id == "AddQuantity"){
//Plus Buttom operation
let ParentItem = e.target.parentElement
let ItemQuantity = ParentItem.querySelector("#Quantity").value
let newItemQuantity = parseInt(ItemQuantity)+1;
// console.log(newItemQuantity);
ParentItem.querySelector("#Quantity").value = newItemQuantity
let TotalDiv = ParentItem.parentElement.querySelector(".TotalCost")
// Calculate the total of this particular item depending on quantity
TotalDiv.textContent = CostCalculator(item)
// CartTotalCalc(item)
}else if(TargetElement.id == "ReduceQuantity" && e.target.parentElement.querySelector("#Quantity").value>1 ){
// Minus button operation
let ParentItem = e.target.parentElement
let ItemQuantity = ParentItem.querySelector("#Quantity").value
let newItemQuantityMinus = parseInt(ItemQuantity)-1;
// console.log(newItemQuantityMinus);
ParentItem.querySelector("#Quantity").value = newItemQuantityMinus
let TotalDiv = ParentItem.parentElement.querySelector(".TotalCost")
// Calculate the total of this particular item depending on quantity
TotalDiv.textContent = CostCalculator(item)
// CartTotalCalc(item)
}
})

})
}

// gets cost of each cart item depending on Quantity
function CostCalculator(Cart){
let TotalCostofItem = 0;
let initialCost = Cart.querySelector("#ItemCost").textContent
let currentQuantity = Cart.querySelector("#Quantity").value;
if(currentQuantity>1){
TotalCostofItem = currentQuantity*initialCost
}else{
TotalCostofItem =initialCost
}
return TotalCostofItem;
}

// CartTotalCalc();

// todo: calculate all Totals
function CartTotalCalc(){
const EvaluatedCosts = [...document.querySelectorAll(".CartItem .TotalCost")]
// console.log(EvaluatedCosts);
let CostArray =[];
EvaluatedCosts.forEach(element => {
CostArray.push(element.textContent)
});

// console.log(CostArray);

let sum = 0;
for (let index = 0; index < CostArray.length; index++) {
sum = sum + parseInt(CostArray[index])
}
CartTotal.innerText = sum
}

// animations
ScrollReveal().reveal('.IntroText', { delay: 500});
ScrollReveal().reveal('.HomeBtns', { delay: 700});
ScrollReveal().reveal('.DisplayImage', { delay: 800});
ScrollReveal().reveal('.ProductCard', { delay: 2000});
ScrollReveal().reveal('form', { delay: 800});
ScrollReveal().reveal('.SocialLinks', { delay: 700});
ScrollReveal().reveal('.Links', { delay: 700});
ScrollReveal().reveal('#About', { delay: 900});
41 changes: 16 additions & 25 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<body>
<header>
<div id="logo" >
<img href="#" src="./Images/logo.png" alt="logo">
<img href="#Home" src="./Images/logo.png" alt="logo">
</div>

<nav>
Expand Down Expand Up @@ -42,7 +42,7 @@ <h5>Free 12 Months Waranty on ALL Products.</h5>

<div class="HomeBtns">
<a class="btn" href="#Products">Products</a>
<a class="btn" href="#Contact">Talk to Us</a>
<a class="btn light" href="#Contact">Talk to Us</a>
</div>

</div>
Expand Down Expand Up @@ -146,33 +146,24 @@ <h1>Your Cart</h1>
</div>

<div class="CartItemsHolder">

<div class="CartItem">
<!-- cart Item start -->
<!-- <div class="CartItem">
<img src="./Images/ComputerA1.png" alt="image">
<h3 class="ItemTitle">Gaming Computer</h3>
<section>
<i class="bi bi-file-minus-fill btn"></i>
<input type="number" name="Quantity" id="Quantity">
<i class="bi bi-file-plus-fill btn"></i>
<input type="number" name="ItemCost" id="ItemCost" readonly>
</section>
<button id="RemoveItemBtn" class="btn">Remove</button>

</div>
<div class="CartItem">
<img src="./Images/ComputerA2.png" alt="image">
<h3 class="ItemTitle">Gaming Computer</h3>
<section>
<i class="bi bi-file-minus-fill btn"></i>
<input type="number" name="Quantity" id="Quantity">
<i class="bi bi-file-plus-fill btn"></i>
<input type="number" name="ItemCost" id="ItemCost" readonly>
<i class="bi bi-file-minus-fill" id="AddQuantity"></i>
<span name="Quantity" id="Quantity" contenteditable="true">1</span>
<i class="bi bi-file-plus-fill" id="ReduceQuantity"></i>
<span name="ItemCost" id="ItemCost" contenteditable="true">2300</span>
</section>
<button id="RemoveItemBtn" class="btn">Remove</button>

</div>
<i class="bi bi-file-x-fill" id="CartRemoveBtn"></i>
</div> -->
<!-- cart item end -->


<!-- Cart Footer -->

</div>
<div class="cartFooter">
<h3>Your Total: <span id="CartTotals"></span></h3>
</div>
</div>

Expand Down
Loading

0 comments on commit 779a068

Please sign in to comment.