Hugging Face's logo

Spaces:
KingNish
/
test-space
Running

App Files Community
29
KingNish smolSWE commited on
Commit
c821e69
·
verified ·
1 Parent(s): ffcde35

Implement product page, cart, and checkout functionality with icons and animations (#28)

Browse files

- Implement product page, cart, and checkout functionality with icons and animations (583e3036e36f4c04ade47e9ea0f027f2d54abe62)


Co-authored-by: smolSWE Bot <smolSWE@users.noreply.huggingface.co>

Files changed (7) hide show
  1. cart.html +55 -2
  2. checkout.html +99 -67
  3. data.js +1 -1
  4. index.html +29 -198
  5. product.html +43 -129
  6. script.js +33 -270
  7. style.css +17 -0
cart.html CHANGED
@@ -1,4 +1,3 @@
1
-
2
  <!DOCTYPE html>
3
  <html lang="en">
4
  <head>
@@ -43,5 +42,59 @@
43
  </footer>
44
 
45
  <script src="script.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
46
  </body>
47
- </html>
 
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
 
42
  </footer>
43
 
44
  <script src="script.js"></script>
45
+ <script>
46
+ function updateCartPage() {
47
+ const cartItems = getCartItems();
48
+ const cartItemsContainer = document.getElementById('cart-items');
49
+ const subtotalElement = document.getElementById('subtotal');
50
+ const totalElement = document.getElementById('total');
51
+
52
+ cartItemsContainer.innerHTML = ''; // Clear existing cart items
53
+
54
+ let subtotal = 0;
55
+
56
+ cartItems.forEach(item => {
57
+ const cartItemDiv = document.createElement('div');
58
+ cartItemDiv.classList.add('cart-item', 'flex', 'items-center', 'justify-between', 'border', 'p-4');
59
+
60
+ const imageElement = document.createElement('img');
61
+ imageElement.src = item.image;
62
+ imageElement.alt = item.name;
63
+ imageElement.classList.add('h-20', 'w-20', 'object-cover');
64
+ cartItemDiv.appendChild(imageElement);
65
+
66
+ const nameElement = document.createElement('p');
67
+ nameElement.textContent = item.name;
68
+ cartItemDiv.appendChild(nameElement);
69
+
70
+ const priceElement = document.createElement('p');
71
+ priceElement.textContent = `$${item.price}`;
72
+ cartItemDiv.appendChild(priceElement);
73
+
74
+ const quantityElement = document.createElement('p');
75
+ quantityElement.textContent = `Quantity: ${item.quantity}`;
76
+ cartItemDiv.appendChild(quantityElement);
77
+
78
+ const removeButton = document.createElement('button');
79
+ removeButton.textContent = 'Remove';
80
+ removeButton.classList.add('bg-red-500', 'text-white', 'px-2', 'py-1', 'rounded-md', 'hover:bg-red-400');
81
+ removeButton.addEventListener('click', () => {
82
+ removeFromCart(item.id);
83
+ });
84
+ cartItemDiv.appendChild(removeButton);
85
+
86
+ cartItemsContainer.appendChild(cartItemDiv);
87
+
88
+ subtotal += item.price * item.quantity;
89
+ });
90
+
91
+ subtotalElement.textContent = `$${subtotal.toFixed(2)}`;
92
+ const total = subtotal + 5; // Shipping is $5
93
+ totalElement.textContent = `$${total.toFixed(2)}`;
94
+ }
95
+
96
+ // Call updateCartPage on page load
97
+ updateCartPage();
98
+ </script>
99
  </body>
100
+ </html>
checkout.html CHANGED
@@ -3,79 +3,111 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Checkout - Amazon Clone</title>
7
- <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
8
  <link rel="stylesheet" href="style.css">
 
9
  </head>
10
- <body>
11
- <nav class="bg-gray-800 p-4 text-white">
12
- <div class="container mx-auto flex items-center justify-between">
13
- <a href="/" class="text-2xl font-bold">Amazon</a>
14
- <div class="flex items-center">
15
- <input type="text" placeholder="Search" class="bg-gray-700 text-white px-4 py-2 rounded-md mr-2">
16
- <button class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400">Search</button>
17
- </div>
18
- <div>
19
- <a href="/cart.html" class="hover:text-yellow-500">Cart</a>
 
 
 
 
 
 
 
 
 
 
20
  </div>
21
  </div>
22
- </nav>
23
 
24
- <main class="container mx-auto mt-8">
25
- <h1 class="text-2xl font-bold mb-4">Checkout</h1>
26
- <div class="grid grid-cols-2 gap-8">
27
- <div>
28
- <h2 class="text-xl font-bold mb-2">Shipping Information</h2>
29
- <form id="checkout-form">
30
- <div class="mb-4">
31
- <label for="name" class="block text-gray-700 text-sm font-bold mb-2">Name:</label>
32
- <input type="text" id="name" name="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
33
- </div>
34
- <div class="mb-4">
35
- <label for="address" class="block text-gray-700 text-sm font-bold mb-2">Address:</label>
36
- <input type="text" id="address" name="address" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
37
- </div>
38
- <div class="mb-4">
39
- <label for="city" class="block text-gray-700 text-sm font-bold mb-2">City:</label>
40
- <input type="text" id="city" name="city" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
41
- </div>
42
- <div class="mb-4">
43
- <label for="state" class="block text-gray-700 text-sm font-bold mb-2">State:</label>
44
- <input type="text" id="state" name="state" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
45
- </div>
46
- <div class="mb-4">
47
- <label for="zip" class="block text-gray-700 text-sm font-bold mb-2">Zip Code:</label>
48
- <input type="text" id="zip" name="zip" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
49
- </div>
50
- <h2 class="text-xl font-bold mb-2">Payment Information</h2>
51
- <div class="mb-4">
52
- <label for="credit_card" class="block text-gray-700 text-sm font-bold mb-2">Credit Card Number:</label>
53
- <input type="text" id="credit_card" name="credit_card" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
54
- </div>
55
- <div class="mb-4">
56
- <label for="expiration_date" class="block text-gray-700 text-sm font-bold mb-2">Expiration Date:</label>
57
- <input type="text" id="expiration_date" name="expiration_date" placeholder="MM/YY" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
58
- </div>
59
- <div class="mb-4">
60
- <label for="cvv" class="block text-gray-700 text-sm font-bold mb-2">CVV:</label>
61
- <input type="text" id="cvv" name="cvv" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
62
- </div>
63
- <button type="submit" class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400">Place Order</button>
64
- </form>
65
- </div>
66
- <div>
67
- <h2 class="text-xl font-bold mb-2">Order Summary</h2>
68
- <p>Subtotal: <span id="subtotal">$0.00</span></p>
69
- <p>Shipping: <span id="shipping">$5.00</span></p>
70
- <p class="font-bold">Total: <span id="total">$0.00</span></p>
71
- </div>
72
  </div>
73
- </main>
74
 
75
- <footer class="bg-gray-800 p-4 text-white text-center mt-8">
76
- <p>&copy; 2024 Amazon Clone</p>
77
- </footer>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
78
 
79
- <script src="script.js"></script>
 
 
 
 
 
 
 
80
  </body>
81
- </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Checkout</title>
 
7
  <link rel="stylesheet" href="style.css">
8
+ <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
9
  </head>
10
+ <body class="bg-gray-100">
11
+ <div class="container mx-auto p-8">
12
+ <h1 class="text-2xl font-bold mb-4">Checkout</h1>
13
+
14
+ <div id="cart-summary" class="mb-8">
15
+ <h2 class="text-xl font-semibold mb-2">Cart Summary</h2>
16
+ <table class="table-auto w-full">
17
+ <thead>
18
+ <tr>
19
+ <th class="px-4 py-2">Product</th>
20
+ <th class="px-4 py-2">Name</th>
21
+ <th class="px-4 py-2">Quantity</th>
22
+ <th class="px-4 py-2">Price</th>
23
+ </tr>
24
+ </thead>
25
+ <tbody id="cart-items">
26
+ </tbody>
27
+ </table>
28
+ <div class="mt-4 font-bold">
29
+ Total: <span id="cart-total"></span>
30
  </div>
31
  </div>
 
32
 
33
+ <div id="shipping-info" class="mb-8">
34
+ <h2 class="text-xl font-semibold mb-2">Shipping Information</h2>
35
+ <form id="shipping-form" class="max-w-lg">
36
+ <div class="mb-4">
37
+ <label for="name" class="block text-gray-700 text-sm font-bold mb-2">Name:</label>
38
+ <input type="text" id="name" name="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
39
+ </div>
40
+ <div class="mb-4">
41
+ <label for="address" class="block text-gray-700 text-sm font-bold mb-2">Address:</label>
42
+ <input type="text" id="address" name="address" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
43
+ </div>
44
+ <div class="mb-4">
45
+ <label for="city" class="block text-gray-700 text-sm font-bold mb-2">City:</label>
46
+ <input type="text" id="city" name="city" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
47
+ </div>
48
+ <div class="mb-4">
49
+ <label for="zip" class="block text-gray-700 text-sm font-bold mb-2">Zip Code:</label>
50
+ <input type="text" id="zip" name="zip" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
51
+ </div>
52
+ </form>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
53
  </div>
 
54
 
55
+ <div id="payment-info" class="mb-8">
56
+ <h2 class="text-xl font-semibold mb-2">Payment Information</h2>
57
+ <form id="payment-form" class="max-w-lg">
58
+ <div class="mb-4">
59
+ <label for="card-number" class="block text-gray-700 text-sm font-bold mb-2">Card Number:</label>
60
+ <input type="text" id="card-number" name="card-number" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
61
+ </div>
62
+ <div class="mb-4">
63
+ <label for="expiry" class="block text-gray-700 text-sm font-bold mb-2">Expiry Date:</label>
64
+ <input type="text" id="expiry" name="expiry" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
65
+ </div>
66
+ <div class="mb-4">
67
+ <label for="cvv" class="block text-gray-700 text-sm font-bold mb-2">CVV:</label>
68
+ <input type="text" id="cvv" name="cvv" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
69
+ </div>
70
+ </form>
71
+ </div>
72
+
73
+ <button id="place-order" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Place Order</button>
74
+
75
+ <div id="confirmation-message" class="mt-8 text-green-500 font-bold hidden">
76
+ Your order has been placed!
77
+ </div>
78
+ </div>
79
+
80
+ <script>
81
+ document.addEventListener('DOMContentLoaded', function () {
82
+ const cartItems = JSON.parse(localStorage.getItem('cart')) || [];
83
+ const cartItemsContainer = document.getElementById('cart-items');
84
+ const cartTotalElement = document.getElementById('cart-total');
85
+ const placeOrderButton = document.getElementById('place-order');
86
+ const confirmationMessage = document.getElementById('confirmation-message');
87
+
88
+ let cartTotal = 0;
89
+
90
+ cartItems.forEach(item => {
91
+ const row = document.createElement('tr');
92
+ row.innerHTML = `
93
+ <td class="px-4 py-2"><img src="${item.image}" alt="${item.name}" class="w-16 h-16"></td>
94
+ <td class="px-4 py-2">${item.name}</td>
95
+ <td class="px-4 py-2">${item.quantity}</td>
96
+ <td class="px-4 py-2">$${item.price * item.quantity}</td>
97
+ `;
98
+ cartItemsContainer.appendChild(row);
99
+ cartTotal += item.price * item.quantity;
100
+ });
101
+
102
+ cartTotalElement.textContent = '$' + cartTotal;
103
 
104
+ placeOrderButton.addEventListener('click', function () {
105
+ confirmationMessage.classList.remove('hidden');
106
+ localStorage.removeItem('cart');
107
+ cartItemsContainer.innerHTML = '';
108
+ cartTotalElement.textContent = '$0';
109
+ });
110
+ });
111
+ </script>
112
  </body>
113
+ </html>
data.js CHANGED
@@ -1,5 +1,5 @@
1
 
2
- const products = [
3
  {
4
  id: "1",
5
  name: "Product 1",
 
1
 
2
+ export const products = [
3
  {
4
  id: "1",
5
  name: "Product 1",
index.html CHANGED
@@ -39,187 +39,31 @@
39
  <section class="product-listing">
40
  <h2 class="text-2xl font-bold mb-4">Products</h2>
41
  <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
42
- <!-- Product 1 -->
43
-
44
- <a href="product.html?id=product-1" class="product-card">
45
- <img src="https://placehold.co/200x300" alt="Product 1" class="w-full rounded-md">
46
- <h3 class="text-lg font-semibold">Product 1</h3>
47
- <p class="text-gray-600">$19.99</p>
48
- <div class="flex items-center">
49
- <i class="fas fa-star text-yellow-500"></i>
50
- <i class="fas fa-star text-yellow-500"></i>
51
- <i class="fas fa-star text-yellow-500"></i>
52
- <i class="fas fa-star text-yellow-500"></i>
53
- <i class="fas fa-star-half-alt text-yellow-500"></i>
54
- <span class="text-gray-600 ml-2">4.5</span>
55
- </div>
56
- </a>
57
-
58
- <div class="flex items-center">
59
- <i class="fas fa-star text-yellow-500"></i>
60
- <i class="fas fa-star text-yellow-500"></i>
61
- <i class="fas fa-star text-yellow-500"></i>
62
- <i class="fas fa-star text-yellow-500"></i>
63
- <i class="fas fa-star-half-alt text-yellow-500"></i>
64
- <span class="text-gray-600 ml-2">4.5</span>
65
- </div>
66
- </div>
67
- <!-- Product 2 -->
68
-
69
- <a href="product.html?id=product-2" class="product-card">
70
- <img src="https://placehold.co/200x300" alt="Product 2" class="w-full rounded-md">
71
- <h3 class="text-lg font-semibold">Product 2</h3>
72
- <p class="text-gray-600">$19.99</p>
73
- <div class="flex items-center">
74
- <i class="fas fa-star text-yellow-500"></i>
75
- <i class="fas fa-star text-yellow-500"></i>
76
- <i class="fas fa-star text-yellow-500"></i>
77
- <i class="fas fa-star text-yellow-500"></i>
78
- <i class="fas fa-star-half-alt text-yellow-500"></i>
79
- <span class="text-gray-600 ml-2">4.5</span>
80
- </div>
81
- </a>
82
-
83
- <div class="flex items-center">
84
- <i class="fas fa-star text-yellow-500"></i>
85
- <i class="fas fa-star text-yellow-500"></i>
86
- <i class="fas fa-star text-yellow-500"></i>
87
- <i class="fas fa-star text-yellow-500"></i>
88
- <i class="fas fa-star text-yellow-500"></i>
89
- <span class="text-gray-600 ml-2">5.0</span>
90
- </div>
91
- </div>
92
- <!-- Product 3 -->
93
-
94
- <a href="product.html?id=product-3" class="product-card">
95
- <img src="https://placehold.co/200x300" alt="Product 3" class="w-full rounded-md">
96
- <h3 class="text-lg font-semibold">Product 3</h3>
97
- <p class="text-gray-600">$19.99</p>
98
- <div class="flex items-center">
99
- <i class="fas fa-star text-yellow-500"></i>
100
- <i class="fas fa-star text-yellow-500"></i>
101
- <i class="fas fa-star text-yellow-500"></i>
102
- <i class="fas fa-star text-yellow-500"></i>
103
- <i class="fas fa-star-half-alt text-yellow-500"></i>
104
- <span class="text-gray-600 ml-2">4.5</span>
105
- </div>
106
- </a>
107
-
108
- <div class="flex items-center">
109
- <i class="fas fa-star text-yellow-500"></i>
110
- <i class="fas fa-star text-yellow-500"></i>
111
- <i class="fas fa-star text-yellow-500"></i>
112
- <i class="fas fa-star-half-alt text-yellow-500"></i>
113
- <i class="far fa-star text-yellow-500"></i>
114
- <span class="text-gray-600 ml-2">3.5</span>
115
- </div>
116
- </div>
117
- <!-- Product 4 -->
118
-
119
- <a href="product.html?id=product-4" class="product-card">
120
- <img src="https://placehold.co/200x300" alt="Product 4" class="w-full rounded-md">
121
- <h3 class="text-lg font-semibold">Product 4</h3>
122
- <p class="text-gray-600">$19.99</p>
123
- <div class="flex items-center">
124
- <i class="fas fa-star text-yellow-500"></i>
125
- <i class="fas fa-star text-yellow-500"></i>
126
- <i class="fas fa-star text-yellow-500"></i>
127
- <i class="fas fa-star text-yellow-500"></i>
128
- <i class="fas fa-star-half-alt text-yellow-500"></i>
129
- <span class="text-gray-600 ml-2">4.5</span>
130
- </div>
131
- </a>
132
-
133
- <div class="flex items-center">
134
- <i class="fas fa-star text-yellow-500"></i>
135
- <i class="fas fa-star text-yellow-500"></i>
136
- <i class="fas fa-star text-yellow-500"></i>
137
- <i class="fas fa-star text-yellow-500"></i>
138
- <i class="far fa-star text-yellow-500"></i>
139
- <span class="text-gray-600 ml-2">4.0</span>
140
- </div>
141
- </div>
142
- <!-- Product 5 -->
143
-
144
- <a href="product.html?id=product-5" class="product-card">
145
- <img src="https://placehold.co/200x300" alt="Product 5" class="w-full rounded-md">
146
- <h3 class="text-lg font-semibold">Product 5</h3>
147
- <p class="text-gray-600">$19.99</p>
148
- <div class="flex items-center">
149
- <i class="fas fa-star text-yellow-500"></i>
150
- <i class="fas fa-star text-yellow-500"></i>
151
- <i class="fas fa-star text-yellow-500"></i>
152
- <i class="fas fa-star text-yellow-500"></i>
153
- <i class="fas fa-star-half-alt text-yellow-500"></i>
154
- <span class="text-gray-600 ml-2">4.5</span>
155
- </div>
156
- </a>
157
-
158
- <div class="flex items-center">
159
- <i class="fas fa-star text-yellow-500"></i>
160
- <i class="fas fa-star text-yellow-500"></i>
161
- <i class="fas fa-star text-yellow-500"></i>
162
- <i class="fas fa-star text-yellow-500"></i>
163
- <i class="fas fa-star-half-alt text-yellow-500"></i>
164
- <span class="text-gray-600 ml-2">4.5</span>
165
- </div>
166
- </div>
167
- <!-- Product 6 -->
168
-
169
- <a href="product.html?id=product-6" class="product-card">
170
- <img src="https://placehold.co/200x300" alt="Product 6" class="w-full rounded-md">
171
- <h3 class="text-lg font-semibold">Product 6</h3>
172
- <p class="text-gray-600">$19.99</p>
173
- <div class="flex items-center">
174
- <i class="fas fa-star text-yellow-500"></i>
175
- <i class="fas fa-star text-yellow-500"></i>
176
- <i class="fas fa-star text-yellow-500"></i>
177
- <i class="fas fa-star text-yellow-500"></i>
178
- <i class="fas fa-star-half-alt text-yellow-500"></i>
179
- <span class="text-gray-600 ml-2">4.5</span>
180
  </div>
181
- </a>
182
-
183
- <div class="flex items-center">
184
- <i class="fas fa-star text-yellow-500"></i>
185
- <i class="fas fa-star text-yellow-500"></i>
186
- <i class="fas fa-star text-yellow-500"></i>
187
- <i class="fas fa-star text-yellow-500"></i>
188
- <i class="fas fa-star text-yellow-500"></i>
189
- <span class="text-gray-600 ml-2">5.0</span>
190
- </div>
191
- </div>
192
- <!-- Product 7 -->
193
-
194
- <a href="product.html?id=product-7" class="product-card">
195
- <img src="https://placehold.co/200x300" alt="Product 7" class="w-full rounded-md">
196
- <h3 class="text-lg font-semibold">Product 7</h3>
197
- <p class="text-gray-600">$19.99</p>
198
- <div class="flex items-center">
199
- <i class="fas fa-star text-yellow-500"></i>
200
- <i class="fas fa-star text-yellow-500"></i>
201
- <i class="fas fa-star text-yellow-500"></i>
202
- <i class="fas fa-star text-yellow-500"></i>
203
- <i class="fas fa-star-half-alt text-yellow-500"></i>
204
- <span class="text-gray-600 ml-2">4.5</span>
205
- </div>
206
- </a>
207
-
208
- <div class="flex items-center">
209
- <i class="fas fa-star text-yellow-500"></i>
210
- <i class="fas fa-star text-yellow-500"></i>
211
- <i class="fas fa-star text-yellow-500"></i>
212
- <i class="fas fa-star-half-alt text-yellow-500"></i>
213
- <i class="far fa-star text-yellow-500"></i>
214
- <span class="text-gray-600 ml-2">3.5</span>
215
- </div>
216
- </div>
217
- <!-- Product 8 -->
218
-
219
- <a href="product.html?id=product-8" class="product-card">
220
- <img src="https://placehold.co/200x300" alt="Product 8" class="w-full rounded-md">
221
- <h3 class="text-lg font-semibold">Product 8</h3>
222
- <p class="text-gray-600">$19.99</p>
223
  <div class="flex items-center">
224
  <i class="fas fa-star text-yellow-500"></i>
225
  <i class="fas fa-star text-yellow-500"></i>
@@ -228,25 +72,12 @@
228
  <i class="fas fa-star-half-alt text-yellow-500"></i>
229
  <span class="text-gray-600 ml-2">4.5</span>
230
  </div>
231
- </a>
232
-
233
- <div class="flex items-center">
234
- <i class="fas fa-star text-yellow-500"></i>
235
- <i class="fas fa-star text-yellow-500"></i>
236
- <i class="fas fa-star text-yellow-500"></i>
237
- <i class="fas fa-star text-yellow-500"></i>
238
- <i class="far fa-star text-yellow-500"></i>
239
- <span class="text-gray-600 ml-2">4.0</span>
240
- </div>
241
- </div>
242
- </div>
243
- </section>
244
- </main>
245
 
246
- <footer class="bg-gray-800 p-4 text-white text-center mt-8">
247
- <p>&copy; 2024 Amazon Clone</p>
248
- </footer>
249
 
250
- <script src="script.js"></script>
 
251
  </body>
252
  </html>
 
39
  <section class="product-listing">
40
  <h2 class="text-2xl font-bold mb-4">Products</h2>
41
  <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
42
  </div>
43
+ </section>
44
+ </main>
45
+
46
+ <footer class="bg-gray-800 p-4 text-white text-center mt-8">
47
+ <p>&copy; 2024 Amazon Clone</p>
48
+ </footer>
49
+
50
+ <script src="script.js"></script>
51
+
52
+ <script type="module">
53
+ import { products } from './data.js';
54
+
55
+ const productListing = document.querySelector('.product-listing .grid');
56
+ productListing.innerHTML = ''; // Clear existing products
57
+
58
+ products.forEach(product => {
59
+ const productCard = document.createElement('a');
60
+ productCard.href = `product.html?id=${product.id}`;
61
+ productCard.className = 'product-card';
62
+
63
+ productCard.innerHTML = `
64
+ <img src="${product.image}" alt="${product.name}" class="w-full rounded-md">
65
+ <h3 class="text-lg font-semibold">${product.name}</h3>
66
+ <p class="text-gray-600">$${product.price.toFixed(2)}</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
67
  <div class="flex items-center">
68
  <i class="fas fa-star text-yellow-500"></i>
69
  <i class="fas fa-star text-yellow-500"></i>
 
72
  <i class="fas fa-star-half-alt text-yellow-500"></i>
73
  <span class="text-gray-600 ml-2">4.5</span>
74
  </div>
75
+ `;
 
 
 
 
 
 
 
 
 
 
 
 
 
76
 
77
+ productListing.appendChild(productCard);
78
+ });
 
79
 
80
+ updateCartIcon();
81
+ </script>
82
  </body>
83
  </html>
product.html CHANGED
@@ -1,150 +1,64 @@
1
-
2
  <!DOCTYPE html>
3
  <html lang="en">
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Product Details - Amazon Clone</title>
8
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
9
  <link rel="stylesheet" href="style.css">
10
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
11
  </head>
12
- <body>
13
- <nav class="bg-gray-800 p-4 text-white">
14
- <div class="container mx-auto flex items-center justify-between">
15
- <a href="/" class="text-2xl font-bold">Amazon</a>
16
- <div class="flex items-center">
17
- <input type="text" placeholder="Search" class="bg-gray-700 text-white px-4 py-2 rounded-md mr-2">
18
- <button class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400">Search</button>
19
- </div>
20
- <div>
21
- <a href="/cart.html" class="hover:text-yellow-500">Cart</a>
 
 
 
22
  </div>
23
  </div>
24
- </nav>
25
-
26
- <main class="container mx-auto mt-8">
27
- <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
28
- <div>
29
- <div class="image-gallery">
30
- <img src="https://placehold.co/400x400" alt="Product Image 1" class="w-full rounded-md mb-2">
31
- <div class="grid grid-cols-4 gap-2">
32
- <img src="https://placehold.co/100x100" alt="Product Image 2" class="w-full rounded-md">
33
- <img src="https://placehold.co/100x100" alt="Product Image 3" class="w-full rounded-md">
34
- <img src="https://placehold.co/100x100" alt="Product Image 4" class="w-full rounded-md">
35
- <img src="https://placehold.co/100x100" alt="Product Image 5" class="w-full rounded-md">
36
- </div>
37
- </div>
38
- </div>
39
- <div>
40
- <h1 class="text-2xl font-bold" id="productName">Product Title</h1>
41
- <p class="text-gray-600" id="productDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
42
- <p class="text-xl font-semibold" id="productPrice">$99.99</p>
43
- <div class="flex items-center mb-4">
44
- <i class="fas fa-star text-yellow-500"></i>
45
- <i class="fas fa-star text-yellow-500"></i>
46
- <i class="fas fa-star text-yellow-500"></i>
47
- <i class="fas fa-star text-yellow-500"></i>
48
- <i class="fas fa-star-half-alt text-yellow-500"></i>
49
- <span class="text-gray-600 ml-2">4.5</span>
50
- </div>
51
- <button class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400 add-to-cart-button" id="addToCartButton"><i class="fas fa-cart-plus"></i>&nbsp;Add to Cart</button>
52
- </div>
53
- </div>
54
- </main>
55
-
56
- <footer class="bg-gray-800 p-4 text-white text-center mt-8">
57
- <p>&copy; 2024 Amazon Clone</p>
58
- </footer>
59
 
60
- <script src="script.js">
61
- const urlParams = new URLSearchParams(window.location.search);
62
- const productId = urlParams.get("id");
63
-
64
- document.addEventListener('DOMContentLoaded', function() {
65
- if (productId) {
66
- const product = products.find(p => p.id === productId);
67
 
68
- if (product) {
69
- document.getElementById('productName').textContent = product.name;
70
- document.getElementById('productDescription').textContent = product.description;
71
- document.getElementById('productPrice').textContent = '$' + product.price.toFixed(2);
72
- // Assuming you have an image element with id 'productImage'
73
- // document.getElementById('productImage').src = product.image;
74
- // document.getElementById('productImage').alt = product.name;
75
  } else {
76
- console.error('Product not found with ID:', productId);
77
- document.getElementById('productName').textContent = 'Product Not Found';
78
  }
79
- } else {
80
- console.error('Product ID not provided.');
81
- document.getElementById('productName').textContent = 'Product ID Not Provided';
82
- }
83
 
84
- const addToCartButton = document.getElementById('addToCartButton');
85
- if (addToCartButton) {
86
- addToCartButton.addEventListener('click', () => {
87
- if (productId) {
88
- const product = products.find(p => p.id === productId);
89
- if (product) {
90
- addToCart(product);
91
- } else {
92
- console.error('Product not found with ID:', productId);
93
- }
94
  } else {
95
- console.error('Product ID not provided.');
96
  }
97
- });
98
- }
99
- });
100
- </script>
101
- <script src="data.js"></script>
102
-
103
- <script>
104
- const urlParams = new URLSearchParams(window.location.search);
105
- const productId = urlParams.get("id");
106
-
107
- document.addEventListener('DOMContentLoaded', function() {
108
- const product = products[0];
109
- trackProductView(product.id);
110
- });
111
- </script>
112
-
113
 
114
- <script>
115
- const urlParams = new URLSearchParams(window.location.search);
116
- const productId = urlParams.get("id");
 
 
117
 
118
- document.addEventListener('DOMContentLoaded', function() {
119
- trackProductView('product123');
 
 
120
  });
121
  </script>
122
-
123
- <script>
124
- const urlParams = new URLSearchParams(window.location.search);
125
- const productId = urlParams.get("id");
126
-
127
- const productNameElement = document.getElementById('productName');
128
- const productDescriptionElement = document.getElementById('productDescription');
129
- const productPriceElement = document.getElementById('productPrice');
130
- const productImageElement = document.getElementById('productImage');
131
- const addToCartButton = document.getElementById('addToCartButton');
132
-
133
- if (products && products.length > 0) {
134
- const product = products[0];
135
-
136
- if (productNameElement) productNameElement.textContent = product.name;
137
- if (productDescriptionElement) productDescriptionElement.textContent = product.description;
138
- if (productPriceElement) productPriceElement.textContent = '$' + product.price.toFixed(2);
139
- if (productImageElement) productImageElement.src = product.image;
140
- if (productImageElement) productImageElement.alt = product.name;
141
- } else {
142
- console.error('No products found in data.js');
143
- }
144
-
145
- addToCartButton.addEventListener('click', () => {
146
- addToCart(products[0]);
147
- });
148
- </script>
149
- </body>
150
- </html>
 
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Product Details</title>
7
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
8
  <link rel="stylesheet" href="style.css">
9
+ <script src="script.js"></script>
10
  </head>
11
+ <body class="bg-gray-100">
12
+ <div class="container mx-auto p-4">
13
+ <a href="index.html" class="block text-blue-500 hover:underline mb-4">Back to Home</a>
14
+
15
+ <div id="product-details" class="bg-white shadow-md rounded-lg overflow-hidden">
16
+ <img id="product-image" src="" alt="Product Image" class="w-full h-64 object-cover">
17
+ <div class="p-4">
18
+ <h2 id="product-name" class="text-2xl font-semibold mb-2"></h2>
19
+ <p id="product-description" class="text-gray-700 mb-2"></p>
20
+ <p id="product-price" class="text-lg font-bold mb-2"></p>
21
+ <button id="add-to-cart-button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
22
+ Add to Cart
23
+ </button>
24
  </div>
25
  </div>
26
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
27
 
28
+ <script type="module">
29
+ import { products } from './data.js';
30
+ document.addEventListener('DOMContentLoaded', function() {
31
+ const urlParams = new URLSearchParams(window.location.search);
32
+ const productId = urlParams.get('id');
 
 
33
 
34
+ if (productId) {
35
+ fetchProductDetails(productId);
 
 
 
 
 
36
  } else {
37
+ document.getElementById('product-details').innerHTML = '<p>Product not found.</p>';
 
38
  }
 
 
 
 
39
 
40
+ function fetchProductDetails(productId) {
41
+ // Fetch product data from data.js
42
+ const product = products.find(p => p.id === productId);
43
+
44
+ if (product) {
45
+ displayProduct(product);
 
 
 
 
46
  } else {
47
+ document.getElementById('product-details').innerHTML = '<p>Product not found.</p>';
48
  }
49
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
50
 
51
+ function displayProduct(product) {
52
+ document.getElementById('product-image').src = product.image;
53
+ document.getElementById('product-name').textContent = product.name;
54
+ document.getElementById('product-description').textContent = product.description;
55
+ document.getElementById('product-price').textContent = '$' + product.price.toFixed(2);
56
 
57
+ document.getElementById('add-to-cart-button').addEventListener('click', function() {
58
+ addToCart(product);
59
+ });
60
+ }
61
  });
62
  </script>
63
+ </body>
64
+ </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
script.js CHANGED
@@ -1,279 +1,42 @@
1
 
2
- // Track product views
3
- function trackProductView(productId) {
4
- let viewCounts = JSON.parse(localStorage.getItem('viewCounts') || '{}');
5
- viewCounts[productId] = (viewCounts[productId] || 0) + 1;
6
- localStorage.setItem('viewCounts', JSON.stringify(viewCounts));
7
- }
8
-
9
- // Track add to cart events
10
- function trackAddToCart(productId) {
11
- let addToCartCounts = JSON.parse(localStorage.getItem('addToCartCounts') || '{}');
12
- addToCartCounts[productId] = (addToCartCounts[productId] || 0) + 1;
13
- localStorage.setItem('addToCartCounts', JSON.stringify(addToCartCounts));
14
- }
15
-
16
- document.addEventListener('DOMContentLoaded', function() {
17
- // Function to get cart items from local storage
18
- function getCartItems() {
19
- const cartItems = localStorage.getItem('cart');
20
- return cartItems ? JSON.parse(cartItems) : [];
21
- }
22
-
23
- // Function to set cart items in local storage
24
- function setCartItems(cartItems) {
25
- localStorage.setItem('cart', JSON.stringify(cartItems));
26
- }
27
-
28
-
29
-
30
- // Function to add an item to the cart
31
- function addToCart(product) {
32
- trackAddToCart(product.id); // Track add to cart event
33
- let cartItems = getCartItems();
34
- const existingItem = cartItems.find(item => item.id === product.id);
35
-
36
- if (existingItem) {
37
- existingItem.quantity += 1;
38
- } else {
39
- product.quantity = 1;
40
- cartItems.push(product);
41
- }
42
-
43
- setCartItems(cartItems);
44
- console.log("Cart updated:", cartItems);
45
- updateCartUI();
46
- }
47
-
48
- function addToCart(product) {
49
- trackAddToCart('product123'); // Track add to cart event
50
- let cartItems = getCartItems();
51
- const existingItem = cartItems.find(item => item.id === product.id);
52
-
53
- if (existingItem) {
54
- existingItem.quantity += 1;
55
- } else {
56
- product.quantity = 1;
57
- cartItems.push(product);
58
- }
59
-
60
- setCartItems(cartItems);
61
- console.log("Cart updated:", cartItems);
62
- updateCartUI();
63
- }
64
-
65
- // Function to update item quantity in the cart
66
- function updateQuantity(productId, quantity) {
67
- let cartItems = getCartItems();
68
- const itemIndex = cartItems.findIndex(item => item.id === productId);
69
-
70
- if (itemIndex !== -1) {
71
- cartItems[itemIndex].quantity = quantity;
72
- if (cartItems[itemIndex].quantity <= 0) {
73
- cartItems.splice(itemIndex, 1); // Remove item if quantity is 0 or less
74
- }
75
- setCartItems(cartItems);
76
- console.log("Cart updated:", cartItems);
77
- updateCartUI();
78
- }
79
- updateCartUI(); // Call updateCartUI to update the order summary
80
- }
81
-
82
- // Function to remove an item from the cart
83
- function removeItem(productId) {
84
- let cartItems = getCartItems();
85
- const itemIndex = cartItems.findIndex(item => item.id === productId);
86
-
87
- if (itemIndex !== -1) {
88
- cartItems.splice(itemIndex, 1);
89
- setCartItems(cartItems);
90
- console.log("Cart updated:", cartItems);
91
- updateCartUI();
92
- }
93
- }
94
-
95
- // Function to calculate cart totals
96
- function calculateTotals() {
97
- let cartItems = getCartItems();
98
- let subtotal = 0;
99
-
100
- cartItems.forEach(item => {
101
- subtotal += item.price * item.quantity;
102
- });
103
-
104
- const shipping = 5.00;
105
- const total = subtotal + shipping;
106
-
107
- return { subtotal, shipping, total };
108
- }
109
-
110
- // Function to display cart items in cart.html
111
- function displayCartItems() {
112
- let cartItems = getCartItems();
113
- const cartItemsContainer = document.getElementById('cart-items');
114
-
115
- if (cartItemsContainer) {
116
- cartItemsContainer.innerHTML = ''; // Clear existing items
117
-
118
- cartItems.forEach(item => {
119
- const cartItemDiv = document.createElement('div');
120
- cartItemDiv.classList.add('flex', 'items-center', 'border', 'border-gray-300', 'rounded-md', 'p-4');
121
-
122
- cartItemDiv.innerHTML = `
123
- <img src="${item.image}" alt="Product Image" class="w-24 h-24 mr-4">
124
- <div>
125
- <h2 class="text-lg font-bold">${item.name}</h2>
126
- <p class="text-gray-600">$${item.price.toFixed(2)}</p>
127
- <div class="flex items-center mt-2">
128
- <button class="bg-gray-200 px-2 py-1 rounded-md decrease-quantity" data-product-id="${item.id}">-</button>
129
- <input type="number" value="${item.quantity}" class="w-16 text-center border border-gray-300 rounded-md mx-2 quantity-input" data-product-id="${item.id}">
130
- <button class="bg-gray-200 px-2 py-1 rounded-md increase-quantity" data-product-id="${item.id}">+</button>
131
- <button class="text-red-500 hover:text-red-700 ml-4 remove-item" data-product-id="${item.id}">Remove</button>
132
- </div>
133
- </div>
134
- `;
135
-
136
- cartItemsContainer.appendChild(cartItemDiv);
137
-
138
- // Add event listener to remove button
139
- const removeButton = cartItemDiv.querySelector('.remove-item');
140
- removeButton.addEventListener('click', function() {
141
- const productId = this.dataset.productId;
142
- removeItem(productId);
143
- console.log("Item removed:", productId);
144
- });
145
- });
146
-
147
- // Add event listeners to quantity buttons and remove buttons
148
- const decreaseButtons = document.querySelectorAll('.decrease-quantity');
149
- decreaseButtons.forEach(button => {
150
- button.addEventListener('click', function() {
151
- const productId = this.dataset.productId;
152
- const quantityInput = this.parentNode.querySelector('.quantity-input');
153
- let quantity = parseInt(quantityInput.value);
154
- quantity = Math.max(1, quantity - 1); // Ensure quantity is not less than 1
155
- quantityInput.value = quantity;
156
- updateQuantity(productId, quantity);
157
- console.log("Quantity updated:", productId, quantity);
158
- });
159
- });
160
-
161
- const increaseButtons = document.querySelectorAll('.increase-quantity');
162
- increaseButtons.forEach(button => {
163
- button.addEventListener('click', function() {
164
- const productId = this.dataset.productId;
165
- const quantityInput = this.parentNode.querySelector('.quantity-input');
166
- let quantity = parseInt(quantityInput.value);
167
- quantity++;
168
- quantityInput.value = quantity;
169
- updateQuantity(productId, quantity);
170
- console.log("Quantity updated:", productId, quantity);
171
- });
172
- });
173
- }
174
- }
175
-
176
- // Function to update the order summary in cart.html and checkout.html
177
- function updateOrderSummary() {
178
- const { subtotal, shipping, total } = calculateTotals();
179
-
180
- const subtotalElements = document.querySelectorAll('#subtotal');
181
- subtotalElements.forEach(element => element.textContent = `$${subtotal.toFixed(2)}`);
182
-
183
- const shippingElements = document.querySelectorAll('#shipping');
184
- shippingElements.forEach(element => element.textContent = `$${shipping.toFixed(2)}`);
185
-
186
- const totalElements = document.querySelectorAll('#total');
187
- totalElements.forEach(element => element.textContent = `$${total.toFixed(2)}`);
188
- }
189
-
190
- // Function to handle checkout
191
- function handleCheckout() {
192
- const checkoutForm = document.getElementById('checkout-form');
193
- if (checkoutForm) {
194
- checkoutForm.addEventListener('submit', function(event) {
195
- event.preventDefault(); // Prevent form submission
196
-
197
- // Get form data
198
- const name = document.getElementById('name').value;
199
- const address = document.getElementById('address').value;
200
- const city = document.getElementById('city').value;
201
- const state = document.getElementById('state').value;
202
- const zip = document.getElementById('zip').value;
203
- const credit_card = document.getElementById('credit_card').value;
204
- const expiration_date = document.getElementById('expiration_date').value;
205
- const cvv = document.getElementById('cvv').value;
206
-
207
- // Store form data in local storage
208
- const shippingInfo = { name, address, city, state, zip };
209
- const paymentInfo = { credit_card, expiration_date, cvv };
210
- localStorage.setItem('shippingInfo', JSON.stringify(shippingInfo));
211
- localStorage.setItem('paymentInfo', JSON.stringify(paymentInfo));
212
-
213
- // Redirect to confirmation page
214
- window.location.href = '/confirmation.html';
215
- });
216
- }
217
- }
218
-
219
- // Function to display order confirmation details
220
- function displayConfirmationDetails() {
221
- const shippingInfo = localStorage.getItem('shippingInfo');
222
- const paymentInfo = localStorage.getItem('paymentInfo');
223
- const cartItems = getCartItems();
224
-
225
- if (shippingInfo && paymentInfo && cartItems) {
226
- const shipping = JSON.parse(shippingInfo);
227
- const payment = JSON.parse(paymentInfo);
228
-
229
- document.getElementById('shipping-name').textContent = shipping.name;
230
- document.getElementById('shipping-address').textContent = shipping.address;
231
- document.getElementById('shipping-city').textContent = shipping.city;
232
- document.getElementById('shipping-state').textContent = shipping.state;
233
- document.getElementById('shipping-zip').textContent = shipping.zip;
234
-
235
- // Payment information is dummy data in confirmation.html
236
-
237
- const orderItemsList = document.getElementById('order-items');
238
- let orderTotal = 0;
239
-
240
- cartItems.forEach(item => {
241
- const listItem = document.createElement('li');
242
- listItem.textContent = `${item.name} (${item.quantity}) - $${(item.price * item.quantity).toFixed(2)}`;
243
- orderItemsList.appendChild(listItem);
244
- orderTotal += item.price * item.quantity;
245
- });
246
-
247
- document.getElementById('order-total').textContent = `$${orderTotal.toFixed(2)}`;
248
 
249
- // Clear cart and shipping info from local storage
250
- localStorage.removeItem('cart');
251
- localStorage.removeItem('shippingInfo');
252
- localStorage.removeItem('paymentInfo');
253
- }
 
254
  }
 
255
 
256
- // Initialize the cart page
257
- if (window.location.pathname === '/cart.html') {
258
- displayCartItems();
259
- updateOrderSummary();
260
- }
261
 
262
- // Initialize the checkout page
263
- if (window.location.pathname === '/checkout.html') {
264
- updateOrderSummary();
265
- handleCheckout();
 
 
266
  }
267
 
268
- // Initialize the confirmation page
269
- if (window.location.pathname === '/confirmation.html') {
270
- displayConfirmationDetails();
271
- }
272
- });
273
 
274
- function updateCartUI() {
275
- if (window.location.pathname === '/cart.html') {
276
- displayCartItems();
277
- updateOrderSummary();
278
- }
 
279
  }
 
 
 
 
1
 
2
+ function getCartItems() {
3
+ const cartItems = localStorage.getItem('cart');
4
+ return cartItems ? JSON.parse(cartItems) : [];
5
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6
 
7
+ function updateCartIcon() {
8
+ const cartItems = getCartItems();
9
+ const cartItemCount = cartItems.reduce((total, item) => total + item.quantity, 0);
10
+ const cartIcon = document.querySelector('a[href="/cart.html"]');
11
+ if (cartIcon) {
12
+ cartIcon.textContent = `Cart (${cartItemCount})`;
13
  }
14
+ }
15
 
16
+ function addToCart(product) {
17
+ const cartItems = getCartItems();
18
+ const existingProductIndex = cartItems.findIndex(item => item.id === product.id);
 
 
19
 
20
+ if (existingProductIndex > -1) {
21
+ // If the product already exists in the cart, increment the quantity
22
+ cartItems[existingProductIndex].quantity += 1;
23
+ } else {
24
+ // Otherwise, add the product to the cart with a quantity of 1
25
+ cartItems.push({ ...product, quantity: 1 });
26
  }
27
 
28
+ localStorage.setItem('cart', JSON.stringify(cartItems));
29
+ updateCartIcon();
30
+ alert('Product added to cart!');
31
+ }
 
32
 
33
+ function removeFromCart(productId) {
34
+ let cartItems = getCartItems();
35
+ cartItems = cartItems.filter(item => item.id !== productId);
36
+ localStorage.setItem('cart', JSON.stringify(cartItems));
37
+ updateCartIcon();
38
+ updateCartPage(); // Function to update cart page after removing item
39
  }
40
+
41
+ // Call updateCartIcon on page load
42
+ updateCartIcon();
style.css CHANGED
@@ -3,3 +3,20 @@
3
  transform: scale(1.05);
4
  transition: transform 0.2s ease-in-out;
5
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3
  transform: scale(1.05);
4
  transition: transform 0.2s ease-in-out;
5
  }
6
+
7
+ /* Add transition to the cart icon */
8
+ nav .container > div:nth-child(3) > a {
9
+ transition: color 0.3s ease;
10
+ }
11
+
12
+ nav .container > div:nth-child(3) > a:hover {
13
+ color: #FFFF00;
14
+ }
15
+
16
+ .product-card {
17
+ transition: transform 0.3s ease;
18
+ }
19
+
20
+ .product-card:hover {
21
+ transform: scale(1.03);
22
+ }