-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcart.html
148 lines (137 loc) · 6.68 KB
/
cart.html
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
<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css"
integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./css/all.min.css" />
<link rel="stylesheet" href="./css/bootstrap.css" />
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<div class="cart">
<h2>سلة المشتريات</h2>
<div class="cartItems">
<div class="item">
<div class="part1">
<img src="./images/item.png" alt="" class="imgItem">
<div class="info">
<h3>موبايل آبل آيفون بشريحتين و 64 جيجا بالإضافة الى كاميرتين</h3>
<p class="price">50,00 رس</p>
</div>
<button class="delItem">
<svg width="9" height="8" viewBox="0 0 9 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.695263 1.13807C0.434912 0.877722 0.434913 0.455612 0.695264 0.195261C0.955617 -0.0650877 1.37772 -0.0650868 1.63807 0.195263L4.49999 3.05718L7.36189 0.195263C7.62225 -0.0650868 8.04438 -0.0650877 8.30473 0.195261C8.56509 0.455612 8.56509 0.877722 8.30473 1.13807L5.44279 3.99999L8.30473 6.86189C8.56509 7.12225 8.56509 7.54438 8.30473 7.80473C8.04438 8.06509 7.62225 8.06509 7.36189 7.80473L4.49999 4.94279L1.63807 7.80473C1.37772 8.06509 0.955617 8.06509 0.695264 7.80473C0.434913 7.54438 0.434912 7.12225 0.695263 6.86189L3.55718 3.99999L0.695263 1.13807Z" fill="#444444"/>
</svg>
</button>
</div>
<span class="line"></span>
<form class="part2">
<div class="counter hide">
<button class="inc" name="add">+</button>
<p class="amount" name="num-tv">1</p>
<button class="dec" name="del">-</button>
</div>
<div class="totalPrice">
<span>المجموع :</span>
<h4>50,000 ر.س</h4>
</div>
</form>
</div>
<div class="item">
<div class="part1">
<img src="./images/item.png" alt="" class="imgItem">
<div class="info">
<h3>موبايل آبل آيفون بشريحتين و 64 جيجا بالإضافة الى كاميرتين</h3>
<p class="price">50,00 رس</p>
</div>
<button class="delItem">
<svg width="9" height="8" viewBox="0 0 9 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.695263 1.13807C0.434912 0.877722 0.434913 0.455612 0.695264 0.195261C0.955617 -0.0650877 1.37772 -0.0650868 1.63807 0.195263L4.49999 3.05718L7.36189 0.195263C7.62225 -0.0650868 8.04438 -0.0650877 8.30473 0.195261C8.56509 0.455612 8.56509 0.877722 8.30473 1.13807L5.44279 3.99999L8.30473 6.86189C8.56509 7.12225 8.56509 7.54438 8.30473 7.80473C8.04438 8.06509 7.62225 8.06509 7.36189 7.80473L4.49999 4.94279L1.63807 7.80473C1.37772 8.06509 0.955617 8.06509 0.695264 7.80473C0.434913 7.54438 0.434912 7.12225 0.695263 6.86189L3.55718 3.99999L0.695263 1.13807Z" fill="#444444"/>
</svg>
</button>
</div>
<span class="line"></span>
<form class="part2">
<div class="counter hide">
<button class="inc" name="add">+</button>
<p class="amount" name="num-tv">1</p>
<button class="dec" name="del">-</button>
</div>
<div class="totalPrice">
<span>المجموع :</span>
<h4>50,000 ر.س</h4>
</div>
</form>
</div>
</div>
<div class="summary">
<h3>ملخص الطلب</h3>
<ul>
<li>
<h4>مجموع المنتجات</h4>
<p>145 رس</p>
</li>
<li>
<h4>الضريبة</h4>
<p>145 رس</p>
</li>
<li>
<h4>تكلفة التوصيل</h4>
<p>145 رس</p>
</li>
</ul>
<div class="code">
<h4>هل لديك كود خصم</h4>
<div class="formCode">
<input type="text" name="" id="" placeholder="أدخل كود الخصم">
<button class="addCode">إضافة</button>
</div>
</div>
<span class="line"></span>
<div class="total">
<h4>الإجمالى</h4>
<p>145 رس</p>
</div>
<div class="tax">الاسعار شاملة للضريبة <span>*</span></div>
<button class="btnDone">إتمام الطلب</button>
</div>
</div>
<script src="./js/jquery-3.6.1.min.js"></script>
<script src="./js/popper.min.js"></script>
<script src="./js/bootstrap.js"></script>
<script>
var del = document.getElementsByName("del");
const add = document.getElementsByName("add")
const val = document.getElementsByName("num-tv")
const counter = function(e){
}
const addcount = []
for(i=0;i<=add.length-1;i++){addcount.push(i)}
addcount.map((addone, index)=>{
del[index].addEventListener("click", function () {
if (+val[index].innerText <= 1) {
val[index].innerText = "1";
} else if(val[index].value = 1 ) {
val[index].innerText = +val[index].innerText - 1;
}
});
add[index].addEventListener("click", function (e) {
e.preventDefault()
val[index].innerText=+val[index].innerText+1;
counter()
})
});
</script>
</body>
</html>