From 562784525ed8c9bc48a41a876e5f6dd29cb9251b Mon Sep 17 00:00:00 2001 From: Anwishta Date: Fri, 4 Oct 2024 23:30:26 +0530 Subject: [PATCH 1/5] Cart added --- Cart/cart.css | 192 +++++++++++++++++++++++++++++++++++++++++++++++++ Cart/cart.html | 30 ++++++++ Cart/cart.js | 113 +++++++++++++++++++++++++++++ index.html | 16 ++--- style.css | 8 ++- 5 files changed, 350 insertions(+), 9 deletions(-) create mode 100644 Cart/cart.css create mode 100644 Cart/cart.html create mode 100644 Cart/cart.js diff --git a/Cart/cart.css b/Cart/cart.css new file mode 100644 index 00000000..ff7eb572 --- /dev/null +++ b/Cart/cart.css @@ -0,0 +1,192 @@ + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: sans-serif; + font-size: 18px; + transition: all .2s linear; +} +body{ + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} +.header{ + height: 80px; + width: 90%; + background: linear-gradient(#ff459f, #ff9532); + border-radius: 3px; + margin: 30px 0px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 15px; +} +.header .logo{ + font-size: 30px; + font-weight: bold; + color: white; + text-transform: uppercase; +} +.cart{ + display: flex; + background-color: white; + justify-content: space-between; + align-items: center; + padding: 7px 10px; + border-radius: 3px; + width: 80px; +} +.fa-solid{ + color: #ff6062; +} +.cart p{ + height: 22px; + width: 22px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 22px; + background: linear-gradient(#ff459f, #ff9532); + color: white; +} +.container{ + display: flex; + width: 90%; + margin-bottom: 30px; +} +#root{ + width: 100%; + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-gap: 20px; +} +.sidebar{ + width: 25%; + border-radius: 5px; + background-color: #eee; + margin-left: 20px; + padding: 15px; + text-align: center; + display: none; +} +.head{ + background: linear-gradient(#ff459f, #ff9532); + border-radius: 3px; + height: 40px; + padding: 10px; + margin-bottom: 20px; + color: white; + display: flex; + align-items: center; + justify-content: space-between; +} +#closed{ + position: relative; + left: 150%; + cursor: pointer; +} +.foot{ + display: flex; + justify-content: space-between; + margin: 20px 0px; + padding: 10px 0px; + border-top: 1px solid #333; +} +.box{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + border: 1.5px solid rgb(#ff3527); + border-radius: 5px; + padding: 15px; + box-shadow: 5px 4px 6px rgb(107, 105, 105); +} +.box:hover{ + box-shadow: 5px 4px 15px #dd446f; +} +.img-box{ + width: 100%; + height: 180px; + display: flex; + align-items: center; + justify-content: center; +} +.images{ + max-width: 90%; + max-height: 90%; + object-fit: cover; + object-position: center; +} +.images:hover{ + transform: scale(1.1); +} +.bottom{ + margin-top: 20px; + width: 100%; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + height: 110px; +} +h2{ + font-size: 20px; + color: red; +} +button{ + width: 100%; + position: relative; + border: none; + border-radius: 20px; + background: linear-gradient(#ff459f, #ff9532); + padding: 7px 25px; + cursor: pointer; + color: white; + font-family: 'Times New Roman', Times, serif; + font-weight: bolder; + margin-bottom: 12px; +} +button:hover{ + background-color: #333; +} +.cart-item{ + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px; + background-color: white; + border-bottom: 1px solid #aaa; + border-radius: 3px; + margin: 10px 10px; +} +.row-img{ + width: 50px; + height: 50px; + border-radius: 50px; + border: 1px solid rgb(#ff3527); + display: flex; + align-items: center; + justify-content: center; +} +.rowimg{ + max-width: 43px; + max-height: 43px; + border-radius: 50%; +} +.fa-trash:hover{ + cursor: pointer; + color: #333;} + +p{ + font-weight: bolder; + font-size: 20px; +} +.add-btn a{ + color: white; + +} \ No newline at end of file diff --git a/Cart/cart.html b/Cart/cart.html new file mode 100644 index 00000000..0822aa55 --- /dev/null +++ b/Cart/cart.html @@ -0,0 +1,30 @@ + + + + CartPage + + + + + + + +
+ + +

0

+
+
+
+ +
+ + + \ No newline at end of file diff --git a/Cart/cart.js b/Cart/cart.js new file mode 100644 index 00000000..8da3b72e --- /dev/null +++ b/Cart/cart.js @@ -0,0 +1,113 @@ +const product = [ + { + id: 0, + image: '../images/controller1.png', + title: 'PS4 V2 Dualshock 4', + price: 3999, + }, + { + id: 1, + image: '../images/controller2.png', + title: 'Xbox Wireless Controller', + price: 3499, + }, + { + id: 2, + image: '../images/controller3.png', + title: 'Nintendo Switch Pro Controller', + price: 4999, + }, + { + id: 3, + image: '../images/headset.png', + title: 'SteelSeries Arctis 7', + price: 8999, + }, + { + id: 4, + image: '../images/keyboard.png', + title: 'Razer BlackWidow', + price: 5499, + }, + + { + id: 5, + image: '../images/mouse.png', + title: 'Logitech G502 Hero', + price: 2999, + }, + { + id: 6, + image: '../images/chair.png', + title: 'Secretlab Omega', + price: 24999, +}, + ]; + const categories = [...new Set(product.map((item)=> + {return item}))] + let i=0; + document.getElementById('root').innerHTML = categories.map((item)=> + { + var {image, title, price} = item; + return( + `
+
+ +
+
+

${title}

+

Rs ${price}.00

`+ + ""+ + `
+
` + ) + }).join('') + + var cart =[]; + + function addtocart(a){ + cart.push({...categories[a]}); + displaycart(); + } + function delElement(a){ + cart.splice(a, 1); + displaycart(); + } + + function displaycart(){ + let j = 0, total=0; + document.getElementById("count").innerHTML=cart.length; + if(cart.length==0){ + document.getElementById('cartItem').innerHTML = "Your cart is empty"; + document.getElementById("total").innerHTML = "Rs "+0+".00"; + } + else{ + document.getElementById("cartItem").innerHTML = cart.map((items)=> + { + var {image, title, price} = items; + total=total+price; + document.getElementById("total").innerHTML = "Rs "+total+".00"; + return( + `
+
+ +
+

${title}

+

Rs ${price}.00

`+ + "
" + ); + }).join(''); + } + + + } + let carts= document.getElementById('carts'); + let sidebox = document.getElementById('sidebox'); + let mine = document.getElementById('mine'); + + carts.addEventListener('click', function(){ + sidebox.style.display = 'block'; + }) + mine.addEventListener('click', function(){ + sidebox.style.display = 'none'; + }) \ No newline at end of file diff --git a/index.html b/index.html index 3c83430c..13ddeebf 100644 --- a/index.html +++ b/index.html @@ -52,7 +52,7 @@

Wireless Controllers for PlayStation 4

Add -

Add to cart

+

Add to cart

@@ -83,7 +83,7 @@

Controllers for Xbox One and Series X

Add -

Add to cart

+

Add to cart

@@ -114,7 +114,7 @@

Wireless Controllers for Nintendo Switch

Add -

Add to cart

+

Add to cart

@@ -145,7 +145,7 @@

High Performance Gaming Mouse

Add -

Add to cart

+

Add to cart

@@ -176,7 +176,7 @@

Mechanical Gaming Keyboard

Add -

Add to cart

+

Add to cart

@@ -207,7 +207,7 @@

Wireless Gaming Headset

Add -

Add to cart

+

Add to cart

@@ -238,7 +238,7 @@

Ergonomic Gaming Chair

Add -

Add to cart

+

Add to cart

@@ -286,4 +286,4 @@

Follow Us on

- + \ No newline at end of file diff --git a/style.css b/style.css index 69dd745a..2d144160 100644 --- a/style.css +++ b/style.css @@ -254,6 +254,11 @@ button:hover { font-size: 16px; } +.add-btn a { + text-decoration: none; + color: white; +} + .add-btn:hover { transform: scale(1.1); } @@ -555,4 +560,5 @@ button:hover { #menuList { overflow: hidden; transition: 0.5s; - } \ No newline at end of file + } +} \ No newline at end of file From 3a92d66835875cb09349ccfc94333f0e232da510 Mon Sep 17 00:00:00 2001 From: Anwishta Date: Fri, 4 Oct 2024 23:59:06 +0530 Subject: [PATCH 2/5] cart style --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style.css b/style.css index 7311686b..51fa5404 100644 --- a/style.css +++ b/style.css @@ -629,4 +629,4 @@ button:hover { .scroll-top:hover { background: #ff6062; } - + \ No newline at end of file From a5589ab295a18615848d4f0cf88d4bfb743066be Mon Sep 17 00:00:00 2001 From: Anwishta Date: Sun, 6 Oct 2024 16:21:19 +0530 Subject: [PATCH 3/5] Checkout added --- Cart/cart.css | 14 +++++++++++++- Cart/cart.html | 39 +++++++++++++++++++++++---------------- Cart/cart.js | 5 +++++ index.html | 15 ++++++++------- 4 files changed, 49 insertions(+), 24 deletions(-) diff --git a/Cart/cart.css b/Cart/cart.css index ff7eb572..53e6e4e7 100644 --- a/Cart/cart.css +++ b/Cart/cart.css @@ -189,4 +189,16 @@ p{ .add-btn a{ color: white; -} \ No newline at end of file +} + +#checkoutButton { + width: 100%; + padding: 10px 0; + margin-top: 10px; + font-size: 18px; + color: white; + border: none; + cursor: pointer; + text-align: center; + border-radius: 20px; +} diff --git a/Cart/cart.html b/Cart/cart.html index 0822aa55..253284ed 100644 --- a/Cart/cart.html +++ b/Cart/cart.html @@ -7,24 +7,31 @@ - + -
- - -

0

+
+ +
+ +

0

-
-
- + +
+
+ - +
+ + - \ No newline at end of file + diff --git a/Cart/cart.js b/Cart/cart.js index 8da3b72e..ec25bef3 100644 --- a/Cart/cart.js +++ b/Cart/cart.js @@ -69,6 +69,11 @@ const product = [ cart.push({...categories[a]}); displaycart(); } + function buyNow(a) { + cart.push({ ...categories[a] }); + alert(`${categories[a].title} has been added to your cart!`); + displaycart(); +} function delElement(a){ cart.splice(a, 1); displaycart(); diff --git a/index.html b/index.html index 774ce7a9..67ea1255 100644 --- a/index.html +++ b/index.html @@ -45,7 +45,7 @@

Wireless Controllers for PlayStation 4

Overall Rating:

4.1★

- +
Controller @@ -76,7 +76,7 @@

Controllers for Xbox One and Series X

Overall Rating:

4.8★

- +
Controller @@ -107,7 +107,7 @@

Wireless Controllers for Nintendo Switch

Overall Rating:

4.2★

- +
Controller @@ -138,7 +138,7 @@

High Performance Gaming Mouse

Overall Rating:

5.0★

- +
Gaming Mouse @@ -169,7 +169,7 @@

Mechanical Gaming Keyboard

Overall Rating:

4.5★

- +
Gaming Keyboard @@ -200,7 +200,7 @@

Wireless Gaming Headset

Overall Rating:

4.7★

- +
Gaming Headset @@ -231,7 +231,7 @@

Ergonomic Gaming Chair

Overall Rating:

4.8★

- +
Gaming Chair @@ -299,6 +299,7 @@ + From 3051c06f2f087a1603029a8f571268fd177c4469 Mon Sep 17 00:00:00 2001 From: Anwishta Date: Sun, 6 Oct 2024 16:32:00 +0530 Subject: [PATCH 4/5] comments added --- Cart/cart.js | 230 ++++++++++++++++++++++++++++----------------------- 1 file changed, 126 insertions(+), 104 deletions(-) diff --git a/Cart/cart.js b/Cart/cart.js index ec25bef3..4ce80e1a 100644 --- a/Cart/cart.js +++ b/Cart/cart.js @@ -1,118 +1,140 @@ +// Array of products with their details: id, image, title, and price const product = [ - { - id: 0, - image: '../images/controller1.png', - title: 'PS4 V2 Dualshock 4', - price: 3999, - }, - { - id: 1, - image: '../images/controller2.png', - title: 'Xbox Wireless Controller', - price: 3499, - }, - { - id: 2, - image: '../images/controller3.png', - title: 'Nintendo Switch Pro Controller', - price: 4999, - }, - { - id: 3, - image: '../images/headset.png', - title: 'SteelSeries Arctis 7', - price: 8999, - }, - { - id: 4, - image: '../images/keyboard.png', - title: 'Razer BlackWidow', - price: 5499, - }, - - { - id: 5, - image: '../images/mouse.png', - title: 'Logitech G502 Hero', - price: 2999, - }, - { - id: 6, - image: '../images/chair.png', - title: 'Secretlab Omega', - price: 24999, -}, + { + id: 0, + image: '../images/controller1.png', + title: 'PS4 V2 Dualshock 4', + price: 3999, + }, + { + id: 1, + image: '../images/controller2.png', + title: 'Xbox Wireless Controller', + price: 3499, + }, + { + id: 2, + image: '../images/controller3.png', + title: 'Nintendo Switch Pro Controller', + price: 4999, + }, + { + id: 3, + image: '../images/headset.png', + title: 'SteelSeries Arctis 7', + price: 8999, + }, + { + id: 4, + image: '../images/keyboard.png', + title: 'Razer BlackWidow', + price: 5499, + }, + { + id: 5, + image: '../images/mouse.png', + title: 'Logitech G502 Hero', + price: 2999, + }, + { + id: 6, + image: '../images/chair.png', + title: 'Secretlab Omega', + price: 24999, + }, ]; - const categories = [...new Set(product.map((item)=> - {return item}))] - let i=0; - document.getElementById('root').innerHTML = categories.map((item)=> - { - var {image, title, price} = item; - return( - `
-
- -
-
-

${title}

-

Rs ${price}.00

`+ - ""+ - `
-
` - ) - }).join('') - var cart =[]; + // Create a unique set of categories based on products (though this is unnecessary here) + const categories = [...new Set(product.map((item) => { return item }))]; - function addtocart(a){ - cart.push({...categories[a]}); - displaycart(); + // Initialize index variable for product buttons + let i = 0; + + // Render product items in the HTML by selecting the root element + document.getElementById('root').innerHTML = categories.map((item) => { + // Destructure the product details + var { image, title, price } = item; + + // Return HTML string for each product + return ( + `
+
+ +
+
+

${title}

+

Rs ${price}.00

` + + "" + + `
+
` + ) + }).join(''); + + // Initialize an empty cart array to hold selected products + var cart = []; + + // Function to add an item to the cart + function addtocart(a) { + cart.push({ ...categories[a] }); // Add the selected product to the cart + displaycart(); // Update the cart display } + + // Function to handle the buy now action (similar to add to cart but with an alert) function buyNow(a) { - cart.push({ ...categories[a] }); - alert(`${categories[a].title} has been added to your cart!`); - displaycart(); -} - function delElement(a){ - cart.splice(a, 1); - displaycart(); + cart.push({ ...categories[a] }); // Add product to cart + alert(`${categories[a].title} has been added to your cart!`); // Notify user + displaycart(); // Update the cart display } - function displaycart(){ - let j = 0, total=0; - document.getElementById("count").innerHTML=cart.length; - if(cart.length==0){ - document.getElementById('cartItem').innerHTML = "Your cart is empty"; - document.getElementById("total").innerHTML = "Rs "+0+".00"; - } - else{ - document.getElementById("cartItem").innerHTML = cart.map((items)=> - { - var {image, title, price} = items; - total=total+price; - document.getElementById("total").innerHTML = "Rs "+total+".00"; - return( - `
-
- -
-

${title}

-

Rs ${price}.00

`+ - "
" - ); - }).join(''); + // Function to delete an item from the cart + function delElement(a) { + cart.splice(a, 1); // Remove item at index a from the cart + displaycart(); // Update the cart display } + // Function to display the cart items + function displaycart() { + let j = 0, total = 0; // Initialize index and total price + document.getElementById("count").innerHTML = cart.length; // Display cart count + + // Check if cart is empty + if (cart.length == 0) { + document.getElementById('cartItem').innerHTML = "Your cart is empty"; // Notify empty cart + document.getElementById("total").innerHTML = "Rs " + 0 + ".00"; // Total is zero + } else { + // Map through cart items and generate HTML + document.getElementById("cartItem").innerHTML = cart.map((items) => { + // Destructure item details + var { image, title, price } = items; + total = total + price; // Add item price to total + document.getElementById("total").innerHTML = "Rs " + total + ".00"; // Update total in cart + // Return HTML for each cart item + return ( + `
+
+ +
+

${title}

+

Rs ${price}.00

` + + "
" + ); + }).join(''); + } } - let carts= document.getElementById('carts'); - let sidebox = document.getElementById('sidebox'); - let mine = document.getElementById('mine'); - carts.addEventListener('click', function(){ - sidebox.style.display = 'block'; + // Event listeners for cart toggle functionality + let carts = document.getElementById('carts'); // Element to open cart + let sidebox = document.getElementById('sidebox'); // Sidebar cart + let mine = document.getElementById('mine'); // Element to close cart + + // Open cart sidebar when the cart button is clicked + carts.addEventListener('click', function() { + sidebox.style.display = 'block'; // Show cart sidebar + }) + + // Close cart sidebar when the close button is clicked + mine.addEventListener('click', function() { + sidebox.style.display = 'none'; // Hide cart sidebar }) - mine.addEventListener('click', function(){ - sidebox.style.display = 'none'; - }) \ No newline at end of file + \ No newline at end of file From f510e14ca7fbcc84e909560e50504a2d623f1f62 Mon Sep 17 00:00:00 2001 From: Anwishta Date: Tue, 8 Oct 2024 10:12:03 +0530 Subject: [PATCH 5/5] Merge Conflict resolved --- index.html | 174 +++++++++++++++++--------------- style.css | 286 ++++++++++++++++++++++++++++++++++++++--------------- 2 files changed, 299 insertions(+), 161 deletions(-) diff --git a/index.html b/index.html index c4b732cc..a0f912c1 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,8 @@ Collect your GamingTools + + @@ -23,6 +25,13 @@ + + + +
@@ -54,15 +63,14 @@

Wireless Controllers for PlayStation 4

Overall Rating:

4.1★

- +
+ + +
Controller
-
- Add -

Add to cart

-
@@ -85,15 +93,15 @@

Controllers for Xbox One and Series X

Overall Rating:

4.8★

- +
+ + +
- Controller + Controller
-
- Add -

Add to cart

-
+
@@ -116,15 +124,15 @@

Wireless Controllers for Nintendo Switch

Overall Rating:

4.2★

- +
+ + +
- Controller + Controller
-
- Add -

Add to cart

-
+
@@ -147,15 +155,15 @@

High Performance Gaming Mouse

Overall Rating:

5.0★

- +
+ + +
Gaming Mouse
-
- Add -

Add to cart

-
+
@@ -178,15 +186,15 @@

Mechanical Gaming Keyboard

Overall Rating:

4.5★

- +
+ + +
Gaming Keyboard
-
- Add -

Add to cart

-
+
@@ -209,15 +217,15 @@

Wireless Gaming Headset

Overall Rating:

4.7★

- +
+ + +
Gaming Headset
-
- Add -

Add to cart

-
+
@@ -240,64 +248,65 @@

Ergonomic Gaming Chair

Overall Rating:

4.8★

- +
+ + +
- Gaming Chair + Gaming Chair
-
- Add -

Add to cart

-
+
- -