Hugging Face's logo

Spaces:
KingNish
/
test-space
Running

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

Implement product page, cart, and checkout functionality with icons and animations

Browse files

Implemented the product page with dynamic product display, detailed product information, add to cart, remove from cart, and checkout functionalities. Added icons using Font Awesome and animations to enhance the user experience.

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
+ }