-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcart.html
139 lines (119 loc) · 4.98 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Cart</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.cart-item {
margin: 10px 0;
}
#fardeen {
background-color: #dff0d8;
padding: 10px;
margin-bottom: 20px;
display: none;
}
#checkoutButton {
margin-top: 20px;
}
#orderSummary {
margin-top: 30px;
border-top: 1px solid #ccc;
padding-top: 10px;
}
</style>
</head>
<body>
<div id="fardeen">
<p id="waqas"></p>
</div>
<h2>Products</h2>
<div>
<button class="button" onclick="addToCart('Product 1', 29.99)">Add Product 1 - $29.99</button>
<button class="button" onclick="addToCart('Product 2', 19.99)">Add Product 2 - $19.99</button>
<button class="button" onclick="addToCart('Product 3', 39.99)">Add Product 3 - $39.99</button>
</div>
<h2>Your Cart</h2>
<div id="cartItems"></div>
<button id="checkoutButton" style="display:none;" onclick="checkout()">Checkout</button>
<h2>Order Summary</h2>
<div id="orderSummary"></div>
<script>
let cart = []; // Array to hold cart items
// Function to add a product to the cart
function addToCart(product, price) {
// Create a product object with name and price
const productItem = { name: product, price: price };
// Add the product to the cart array
cart.push(productItem);
// Display a message that the item has been added to the cart
const messageBox = document.getElementById('fardeen');
const messageText = document.getElementById('waqas');
messageText.textContent = product + ' has been added to your cart!';
messageBox.style.display = 'block';
// Hide the message after 3 seconds
setTimeout(function() {
messageBox.style.display = 'none';
}, 3000);
// Update the cart display and order summary
updateCart();
updateOrderSummary();
}
// Function to update the cart display
function updateCart() {
const cartItemsContainer = document.getElementById('cartItems');
cartItemsContainer.innerHTML = ''; // Clear previous cart items
if (cart.length === 0) {
cartItemsContainer.innerHTML = '<p>Your cart is empty.</p>';
document.getElementById('checkoutButton').style.display = 'none'; // Hide checkout button if the cart is empty
} else {
cart.forEach((item, index) => {
const cartItem = document.createElement('div');
cartItem.classList.add('cart-item');
cartItem.innerHTML = `
<p>${item.name} - $${item.price.toFixed(2)}</p>
<button class="button" onclick="removeFromCart(${index})">Remove</button>
`;
cartItemsContainer.appendChild(cartItem);
});
document.getElementById('checkoutButton').style.display = 'block'; // Show checkout button
}
}
// Function to update the order summary
function updateOrderSummary() {
const orderSummaryContainer = document.getElementById('orderSummary');
orderSummaryContainer.innerHTML = ''; // Clear previous order summary
let totalPrice = 0;
if (cart.length === 0) {
orderSummaryContainer.innerHTML = '<p>Your order summary is empty.</p>';
} else {
cart.forEach(item => {
const summaryItem = document.createElement('div');
summaryItem.innerHTML = `${item.name} - $${item.price.toFixed(2)}`;
orderSummaryContainer.appendChild(summaryItem);
totalPrice += item.price; // Accumulate total price
});
const totalElement = document.createElement('div');
totalElement.innerHTML = `<strong>Total: $${totalPrice.toFixed(2)}</strong>`;
orderSummaryContainer.appendChild(totalElement);
}
}
// Function to remove an item from the cart
function removeFromCart(index) {
cart.splice(index, 1); // Remove the item at the given index
updateCart(); // Update the cart display
updateOrderSummary(); // Update the order summary after removal
}
// Function to handle checkout
function checkout() {
alert('Proceeding to checkout with items: ' + cart.map(item => item.name).join(', '));
// Redirect to checkout page or handle checkout logic
}
</script>
</body>
</html>