Skip to content

Commit

Permalink
addtocart
Browse files Browse the repository at this point in the history
  • Loading branch information
@aditya07389
aditya07389 committed Oct 19, 2024
1 parent a3b1228 commit 2966956
Show file tree
Hide file tree
Showing 2 changed files with 100 additions and 20 deletions.
86 changes: 70 additions & 16 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,16 +55,27 @@
<span class="slider"></span>
</label></li>
<!-- Inside the navbar ul -->
<a href="#" class="cart-button">
<a href="#" class="cart-button" id="cart-icon">
<img src="images/cart.png" alt="Cart Icon">
<span id="cart-count">0</span>
</a>
</ul>



<!-- Hamburger Menu Icon -->
<img src="images/menu.png" class="menu-icon" onclick="toggleMenu()">
</nav>
</div>
<div id="cart-popover" class="popover">
<div class="popover-content" id="popover-content">
<p>Your cart is empty</p>

</div>
<div style="align-items: center;">
<button style="border-radius: 4px;">Checkout</button>
</div>
</div>
</nav>

<nav>
Expand Down Expand Up @@ -152,7 +163,7 @@ <h3>Wireless Controllers for PlayStation 4</h3>
</div>
<div class="btn-section">
<button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
<button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
<button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
</div>
</div>
<div class="col-2" data-aos="fade-left">
Expand Down Expand Up @@ -182,7 +193,7 @@ <h3>Controllers for Xbox One and Series X</h3>
</div>
<div class="btn-section">
<button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
<button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
<button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
</div>
</div>
<div class="col-2" data-aos="fade-left">
Expand Down Expand Up @@ -214,7 +225,7 @@ <h3>Wireless Controllers for Nintendo Switch</h3>
</div>
<div class="btn-section">
<button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
<button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
<button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
</div>
</div>
<div class="col-2" data-aos="fade-left">
Expand Down Expand Up @@ -246,7 +257,7 @@ <h3>VR Headset from Meta</h3>
</div>
<div class="btn-section">
<button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
<button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
<button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
</div>
</div>
<div class="col-2" data-aos="fade-left">
Expand Down Expand Up @@ -278,7 +289,7 @@ <h3>VR Headset from Apple</h3>
</div>
<div class="btn-section">
<button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
<button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
<button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
</div>
</div>
<div class="col-2" data-aos="fade-left">
Expand Down Expand Up @@ -310,7 +321,7 @@ <h3>High Performance Gaming Mouse</h3>
</div>
<div class="btn-section">
<button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
<button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
<button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
</div>
</div>
<div class="col-2" data-aos="fade-left">
Expand Down Expand Up @@ -341,7 +352,7 @@ <h3>Mechanical Gaming Keyboard</h3>
</div>
<div class="btn-section">
<button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
<button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
<button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
</div>
</div>
<div class="col-2" data-aos="fade-left">
Expand Down Expand Up @@ -372,7 +383,7 @@ <h3>Wireless Gaming Headset</h3>
</div>
<div class="btn-section">
<button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
<button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
<button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
</div>
</div>
<div class="col-2" data-aos="fade-left">
Expand Down Expand Up @@ -403,7 +414,7 @@ <h3>Ergonomic Gaming Chair</h3>
</div>
<div class="btn-section">
<button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
<button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
<button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
</div>
</div>
<div class="col-2" data-aos="fade-left">
Expand Down Expand Up @@ -719,13 +730,56 @@ <h2>Feedback Form</h2>

<script>
let cartItemCount = 0;

// Function to handle Add to Cart button click
document.getElementById('cart-btn').addEventListener('click', function () {
cartItemCount++; // Increment cart count
document.getElementById('cart-count').textContent = cartItemCount; // Update cart count display
alert('Item added to cart'); // Show alert
let cartItems = [];

// Handle Add to Cart button click for all buttons with the class 'cart-btn'
const cartButtons = document.querySelectorAll('.cart-btn');

cartButtons.forEach((button) => {
button.addEventListener('click', function () {
cartItemCount++; // Increment cart count
document.getElementById('cart-count').textContent = cartItemCount; // Update cart count display

// Get the item name from the closest .col-1 element
const itemName = this.closest('.col-1').querySelector('.card-heading').textContent;

const newItem = `${itemName} ${cartItemCount}`; // Example item, you can change this
cartItems.push(newItem); // Add item to the cart


});
});

// Handle Cart Button click to toggle popover
document.getElementById('cart-icon').addEventListener('click', function (e) {
e.preventDefault();
const popover = document.getElementById('cart-popover');
const popoverContent = document.getElementById('popover-content');

if (cartItems.length > 0) {
popoverContent.innerHTML = ''; // Clear the popover content
cartItems.forEach((item, index) => {
const itemElement = document.createElement('p');
itemElement.textContent = `${index + 1}. ${item}`;
popoverContent.appendChild(itemElement);
});
} else {
popoverContent.innerHTML = '<p>Your cart is empty</p>';
}

// Toggle popover visibility
popover.style.display = popover.style.display === 'block' ? 'none' : 'block';
});

// Close the popover if clicked outside
document.addEventListener('click', function (e) {
const cartButton = document.getElementById('cart-icon');
const popover = document.getElementById('cart-popover');

if (!cartButton.contains(e.target) && !popover.contains(e.target)) {
popover.style.display = 'none';
}
});

</script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
Expand Down
34 changes: 30 additions & 4 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,32 @@ html {
scroll-behavior: smooth;
}

/* Style for the popover */
.popover {
display: none;
position: fixed;
top: 50px;
right: 20px;
background-color: bisque;
border: 1px solid black;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 200px;
height: 200px;
max-height: 300px;
overflow-y: auto;
z-index: 1000;
}


.popover-content {
padding: 10px;
max-height: 200px;

}
.popover-content p{
color: black;
}
html::-webkit-scrollbar {
width: 12px; /* Increased the scrollbar width */
transition: width 0.3s ease;
Expand Down Expand Up @@ -537,7 +563,7 @@ button {
transform: translateX(5px); /* Slightly move the icon to the right on hover */
}

#cart-btn {
.cart-btn {
padding: 12px 14px; /* Padding for the cart button */
display: flex; /* Use flexbox for alignment */
align-items: center; /* Center align items vertically */
Expand All @@ -550,18 +576,18 @@ button {
transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out; /* Transition for background color */
}

#cart-btn:hover {
.cart-btn:hover {
width: 160px; /* Increased width on hover */
background-color: #e53935; /* Darker red on hover */
}

#cart-btn img {
.cart-btn img {
width: 18px; /* Icon size */
opacity: 0; /* Initially hidden */
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Transition for opacity and transform */
}

#cart-btn:hover img {
.cart-btn:hover img {
opacity: 1; /* Fully visible on hover */
transform: translateX(5px); /* Slightly move the icon to the right on hover */
}
Expand Down

0 comments on commit 2966956

Please sign in to comment.