Skip to content

Commit f135036

Browse files
yuriystasivyuriystasiv
authored
Merge pull request #2 from yusts/task-2
task-2
2 parents 8322ce0 + d05113f commit f135036

File tree

6 files changed

+537
-85
lines changed

6 files changed

+537
-85
lines changed

‎index.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,19 +30,56 @@
3030
<main class="hidden page-content ">
3131

3232
<section class="product-list">
33+
34+
<div class="product-list__sieve">
35+
36+
<div class="product-list__filter">
37+
<input type="text" class="product-list__filter--input" placeholder="szukaj wedłud składników">
38+
</div>
39+
40+
<div class="product-list__sort">
41+
<div class="product-list__sort--title">Sortuj według</div>
42+
<select name="sort" id="product-list__sort--select">
43+
<option value="nameAscending">Nazwa rosnąco (A-Z)</option>
44+
<option value="nameDescending">Nazwa malejąco (Z-A)</option>
45+
<option value="priceAscending">Cena rosnąco</option>
46+
<option value="priceDescending">Cena malejąco</option>
47+
</select>
48+
</div>
49+
50+
</div>
51+
3352
<div class="product-list__items">
3453

3554
</div>
55+
56+
<div id="shopping-cart" class="shopping-cart">
57+
<div class="shopping-cart__icon">
58+
<img src="./src/shopping-cart.png" alt="shopping-cart">
59+
</div>
60+
<div class="shopping-cart__price">
61+
</div>
62+
</div>
63+
3664
</section>
3765

3866
<aside class="cart-list">
3967
<div class="cart-list__content">
68+
4069
<div class="cart-list__items">
4170

71+
<div class="cart-list__go-back">
72+
<img src="./src/left-arrow.png" alt="left-arrow">
73+
</div>
74+
4275
<div class="cart-list__title">
4376
<h2>Koszyk</h2>
4477
</div>
4578

79+
<div class="cart-list__remove-items">
80+
<img src="./src/trash.png" alt="trash">
81+
</div>
82+
4683
<div class="cart-list__products">
4784

4885
</div>

‎script.js

Lines changed: 146 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,159 @@
1+
'use strict';
12

23
const url = 'https://raw.githubusercontent.com/alexsimkovich/patronage/main/api/data.json';
34

4-
const productList = document.querySelector('.product-list__items');
5+
const main = document.querySelector('main');
6+
7+
const productListItems = document.querySelector('.product-list__items');
8+
const filterProducts = document.querySelector('.product-list__filter--input');
9+
const sortProducts = document.querySelector('#product-list__sort--select');
10+
11+
const cartList = document.querySelector('.cart-list')
12+
const shoppingCartGoBack = document.querySelector('.cart-list__go-back')
13+
const clearCart = document.querySelector('.cart-list__remove-items')
514
const cartProducts = document.querySelector('.cart-list__products');
615
const hungryInfo = document.querySelector('.cart-list__empty');
716
const checkout = document.querySelector('.cart-list__checkout');
817
const total = document.querySelector('.cart-list__total');
9-
const main = document.querySelector('main');
18+
19+
const shoppingCartGoTo = document.querySelector('.shopping-cart')
20+
const shoppingCartButtonTotal = document.querySelector('.shopping-cart__price');
21+
1022
const spinner = document.querySelector('.spinner');
1123

1224

1325
const products = [];
14-
const cart = [];
26+
const cart = JSON.parse(localStorage.getItem('cartStorage')) || [];
27+
updateCart();
1528

1629
fetch(url)
1730
.then(response => response.json())
18-
.then(data => data.forEach(item => products.push(item)))
19-
.then(() => renderPizza())
31+
.then(data => Array.prototype.push.apply(products, data))
32+
.then(() => renderPizza(products))
2033

2134

22-
function renderPizza() {
35+
function renderPizza(products) {
2336

24-
products.forEach((productItem) => {
37+
sortPizza(products);
38+
let result = '';
2539

26-
const { id, title, image, ingredients, price } = productItem
40+
if (products.length) {
41+
products.forEach(({ id, title, image, ingredients, price }) => {
2742

28-
productList.innerHTML += `
29-
<div class="product-item">
30-
<div class="product-item__content">
31-
32-
<div class="product-item__image">
33-
<img src="${image}" alt="${title}">
34-
</div>
35-
36-
<div class="product-item__info">
37-
38-
<div class="product-item__title">
39-
<h3>${title}</h3>
43+
result += `
44+
<div class="product-item">
45+
<div class="product-item__content">
46+
47+
<div class="product-item__image">
48+
<img src="${image}" alt="${title}">
4049
</div>
41-
<div class="product-item__description">
42-
${ingredients.join(', ')}
50+
51+
<div class="product-item__info">
52+
53+
<div class="product-item__title">
54+
<h3 class="product-item__title-text">${title}</h3>
55+
</div>
56+
<div class="product-item__description">
57+
${ingredients.join(', ')}
58+
</div>
59+
4360
</div>
44-
61+
62+
<div class="product-item__checkout">
63+
64+
<div class="product-item__price-bar">
65+
<div>${price.toFixed(2)} zł</div>
66+
</div>
67+
68+
<div class="product-item__cart-bar">
69+
<button class="product-item__button button button__main" data-product-id="${id}">Zamów</button>
70+
</div>
71+
72+
</div>
73+
4574
</div>
75+
</div>
76+
`;
4677

47-
<div class="product-item__checkout">
78+
productListItems.innerHTML = result;
4879

49-
<div class="product-item__price-bar">
50-
<div>${price.toFixed(2)} zł</div>
51-
</div>
80+
// handler for buttons to add products to cart
81+
document.querySelectorAll('.product-item__button').forEach(item => {
82+
item.addEventListener('click', () => {
83+
const productId = parseInt(item.dataset.productId)
84+
addToCart(productId)
85+
})
5286

53-
<div class="product-item__cart-bar">
54-
<button class="product-item__button button button__main" data-product-id="${id}">Zamów</button>
55-
</div>
56-
57-
</div>
87+
})
5888

59-
</div>
89+
});
90+
91+
} else {
92+
result += `
93+
<div class="product-list__not-found">
94+
brak wyników wyszukiwania dla: ${filterProducts.value}
6095
</div>
6196
`;
97+
productListItems.innerHTML = result;
98+
}
6299

63-
// handler for buttons to add products to cart
64-
document.querySelectorAll('.product-item__button').forEach(item => {
65-
item.addEventListener('click', () => {
66-
const productId = parseInt(item.dataset.productId)
67-
addToCart(productId)
68-
})
100+
}
69101

70-
})
102+
function sortPizza(products) {
103+
const sortOption = sortProducts.value;
104+
switch (sortOption) {
105+
case 'nameAscending':
106+
products.sort((a, b) => sortAtoZ(a, b));
107+
break;
108+
case 'nameDescending':
109+
products.sort((a, b) => sortZtoA(a, b));
110+
break;
111+
case 'priceAscending':
112+
products.sort((a, b) => priceAscending(a, b));
113+
break;
114+
case 'priceDescending':
115+
products.sort((a, b) => priceDescending(a, b));
116+
break;
117+
default:
118+
products.sort((a, b) => sortAtoZ(a, b));
119+
break;
120+
}
121+
return products;
122+
}
71123

72-
});
73124

125+
// filter products by providing ingredients to search bar
126+
filterProducts.addEventListener('input', () => filterPizza())
127+
// sort products by selecting sorting option and considering products filtration
128+
sortProducts.addEventListener('change', () => filterPizza())
129+
130+
131+
function filterPizza() {
132+
const filterIngredients = filterProducts.value.toUpperCase().replace(/\s/g, '').split(',')
133+
const filteredProducts = products.filter(product =>
134+
filterIngredients.every(searchProduct => product.ingredients.some(ingredient => ingredient.toUpperCase().includes(searchProduct)))
135+
)
136+
renderPizza(filteredProducts)
137+
}
138+
139+
// sort functions
140+
function sortAtoZ(a, b) {
141+
return a.title.localeCompare(b.title)
74142
}
75143

144+
function sortZtoA(a, b) {
145+
return b.title.localeCompare(a.title)
146+
}
147+
148+
function priceAscending(a, b) {
149+
return (a.price > b.price) ? 1 : (a.price === b.price) ? (a.title.localeCompare(b.title)) : -1
150+
}
151+
152+
function priceDescending(a, b) {
153+
return (a.price < b.price) ? 1 : (a.price === b.price) ? (b.title.localeCompare(a.title)) : -1
154+
}
155+
156+
// add selected product to cart, if present increase quantity of selected product +1
76157
function addToCart(id) {
77158
const productInCart = cart.find(item => item.id === id)
78159

@@ -89,6 +170,7 @@ function addToCart(id) {
89170
updateCart();
90171
}
91172

173+
// decrease quantity of selected product -1, if quantity===1 -remove one item from cart
92174
function removeItemFromCart(id) {
93175
const productInCart = cart.find(item => item.id === id)
94176
const index = cart.findIndex(item => item.id === id)
@@ -102,9 +184,17 @@ function removeItemFromCart(id) {
102184
updateCart();
103185
}
104186

187+
// clear cart and remove all items
188+
clearCart.addEventListener('click', () => {
189+
cart.length = 0;
190+
updateCart()
191+
})
192+
105193
function updateCart() {
106194
renderCartProducts();
107195
renderTotal();
196+
197+
localStorage.setItem('cartStorage', JSON.stringify(cart))
108198
}
109199

110200
function renderCartProducts() {
@@ -171,19 +261,33 @@ function renderTotal() {
171261
});
172262

173263
total.innerHTML = `${totalPrice.toFixed(2)} zł`;
264+
shoppingCartButtonTotal.innerHTML = `${totalPrice.toFixed(2)} zł`
174265
shoppingCartListener(totalItems);
175266
}
176267

177268

269+
// onclick go to shopping cart
270+
shoppingCartGoTo.addEventListener('click', () => {
271+
cartList.classList.add('active')
272+
document.body.classList.add('scroll-lock')
273+
})
274+
275+
// onclick return to products list from shopping cart
276+
shoppingCartGoBack.addEventListener('click', () => {
277+
cartList.classList.remove('active')
278+
document.body.classList.remove('scroll-lock')
279+
})
280+
178281
// if shoppingCart is empty - display hungry information
179282
function shoppingCartListener(items) {
180283
if (items > 0) {
181284
hungryInfo.classList.add('hide')
182285
checkout.classList.remove('hide')
183-
286+
clearCart.classList.remove('hide')
184287
} else {
185288
hungryInfo.classList.remove('hide')
186289
checkout.classList.add('hide')
290+
clearCart.classList.add('hide')
187291
}
188292
}
189293

‎src/left-arrow.png

1.53 KB
Loading

‎src/shopping-cart.png

7.51 KB
Loading

‎src/trash.png

4.62 KB
Loading

0 commit comments

Comments
 (0)