Skip to content

Commit 6969a67

Browse files
DenTheProgrammerDenTheProgrammer
committed
Cart done
1 parent 4a00ab9 commit 6969a67

7 files changed

Lines changed: 113 additions & 0 deletions

File tree

‎Dz-6/Cart/css/style.css‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
*,
2+
*:after,
3+
*:before {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
button {
10+
border: none;
11+
cursor: pointer;
12+
outline: none;
13+
}
14+
15+
.cart {
16+
height: 200px;
17+
background: green;
18+
color: white;
19+
display: flex;
20+
align-items: center;
21+
justify-content: center;
22+
flex-direction: column;
23+
}
24+
25+
.gallery {
26+
background: orange;
27+
display: flex;
28+
justify-content: space-around;
29+
flex-wrap: wrap;
30+
}
31+
32+
.galleryItem {
33+
color: white;
34+
display: flex;
35+
flex-direction: column;
36+
align-items: center;
37+
border: solid 2px red;
38+
margin: 20px;
39+
}
40+
41+
.gallery img {
42+
width: 200px;
43+
margin: 10px;
44+
}
45+
46+
.gallery button {
47+
height: 50px;
48+
width: 100px;
49+
margin: 10px;
50+
}
51+
52+
.gallery .price {
53+
margin: 10px;
54+
}

‎Dz-6/Cart/img/car.jpg‎

34 KB
Loading

‎Dz-6/Cart/img/plane.jpg‎

30.1 KB
Loading

‎Dz-6/Cart/img/ship.jpg‎

24.8 KB
Loading

‎Dz-6/Cart/img/train.jpg‎

40.8 KB
Loading

‎Dz-6/Cart/index.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Cart</title>
8+
<link rel="stylesheet" href="css/style.css">
9+
10+
</head>
11+
12+
<body>
13+
<div class="cart">
14+
<p class="items"></p>
15+
<p class="totalPrice"></p>
16+
</div>
17+
<div class="gallery">
18+
<div class="galleryItem">
19+
<img src="img/car.jpg" alt="">
20+
<p class="name">Car</p>
21+
<p class="price">314$</p>
22+
<button>Add to cart</button>
23+
</div>
24+
<div class="galleryItem">
25+
<img src="img/plane.jpg" alt="">
26+
<p class="name">Plane</p>
27+
<p class="price">1592$</p>
28+
<button>Add to cart</button>
29+
</div>
30+
<div class="galleryItem">
31+
<img src="img/ship.jpg" alt="">
32+
<p class="name">Ship</p>
33+
<p class="price">6535$</p>
34+
<button>Add to cart</button>
35+
</div>
36+
<div class="galleryItem">
37+
<img src="img/train.jpg" alt="">
38+
<p class="name">Train</p>
39+
<p class="price">8979$</p>
40+
<button>Add to cart</button>
41+
</div>
42+
</div>
43+
</body>
44+
<script src="js/main.js"></script>
45+
46+
</html>

‎Dz-6/Cart/js/main.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
var cartNames=[];
2+
var cartPrice=0;
3+
var i;
4+
document.querySelector(".gallery").addEventListener("click", function (e) {
5+
if (e.target.tagName === "BUTTON") {
6+
cartNames.push(e.target.parentElement.childNodes[3].innerHTML);//получаем имя товара
7+
cartPrice+=parseInt(e.target.parentElement.childNodes[5].innerHTML);//цену товара
8+
i++;
9+
}
10+
11+
document.querySelector(".cart .items").innerHTML="Выбранные товары: "+cartNames.join(", ");
12+
document.querySelector(".cart .totalPrice").innerHTML="На общую стоимость "+cartPrice+"$";
13+
})

0 commit comments

Comments
 (0)