Skip to content

Commit ee7eb69

Browse files
AlexN-githubAlexN-github
committed
сделан task03
1 parent 6e40605 commit ee7eb69

4 files changed

Lines changed: 217 additions & 1 deletion

File tree

‎README.md‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎script.js‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
let basketBtns = document.querySelectorAll('.toBasketBtn');
2+
basketBtns.forEach(function(btn){
3+
btn.addEventListener('click',function(event){
4+
let id = event.srcElement.dataset.id;
5+
let price = event.srcElement.dataset.price;
6+
let name = event.srcElement.dataset.name;
7+
basket.addProduct({id: id, price: price, name: name})
8+
})
9+
});
10+
11+
let basket = {
12+
products: {},
13+
14+
addProduct(product){
15+
this.addProductToObject(product);
16+
this.renderProductInBasket(product);
17+
this.renderTotalSum();
18+
this.addRemoveBtnsListeners();
19+
},
20+
21+
removeProductListener(event){
22+
basket.removeProduct(event);
23+
basket.renderTotalSum();
24+
},
25+
26+
removeProduct(event){
27+
let id = event.srcElement.dataset.id;
28+
this.removeProductFromObject(id);
29+
this.removeProductFromBasket(id);
30+
},
31+
32+
removeProductFromBasket(id){
33+
let countId = document.querySelector(`.productCount[data-id="${id}"]`);
34+
if(countId.textContent == 1){
35+
countId.parentNode.remove();
36+
} else{
37+
countId.textContent--;
38+
}
39+
40+
},
41+
42+
removeProductFromObject(id){
43+
if(this.products[id].count == 1){
44+
delete this.products[id]
45+
} else {
46+
this.products[id].count--;
47+
}
48+
},
49+
50+
addRemoveBtnsListeners(){
51+
let btns = document.querySelectorAll('.productRemoveBtn');
52+
for(let i = 0; i < btns.length; i++){
53+
btns[i].addEventListener('click',this.removeProductListener);
54+
}
55+
},
56+
57+
renderTotalSum(){
58+
document.querySelector('.total').textContent = this.getTotalSum();
59+
},
60+
61+
getTotalSum(){
62+
let sum = 0;
63+
for(let key in this.products){
64+
sum += this.products[key].price * this.products[key].count;
65+
}
66+
return sum;
67+
},
68+
69+
addProductToObject(product){
70+
if(this.products[product.id] == undefined){
71+
this.products[product.id] = {
72+
price: product.price,
73+
name: product.name,
74+
count: 1
75+
}
76+
} else{
77+
this.products[product.id].count++;
78+
}
79+
},
80+
81+
renderProductInBasket(product){
82+
let productExist = document.querySelector(`.productCount[data-id="${product.id}"]`);
83+
if(productExist){
84+
productExist.textContent++;
85+
return;
86+
}
87+
let productRow = `
88+
<tr>
89+
<th scope="row">${product.id}</th>
90+
<td>${product.name}</td>
91+
<td>${product.price}</td>
92+
<td class="productCount" data-id="${product.id}">1</td>
93+
<td><i class="fas fa-trash-alt productRemoveBtn" data-id="${product.id}"></i></td>
94+
</tr>
95+
`;
96+
let tbody = document.querySelector('tbody');
97+
tbody.insertAdjacentHTML("beforeend", productRow);
98+
}
99+
}
100+

‎style.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.bucketPanel{
2+
width: 400px;
3+
padding: 1-px;
4+
}
5+
6+
.productRemoveBtn:hover{
7+
cursor: pointer;
8+
}

‎task03.html‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Document</title>
6+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
7+
crossorigin="anonymous">
8+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
9+
crossorigin="anonymous">
10+
<link rel="stylesheet" href="style.css">
11+
</head>
12+
<body>
13+
<div class="container">
14+
<nav class="navbar navbar-light bg-dark">
15+
<div class="btn-group ml-auto">
16+
<button class="btn btn-light btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
17+
aria-expanded="false">
18+
Корзина
19+
</button>
20+
<div class="dropdown-menu dropdown-menu-right basketPanel">
21+
<table class="table table-hover">
22+
<thead>
23+
<tr>
24+
<th scope="col">ID</th>
25+
<th scope="col">Имя</th>
26+
<th scope="col">Цена</th>
27+
<th scope="col">Количество</th>
28+
<th scope="col"></th>
29+
</tr>
30+
</thead>
31+
<tbody></tbody>
32+
<tfoot>
33+
<tr>
34+
<th colspan="2" scope="row">Итого:</th>
35+
<td colspan="3">
36+
<span class="total">0</span>
37+
<i class="fas fa-ruble-sign"></i>
38+
</td>
39+
</tr>
40+
</tfoot>
41+
</table>
42+
</div>
43+
</div>
44+
</nav>
45+
46+
<br>
47+
48+
<div class="row">
49+
<div class="col-4">
50+
<div>Товар 1</div>
51+
<img src="https://placeimg.com/640/480/nature" alt="..." class="img-thumbnail">
52+
<div>
53+
<span class="productPrice">120</span>
54+
<i class="fas fa-ruble-sign"></i>
55+
</div>
56+
<button type="button"
57+
class="btn btn-success mt-3 toBasketBtn"
58+
data-id="1"
59+
data-price="120"
60+
data-name="Товар 1"
61+
>
62+
В корзину
63+
</button>
64+
</div>
65+
<div class="col-4">
66+
<div>Товар 2</div>
67+
<img src="https://placeimg.com/640/480/arch" alt="..." class="img-thumbnail">
68+
<div>
69+
<span class="productPrice">75</span>
70+
<i class="fas fa-ruble-sign"></i>
71+
</div>
72+
<button type="button"
73+
class="btn btn-success mt-3 toBasketBtn"
74+
data-id="2"
75+
data-price="75"
76+
data-name="Товар 2"
77+
>
78+
В корзину
79+
</button>
80+
</div>
81+
<div class="col-4">
82+
<div>Товар 3</div>
83+
<img src="https://placeimg.com/640/480/tech" alt="..." class="img-thumbnail">
84+
<div>
85+
<span class="productPrice">3000</span>
86+
<i class="fas fa-ruble-sign"></i>
87+
</div>
88+
<button type="button"
89+
class="btn btn-success mt-3 toBasketBtn"
90+
data-id="3"
91+
data-price="3000"
92+
data-name="Товар 3"
93+
>
94+
В корзину
95+
</button>
96+
</div>
97+
</div>
98+
</div>
99+
<!-- Optional JavaScript -->
100+
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
101+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
102+
crossorigin="anonymous"></script>
103+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
104+
crossorigin="anonymous"></script>
105+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
106+
crossorigin="anonymous"></script>
107+
<script src="script.js"></script>
108+
</body>
109+
</html>

0 commit comments

Comments
 (0)