Skip to content

Commit 16975f8

Browse files
devvsakibdevvsakib
committed
Done
1 parent fd8ae20 commit 16975f8

File tree

5 files changed

+159
-33
lines changed

5 files changed

+159
-33
lines changed

‎ecommerce-product-page/assets/css/style.css‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,11 @@ img {
5656
padding: 25px 0;
5757
}
5858

59+
@media (max-width: 776px) {
60+
.menuContainer {
61+
display: none;
62+
}
63+
}
5964
.menuContainer ul {
6065
display: flex;
6166
}
@@ -94,7 +99,27 @@ img {
9499
.prof .account_profile {
95100
width: 90px;
96101
}
102+
.prof .account_profile #qualty_number {
103+
z-index: 99;
104+
position: absolute;
105+
top: 0px;
106+
right: 3.6rem;
107+
display: none;
108+
bottom: 0;
109+
background-color: red;
110+
width: 18px;
111+
height: 18px;
112+
line-height: 12px;
113+
letter-spacing: 1.5px;
114+
text-align: center;
115+
font-weight: 600;
116+
border-radius: 50%;
117+
font-size: 12px;
118+
color: white;
119+
border: 2px solid white;
120+
}
97121
.prof .account_profile i {
122+
position: relative;
98123
font-size: 17px;
99124
color: var(--dark_grayish_blue);
100125
transition: all 0.3s ease-in-out;
@@ -184,10 +209,26 @@ img {
184209
display: block;
185210
}
186211

212+
.dnone {
213+
display: block;
214+
}
215+
187216
/*========== Product Secion CSS ==========*/
188217
.contWid {
189218
width: 1080px;
190219
}
220+
@media (max-width: 575px) {
221+
.contWid {
222+
display: contents;
223+
align-items: center;
224+
}
225+
}
226+
227+
@media (max-width: 900px) {
228+
.prod_prev_con {
229+
display: contents;
230+
}
231+
}
191232

192233
.prod_img {
193234
width: 410px;

‎ecommerce-product-page/assets/css/style.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ecommerce-product-page/assets/css/style.scss‎

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,9 @@ img {
6464
}
6565

6666
.menuContainer {
67+
@media (max-width: 776px) {
68+
display: none;
69+
}
6770
ul {
6871
display: flex;
6972

@@ -106,12 +109,32 @@ img {
106109

107110
.account_profile {
108111
width: 90px;
112+
113+
#qualty_number{
114+
z-index: 99;
115+
position: absolute;
116+
top: 0px;
117+
right: 3.6rem;
118+
display: none;
119+
bottom: 0;
120+
background-color: red;
121+
width: 18px;
122+
height: 18px;
123+
line-height: 12px;
124+
letter-spacing: 1.5px;
125+
text-align: center;
126+
font-weight: 600;
127+
border-radius: 50%;
128+
font-size: 12px;
129+
color: white;
130+
border: 2px solid white;
131+
}
109132

110-
i {
133+
i{
134+
position: relative;
111135
font-size: 17px;
112136
color: var(--dark_grayish_blue);
113137
transition: all .3s ease-in-out;
114-
115138
&:hover {
116139
color: var(--black);
117140
cursor: pointer;
@@ -223,12 +246,26 @@ img {
223246
.showoff {
224247
display: block;
225248
}
226-
249+
.dnone{
250+
display: block;
251+
}
227252
/*========== Product Secion CSS ==========*/
228253
.contWid {
229254
width: 1080px;
255+
256+
@media (max-width: 575px) {
257+
display: contents;
258+
align-items: center;
259+
}
230260
}
261+
.prod{
262+
}
263+
.prod_prev_con{
264+
@media (max-width: 900px) {
265+
display: contents;
266+
}
231267

268+
}
232269
.prod_img {
233270
width: 410px;
234271

‎ecommerce-product-page/assets/js/script.js‎

Lines changed: 71 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@ const cartItems = document.getElementById('cart_items'),
44
more_img = document.getElementById('more_img'),
55
prev_img = document.getElementById('prev_img'),
66
add_to_cart = document.getElementById('add_to_cart'),
7+
del_item = document.getElementById('del_item'),
8+
qualty_number = document.querySelector('#qualty_number'),
79
for_prev_demo = document.querySelectorAll('.for_prev_demo'),
810
prod_quanty = document.getElementById('prod_quanty');
911

10-
function showOff(params) {
12+
function showOff() {
1113
cartItems.classList.toggle("showoff");
1214
}
1315
let quanty = 0
@@ -45,36 +47,81 @@ for_prev_demo.forEach(element => {
4547
// })
4648
// })
4749
/// Cart Product Add Systems ///
48-
4950
add_to_cart.addEventListener('click', () => {
5051
let getNumberOfQuant = prod_quanty.innerText
5152
getNumberOfQuant = Number.parseInt(getNumberOfQuant, 10)
5253
actualPrice = parseFloat(125.00)
5354
totalPrice = actualPrice * getNumberOfQuant
5455
let cartHtml = `
55-
<div class="cart_title">
56-
<h2>Cart</h2>
57-
</div>
58-
<div class="items">
59-
<div class="item_img">
60-
<img src="./assets/images/image-product-1.jpg" alt="">
61-
</div>
62-
<div class="item_des">
63-
<div class="item_title">
56+
<div class="cart_title">
57+
<h2 id="hhh">Cart</h2>
58+
</div>
59+
<div class="items">
60+
<div class="item_img">
61+
<img src="./assets/images/image-product-1.jpg" alt="">
62+
</div>
63+
<div class="item_des">
64+
<div class="item_title">
6465
<h5>Fall Limited Edition Sneakers</h5>
65-
</div>
66-
<div class="item_quantity">
66+
</div>
67+
<div class="item_quantity">
6768
<span>$125.00 x ${getNumberOfQuant} <span class="" bold_price>$${totalPrice}.00</span></span>
68-
</div>
69-
</div>
70-
<div class="item_delete">
71-
<i class="fa-solid fa-trash"></i>
72-
</div>
73-
</div>
74-
<div class="cart_btn">
69+
</div>
70+
</div>
71+
<div class="item_delete">
72+
<i id="del_item" class="fa-solid fa-trash"></i>
73+
</div>
74+
</div>
75+
<div class="cart_btn">
7576
<button>Checkout</button>
76-
</div>
77-
`
77+
</div>
78+
`
79+
7880
cartItems.innerHTML = ''
79-
cartItems.innerHTML =cartHtml
80-
})
81+
cartItems.innerHTML += cartHtml
82+
qualty_number.style.display = 'block'
83+
qualty_number.innerText = getNumberOfQuant
84+
85+
del_item.addEventListener('click', () => {
86+
console.log(123);
87+
})
88+
89+
})
90+
// if (del_item) {
91+
92+
93+
94+
95+
console.log(2342);
96+
// add_to_cart.addEventListener('click', () => {
97+
// let getNumberOfQuant = prod_quanty.innerText
98+
// getNumberOfQuant = Number.parseInt(getNumberOfQuant, 10)
99+
// actualPrice = parseFloat(125.00)
100+
// totalPrice = actualPrice * getNumberOfQuant
101+
// let cartHtml = `
102+
// <div class="cart_title">
103+
// <h2>Cart</h2>
104+
// </div>
105+
// <div class="items">
106+
// <div class="item_img">
107+
// <img src="./assets/images/image-product-1.jpg" alt="">
108+
// </div>
109+
// <div class="item_des">
110+
// <div class="item_title">
111+
// <h5>Fall Limited Edition Sneakers</h5>
112+
// </div>
113+
// <div class="item_quantity">
114+
// <span>$125.00 x ${getNumberOfQuant} <span class="" bold_price>$${totalPrice}.00</span></span>
115+
// </div>
116+
// </div>
117+
// <div class="item_delete">
118+
// <i id="del_item" class="fa-solid fa-trash"></i>
119+
// </div>
120+
// </div>
121+
// <div class="cart_btn">
122+
// <button>Checkout</button>
123+
// </div>
124+
// `
125+
// cartItems.innerHTML = ''
126+
// cartItems.innerHTML += cartHtml
127+
// })

‎ecommerce-product-page/index.html‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
<div class="col-2">
4444
<div class="prof">
4545
<div class="account_profile d-flex align-items-center justify-content-between">
46+
<p id="qualty_number"></p>
4647
<i onclick="showOff()" class="fa fa-cart-shopping" aria-hidden="true"></i>
4748
<img onclick="showOff()" calss="pp" src="./assets/images/image-avatar.png" alt="">
4849
</div>
@@ -62,9 +63,9 @@ <h5>Your cart is emplty!</h5>
6263
</div>
6364
<!-- Navbar DOne -->
6465
<!-- Product Section -->
65-
<div class="container contWid mt-auto">
66-
<div class="row mt-4 align-items-center">
67-
<div class="col-6">
66+
<div class="container contWid mt-auto align-items-center">
67+
<div class="row flex-sm-column flex-lg-row mt-4 align-items-sm-center prod align-items-center">
68+
<div class="col-6 prod_prev_con">
6869
<div class="prod_img">
6970
<div class="prev_img">
7071
<img id="prev_img" src="./assets/images/image-product-1.jpg" alt="">
@@ -78,7 +79,7 @@ <h5>Your cart is emplty!</h5>
7879
</div>
7980
</div>
8081
</div>
81-
<div class="col-6">
82+
<div class="col-6 mt-md-5">
8283
<div class="prod_details">
8384
<h5>sneakers company</h5>
8485
<h1 class="mt-2">Fall limited edition sneakers</h1>
@@ -94,7 +95,7 @@ <h4>$250.00</h4>
9495
<div class="cart_buttons mt-5 d-flex">
9596
<div class="quantity_btns">
9697
<span id="prod_increase" disabled>+</span>
97-
<span id="prod_quanty">0</span>
98+
<span id="prod_quanty">1</span>
9899
<span id="prod_decrease">-</span>
99100
</div>
100101
<div id="add_to_cart" class="add_to_cart align-items-center d-flex">

0 commit comments

Comments
 (0)