-
-
Save ziaddalii/c723507029a8a1ae719c0a5f57c76a40 to your computer and use it in GitHub Desktop.
I want to make a function when i click on the "heartBtn" it turns red and be added to the array "productsInFavArr" and when i click again the heart turns grey again and remove the product from the "productsInFavArr"
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let products = [ | |
{ | |
title: "Sunglasses", | |
imgURL: "images/Products/sunglasses.jpg", | |
desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nulla adipisci fugiat pariatur recusandae repudiandae fuga molestias doloremque itaque obcaecati.", | |
price:80, | |
id: 1 | |
}, | |
{ | |
title: "Laptop", | |
imgURL: "images/Products/laptop.jpg", | |
desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nulla adipisci fugiat pariatur recusandae repudiandae fuga molestias doloremque itaque obcaecati.", | |
price:100, | |
id: 2 | |
}, | |
{ | |
title: "Microphone", | |
imgURL: "images/Products/mic.jpg", | |
desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nulla adipisci fugiat pariatur recusandae repudiandae fuga molestias doloremque itaque obcaecati.", | |
price:75, | |
id: 3 | |
}, | |
{ | |
title: "Cat", | |
imgURL: "images/Products/cat.jpg", | |
desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nulla adipisci fugiat pariatur recusandae repudiandae fuga molestias doloremque itaque obcaecati.", | |
price:200, | |
id: 4 | |
}, | |
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Draw Product UI | |
function drawProductUI(array){ | |
var productsUI = array.map((item) => { | |
if (productsInFavArr) { | |
for (const favProd of productsInFavArr){ | |
if (favProd.id === item.id) { | |
// console.log(favProd); | |
return ` | |
<div class="product-item"> | |
<div class="product-img-container"> | |
<img src=${item.imgURL} alt="products" class="product-img" width="100%" height="150px"> | |
</div> | |
<div class="product-text"> | |
<h2 class="product-title">${item.title}</h2> | |
<span class="product-desc">${item.desc}</span> | |
<p class="product-price">USD ${item.price}</p> | |
</div> | |
<div class="product-btns"> | |
<button class="add-to-cart">Add To Cart</button> | |
// here is the btn (the class heart-icon-red the style is a red heart so if it exist in the productsInArr when user reload its a red heart ) | |
<button class="heart-btn heart-icon-red" onclick="removeItemFromFav(${item.id})"><i class="far fa-heart"></i></button> | |
</div> | |
</div> | |
`; | |
} | |
}} | |
return` | |
<div class="product-item"> | |
<div class="product-img-container"> | |
<img src=${item.imgURL} alt="products" class="product-img" width="100%" height="150px"> | |
</div> | |
<div class="product-text"> | |
<h2 class="product-title">${item.title}</h2> | |
<span class="product-desc">${item.desc}</span> | |
<p class="product-price">USD ${item.price}</p> | |
</div> | |
<div class="product-btns"> | |
<button class="add-to-cart">Add To Cart</button> | |
// here is the btn (the class heart-icon the style is a grey heart so if it doesnt exist in the productsInArr when user reload its a grey heart ) | |
<button class="heart-btn heart-icon" ><i class="far fa-heart"></i></button> | |
</div> | |
</div> | |
` | |
}); | |
productsContainer.innerHTML = productsUI.join(""); | |
} | |
window.onload = drawProductUI(allProducts) | |
// Favorite Function | |
for(let f=0; f < heartBtn.length; f++){ | |
heartBtn[f].addEventListener("click" ,()=>{ | |
let clicked = false | |
if (!clicked) { | |
clicked=true | |
productBtns[f].innerHTML=` | |
<button class="add-to-cart">Add To Cart</button> | |
<button class="heart-btn heart-icon-red" ><i class="far fa-heart"></i></button> | |
` | |
console.log("add"); | |
console.log(allProducts[f]); | |
}else{ | |
clicked=false | |
productBtns[f].innerHTML=` | |
<button class="add-to-cart">Add To Cart</button> | |
<button class="heart-btn heart-icon" ><i class="far fa-heart"></i></button> | |
` | |
} | |
console.log(allProducts[i]); | |
addToFavorites(allProducts[f]); | |
function addToFavorites(product){ | |
if (localStorage.getItem("userValidate") && localStorage.getItem("passValidate")) { | |
let productsInFavObj = localStorage.getItem("productsInFavObj"); | |
productsInFavObj = JSON.parse(productsInFavObj); | |
if(productsInFavObj != null){ | |
if(productsInFavObj[product.id] == undefined){ | |
productsInFavObj = { | |
...productsInFavObj, | |
[product.id] : product | |
} | |
} | |
}else{ | |
productsInFavObj = { | |
[product.id] : product | |
} | |
} | |
let productsInFavArr = Object.values(productsInFavObj) | |
localStorage.setItem("productsInFavArr" , JSON.stringify(productsInFavArr) ) | |
localStorage.setItem("productsInFavObj" , JSON.stringify(productsInFavObj) ) | |
// updateCartTotal() | |
}else{ | |
window.location.href = "login.html"; | |
} | |
} | |
}) | |
} | |
// Remove from Favorite | |
function removeItemFromFav(id){ | |
for(let f=0; f < heartBtn.length; f++){ | |
// heartBtn[f].addEventListener("click" ,()=> | |
let productsInFavArr = localStorage.getItem("productsInFavArr") | |
if(productsInFavArr){ | |
let items = JSON.parse(productsInFavArr); | |
console.log("removed item:",allProducts[f]); | |
let filteredItems = items.filter((item) => item.id !== id); | |
localStorage.setItem("productsInFavArr" , JSON.stringify(filteredItems)); | |
localStorage.setItem("productsInFavObj" , JSON.stringify(filteredItems) ) | |
// drawProduct(allProducts) | |
console.log(filteredItems); | |
if(filteredItems.length==0){ | |
localStorage.removeItem("productsInFavArr") | |
localStorage.removeItem("productsInFavObj") | |
} | |
} | |
} | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment