From 449ae0b94de19b21fb602476576671b243775b81 Mon Sep 17 00:00:00 2001 From: Risheendra183 Date: Mon, 7 Oct 2024 12:40:30 +0530 Subject: [PATCH] cart in nav added successfully --- index.html | 648 +++++++++++++++++++++++++++++------------------------ script.js | 83 +++++-- 2 files changed, 423 insertions(+), 308 deletions(-) diff --git a/index.html b/index.html index 3e430598..614c7c4f 100644 --- a/index.html +++ b/index.html @@ -1,324 +1,392 @@ - - - - + + + Collect your GamingTools - - - - - + + + + + - -
-
- - Collect your GamingTools - + +
+
+ + Collect your GamingTools + - - - - -
+ + -
-
-
-

Welcome to GamingTools

-

Your one-stop shop for all gaming accessories.

- Explore Products -
-
+ +
- -
-
-

PS4 V2 Dualshock 4

-

Wireless Controllers for PlayStation 4

-

(Compatible/Generic)

-
- ₹5500 - ₹3999 - 30% off -
-
- ★★★★☆ -

(2252 reviews)

-
-
- Overall Rating: -

4.1★

-
-
- - -
-
-
- Controller -
-
+
+
+
+

Welcome to GamingTools

+

Your one-stop shop for all gaming accessories.

+ Explore Products
+
- -
-
-

Xbox Wireless Controller

-

Controllers for Xbox One and Series X

-

(Official)

-
- ₹4500 - ₹3499 - 22% off -
-
- ★★★★★ -

(1189 reviews)

-
-
- Overall Rating: -

4.8★

-
-
- - -
-
-
- Controller -
- -
+ +
+
+

PS4 V2 Dualshock 4

+

Wireless Controllers for PlayStation 4

+

(Compatible/Generic)

+
+ ₹5500 + ₹3999 + 30% off +
+
+ ★★★★☆ +

(2252 reviews)

+
+
+ Overall Rating: +

4.1★

+
+
+ + +
+
+ Controller +
+
+
- -
-
-

Nintendo Switch Pro Controller

-

Wireless Controllers for Nintendo Switch

-

(Official)

-
- ₹6000 - ₹4999 - 17% off -
-
- ★★★★☆ -

(3145 reviews)

-
-
- Overall Rating: -

4.2★

-
-
- - -
-
-
- Controller -
- -
+ +
+
+

Xbox Wireless Controller

+

Controllers for Xbox One and Series X

+

(Official)

+
+ ₹4500 + ₹3499 + 22% off +
+
+ ★★★★★ +

(1189 reviews)

+
+
+ Overall Rating: +

4.8★

+
+
+ + +
+
+
+ Controller + +
+
- -
-
-

Logitech G502 Hero

-

High Performance Gaming Mouse

-

(Wired)

-
- ₹4000 - ₹2999 - 25% off -
-
- ★★★★★ -

(9256 reviews)

-
-
- Overall Rating: -

5.0★

-
-
- - -
-
-
- Gaming Mouse -
- -
+ +
+
+

Nintendo Switch Pro Controller

+

Wireless Controllers for Nintendo Switch

+

(Official)

+
+ ₹6000 + ₹4999 + 17% off +
+
+ ★★★★☆ +

(3145 reviews)

+
+
+ Overall Rating: +

4.2★

+
+
+ + +
+
+ Controller +
+
+
- -
-
-

Razer BlackWidow

-

Mechanical Gaming Keyboard

-

(Wired)

-
- ₹7000 - ₹5499 - 21% off -
-
- ★★★★☆ -

(6184 reviews)

-
-
- Overall Rating: -

4.5★

-
-
- - -
-
-
- Gaming Keyboard -
- -
+ +
+
+

Logitech G502 Hero

+

High Performance Gaming Mouse

+

(Wired)

+
+ ₹4000 + ₹2999 + 25% off +
+
+ ★★★★★ +

(9256 reviews)

+
+
+ Overall Rating: +

5.0★

+
+
+ + +
+
+
+ Gaming Mouse +
+
- -
-
-

SteelSeries Arctis 7

-

Wireless Gaming Headset

-

(Surround Sound)

-
- ₹12000 - ₹8999 - 25% off -
-
- ★★★★★ -

(8452 reviews)

-
-
- Overall Rating: -

4.7★

-
-
- - -
-
-
- Gaming Headset -
- -
+ +
+
+

Razer BlackWidow

+

Mechanical Gaming Keyboard

+

(Wired)

+
+ ₹7000 + ₹5499 + 21% off +
+
+ ★★★★☆ +

(6184 reviews)

+
+
+ Overall Rating: +

4.5★

+
+
+ + +
+
+
+ Gaming Keyboard +
+
- -
-
-

Secretlab Omega

-

Ergonomic Gaming Chair

-

(Adjustable)

-
- ₹30000 - ₹24999 - 17% off -
-
- ★★★★★ -

(3564 reviews)

-
-
- Overall Rating: -

4.8★

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

SteelSeries Arctis 7

+

Wireless Gaming Headset

+

(Surround Sound)

+
+ ₹12000 + ₹8999 + 25% off +
+
+ ★★★★★ +

(8452 reviews)

+
+
+ Overall Rating: +

4.7★

+
+
+ + +
+
+ Gaming Headset +
+
+
+ + +
+
+

Secretlab Omega

+

Ergonomic Gaming Chair

+

(Adjustable)

+
+ ₹30000 + ₹24999 + 17% off +
+
+ ★★★★★ +

(3564 reviews)

+
+
+ Overall Rating: +

4.8★

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

Collect your GamingTools

-
-

- Your one-stop shop for premium gaming accessories. Elevate your gaming experience with our curated selection of controllers, VR gear, and more. -

-
-   123-456-789 -   info@gamingtools.com -
-
- - - - -
-
-
-

Quick Links

- -
-
-

Contact Us

-
- - - -
-
+
+
+
+ +

Collect your GamingTools

+
+

+ Your one-stop shop for premium gaming accessories. Elevate your + gaming experience with our curated selection of controllers, VR + gear, and more. +

+
+   123-456-789 +   info@gamingtools.com +
+
+ + + + +
+
+
+

Quick Links

+
-
- © 2024 GamingTools | Designed by Swaraj +
+

Contact Us

+
+ + + +
- +
+
+ © 2024 GamingTools | Designed by Swaraj +
- +
- - - - + + + diff --git a/script.js b/script.js index ecb88a97..eee2bed2 100644 --- a/script.js +++ b/script.js @@ -2,31 +2,78 @@ var menuList = document.getElementById("menuList"); menuList.style.maxHeight = "0px"; function toggleMenu() { - if (menuList.style.maxHeight == "0px") { - menuList.style.maxHeight = "160px"; - } else { - menuList.style.maxHeight = "0px"; - } + if (menuList.style.maxHeight == "0px") { + menuList.style.maxHeight = "160px"; + } else { + menuList.style.maxHeight = "0px"; + } } -document.addEventListener('DOMContentLoaded', () => { - console.log("Website loaded successfully!"); +let cart = []; +const cartCount = document.getElementById("cart-count"); +const cartList = document.getElementById("cart-list"); +const cartItemsDiv = document.getElementById("cart-items"); + +// Add event listener to all 'Add to Cart' buttons +const cartButtons = document.querySelectorAll("#cart-btn"); + +cartButtons.forEach((button, index) => { + button.addEventListener("click", function () { + const product = `Product ${index + 1}`; // Assuming each product has a unique name like 'Product 1', 'Product 2', etc. + addToCart(product); + }); +}); + +function addToCart(product) { + // Add product to the cart array + cart.push(product); + updateCart(); +} + +function updateCart() { + // Update cart count in the navbar + cartCount.innerText = cart.length; + + // Clear and update the cart list + cartList.innerHTML = ""; + cart.forEach((item, index) => { + const li = document.createElement("li"); + li.innerText = item; + cartList.appendChild(li); + }); + + // Show cart items section if the cart is not empty + if (cart.length > 0) { + cartItemsDiv.style.display = "block"; + } +} + +// Show cart items when clicking on the cart icon +const cartNav = document.getElementById("cart-nav"); +cartNav.addEventListener("click", function () { + // Toggle the visibility of the cart items section + cartItemsDiv.style.display = + cartItemsDiv.style.display === "block" ? "none" : "block"; +}); + +document.addEventListener("DOMContentLoaded", () => { + console.log("Website loaded successfully!"); }); // Show or hide the scroll-top button based on scroll position -window.addEventListener('scroll', function() { - const scrollTopButton = document.querySelector('.scroll-top'); - if (window.pageYOffset > 300) { - scrollTopButton.style.display = 'block'; - } else { - scrollTopButton.style.display = 'none'; - } +window.addEventListener("scroll", function () { + const scrollTopButton = document.querySelector(".scroll-top"); + if (window.pageYOffset > 300) { + scrollTopButton.style.display = "block"; + } else { + scrollTopButton.style.display = "none"; + } }); // Smooth scroll to top when the button is clicked function scrollToTop() { - window.scrollTo({ - top: 0, - behavior: 'smooth' - }); + window.scrollTo({ + top: 0, + behavior: "smooth", + }); }