-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
93 lines (80 loc) · 2.73 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
console.log("Nike Air More Money E-Commerce Project");
import "./toggleCart.js";
import { formatPrice } from "./formatPrice.js";
export let store = getCurrentStorage("itemList");
console.log(store);
const mainCartContainer = document.querySelector(".cart-items");
//////////////////////////////////////////////////////
// add item to local storage
function addItemToStorage(id, name, color, price, image, amount) {
const addedItem = {
id: id,
name: name,
color: color,
price: price,
image: image,
amount: amount,
};
let currentStorageList = getCurrentStorage("itemList");
console.log(currentStorageList);
currentStorageList.push(addedItem);
localStorage.setItem("itemList", JSON.stringify(currentStorageList));
}
// add to cart functionality
function addToCart(id, name, price, image, amount) {
const article = document.createElement("article");
article.classList.add("cart-item");
const dataAttribute = document.createAttribute("data-id");
article.setAttributeNode(dataAttribute);
dataAttribute.value = `${id}`;
article.innerHTML = `<img
src="${image}"
class="cart-item-img"
/>
<h4 class="cart-item-name">${name}</h4>
<span class=cart-item-price>$${formatPrice(price)}</span>
<div class="cart-quantity">
<img src="./SVG/Arrow-Up-1.svg" class="cart-arrow-up-${id}" />
<span class="item-quantity-${id}">${amount}</span>
<img src="./SVG/Arrow-Down-1.svg" class="cart-arrow-down-${id}" />
</div>`;
mainCartContainer.appendChild(article);
}
// access local storage functionality
function getCurrentStorage() {
const currentItems = JSON.parse(localStorage.getItem("itemList"));
console.log(currentItems);
if (currentItems) {
return JSON.parse(localStorage.getItem("itemList"));
} else {
return [];
}
}
function getCurrentCart() {
let currentStoredItems = getCurrentStorage();
currentStoredItems.map(function (item) {});
}
getCurrentCart();
// cart persistence functionality in home page
function cartPersistence() {
let currentStore = getCurrentStorage();
currentStore.map(function (item) {
const { id, name, price, image, amount } = item;
addToCart(id, name, price, image, amount);
});
}
cartPersistence();
// item present in the cart functionality
function cartNotification() {
let currentStore = getCurrentStorage();
if (currentStore.length > 0) {
console.log("There are items in the cart");
const cartRedDot = document.querySelector(".red-dot");
console.log(cartRedDot);
if (cartRedDot) {
cartRedDot.classList.add("visibility");
}
}
}
cartNotification();
export { addItemToStorage, addToCart, getCurrentStorage };