-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
183 lines (162 loc) · 6.68 KB
/
script.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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
import { products } from "./products.js";
import { AppStorage } from "./storage.js";
const storage = new AppStorage();
storage.saveItem("products", products);
const productBar = document.querySelector(".product-bar");
const currentProductImage = document.querySelector(".currentProductImage");
const productInfoContainer = document.querySelector(".product-info");
const sizeContainer = document.querySelector(".size-container");
let current;
let likedProduct = products.filter(el => el.isLiked === true) || [];
// Adding the product images bar on the page
function renderProductBar() {
productBar.textContent = "";
const element = products
.map(
prod => `
<img src="${prod.image}" alt="" id="product" data-id="${prod.id}" class="duration-150 shadow-md object-cover w-24 rounded-md">
`
)
.join("");
productBar.insertAdjacentHTML("afterbegin", element);
}
// Adding the current Image of the product selected on the page
function renderCurrentImage(current) {
currentProductImage.textContent = "";
const image = `
<img src="${current.image}" alt="" data-id="${current.id}" class="rounded-md rounded-b-none rounded-r-none ">
`;
const img = productBar.querySelectorAll("img");
img.forEach(img => {
if (img.dataset.id === current.id)
img.classList.add("border-2", "border-orange-400", "scale-110");
});
currentProductImage.insertAdjacentHTML("afterbegin", image);
}
// Adding information about the current product selected and calling the function to render the current image
function renderCurrentProduct(id = "01") {
productInfoContainer.textContent = "";
current = products.find(el => el.id === id);
renderCurrentImage(current);
const prodInfo = `
<div class="flex items-center justify-between ">
<span
class="block px-2 py-1 text-xs text-orange-400 font-bold border-2 border-orange-400 rounded-full ">${
current.new ? "NEW" : "Out of Stock"
}</span>
<button class="relative w-8 h-8 fav" id=${current.id}>
<img src="./images/${
current.isLiked ? "" : "non"
}like.svg" class="duration-150 w-8 h-8 favSVG" alt=""></img>
</button>
</div>
<p class="mt-2 text-lg brand md:text-base md1:text-lg text-stone-500">${
current.brand
}</p>
<h1 class="text-3xl font-semibold tracking-tight name md:text-2xl md1:text-3xl text-stone-900 ">${
current.name
}</h1>
<div class="relative flex mt-2">
<span class="text-base rating md:text-sm md1:text-base text-stone-500">${
current.rating
} </span>
<div class="flex -space-x-1">
<img src="./images/star.svg" alt="" class="w-5 h-5 md:w-4 md:h-4 md1:w-5 md1:h-5"/>
<img src="./images/star.svg" alt="" class="w-5 h-5 md:w-4 md:h-4 md1:w-5 md1:h-5"/>
<img src="./images/star.svg" alt="" class="w-5 h-5 md:w-4 md:h-4 md1:w-5 md1:h-5"/>
<img src="./images/star.svg" alt="" class="w-5 h-5 md:w-4 md:h-4 md1:w-5 md1:h-5"/>
<img src="./images/star.svg" alt="" class="w-5 h-5 md:w-4 md:h-4 md1:w-5 md1:h-5"/>
</div>
<a href="#"
class="absolute text-sm underline duration-150 translate-y-6 md:text-xs md1:text-sm text-stone-400 hover:text-stone-500">Rate
now</a>
</div>
<div class="mt-10 mb-4 price lg:mb-4 lg:mt-10 price">
<span class="text-xl font-semibold md:text-lg md1:text-xl text-stone-900">$</span>
<span class="text-6xl font-bold md:text-4xl text-stone-900 md1:text-6xl pricing">${
current.price
}</span>
</div>
`;
productInfoContainer.insertAdjacentHTML("afterbegin", prodInfo);
}
// Add and Remove bookmarked product from array likedProduct then save anytime in localStorage
function toggleLikedProduct(current) {
if (current.isLiked) likedProduct.push(current);
else {
const index = likedProduct.findIndex(el => el.id === current.id);
if (index !== -1) likedProduct.splice(index, 1);
}
localStorage.setItem("likedProduct", JSON.stringify(likedProduct));
}
// Making functional the two function toggleLikedProduct() & toggleLoveBtn() on every click to the bookmark btn
function addLikedProduct(current) {
productInfoContainer.addEventListener("click", e => {
const clicked = e.target.closest(".fav");
if (!clicked) return;
current.isLiked = !current.isLiked;
toggleLoveBtn(current);
toggleLikedProduct(current);
});
}
// Change bookmark icon
function toggleLoveBtn(current) {
const loveBtn = productInfoContainer.querySelector(".fav");
const loveSvg = loveBtn.querySelector("img");
loveSvg.src = `./images/${current.isLiked ? "" : "non"}like.svg`;
}
// Changing size
function changePricePerSize(current, rate) {
const fixedPrice = current.price;
const priceContainer = productInfoContainer.querySelector(".price");
const priceValue = priceContainer.querySelector(".pricing");
priceValue.textContent = `${(fixedPrice * rate).toFixed(2)}`;
}
function changeStylePerSize(e) {
const clickedEl = e.target.closest("button");
if (!clickedEl) return;
const elements = sizeContainer.querySelectorAll("button");
elements.forEach(el => {
el.classList.remove("border-orange-300");
if (!el.classList.contains("border-stone-200"))
el.classList.add("border-stone-200");
});
clickedEl.classList.replace("border-stone-200", "border-orange-300");
const rate = +clickedEl.dataset.priceRate;
changePricePerSize(current, rate);
}
sizeContainer.addEventListener("click", changeStylePerSize);
// Current Product style on product bar
function activeProduct(e) {
const clickedEl = e.target.closest("#product");
if (!clickedEl) return;
const img = productBar.querySelectorAll("img");
img.forEach(img =>
img.classList.remove("border-2", "border-orange-400", "scale-110")
);
clickedEl.classList.add("border-2", "border-orange-400", "scale-110");
const elements = sizeContainer.querySelectorAll("button");
elements.forEach(el => {
el.classList.remove("border-orange-300");
});
elements[0].classList.replace("border-stone-200", "border-orange-300");
}
productBar.addEventListener("click", activeProduct);
// Making functional the function renderCurrentProduct() to every click to the element from the product bar
function showCurrentProduct(e) {
const clickedEl = e.target.closest("#product");
if (!clickedEl) return;
const currentId = clickedEl.dataset.id;
localStorage.setItem("currentId", JSON.stringify(currentId));
renderCurrentProduct(currentId);
}
productBar.addEventListener("click", showCurrentProduct);
// On Load
function onLoad() {
if (!localStorage.getItem("currentId")) return renderCurrentProduct();
const id = JSON.parse(localStorage.getItem("currentId"));
renderCurrentProduct(id);
addLikedProduct(current);
}
renderProductBar();
onLoad();