Working code to add to cart, increment, decrement, caculate cost and …

package.json

@@ -5,6 +5,8 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d dist",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite build; vite preview --host"

src/CartItem.css

@@ -240,4 +240,96 @@
     transition: background-color 0.3s ease;
     margin-top: 40px;
   }
-
+  .cart-container {
+    max-width: 800px;
+    margin: auto;
+    padding: 20px;
+}
+
+.cart-item {
+    display: flex;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    padding: 10px;
+    background-color: #fff;
+}
+
+.cart-item-image {
+    width: 120px;
+    height: 120px;
+    object-fit: cover;
+    border-radius: 8px;
+}
+
+.cart-item-details {
+    flex-grow: 1;
+    padding-left: 15px;
+}
+
+.cart-item-name {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+
+.cart-item-cost,
+.cart-item-total {
+    font-size: 16px;
+    margin-bottom: 10px;
+}
+
+.cart-item-quantity {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.cart-item-button {
+    width: 30px;
+    height: 30px;
+    border: none;
+    background-color: #4CAF50;
+    color: white;
+    font-size: 18px;
+    cursor: pointer;
+    border-radius: 4px;
+}
+
+.cart-item-button:hover {
+    background-color: #45a049;
+}
+
+.cart-item-quantity-value {
+    margin: 0 10px;
+    font-size: 16px;
+}
+
+.cart-item-delete {
+    background-color: #f44336;
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.cart-item-delete:hover {
+    background-color: #d32f2f;
+}
+
+.get-started-button,
+.get-started-button1 {
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    margin-top: 10px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.get-started-button:hover,
+.get-started-button1:hover {
+    background-color: #45a049;
+}

src/CartItem.jsx

@@ -1,68 +1,83 @@
+// CartItem.jsx
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { removeItem, updateQuantity } from './CartSlice';
 import './CartItem.css';
 
-const CartItem = ({ onContinueShopping }) => {
-  const cart = useSelector(state => state.cart.items);
-  const dispatch = useDispatch();
+const CartItem = ({ onContinueShopping, onRemoveFromCart  }) => {
+    const cart = useSelector(state => state.cart.items);
+    const dispatch = useDispatch();
 
-  // Calculate total amount for all products in the cart
-  const calculateTotalAmount = () => {
-
-  };
+    const calculateTotalAmount = () => {
+        return cart.reduce((total, item) => {
+            const cost = parseFloat(item.cost.replace('$', '')) || 0;
+            return total + cost * item.quantity;
+        }, 0).toFixed(2);
+    };
 
-  const handleContinueShopping = (e) => {
-
-  };
+    const calculateTotalCost = (item) => {
+        const cost = parseFloat(item.cost.replace('$', '')) || 0;
+        return (cost * item.quantity).toFixed(2);
+    };
 
+    const handleContinueShopping = (e) => {
+        onContinueShopping(e);
+    };
 
+    const handleIncrement = (item) => {
+        dispatch(updateQuantity({
+            name: item.name,
+            quantity: item.quantity + 1
+        }));
+    };
 
-  const handleIncrement = (item) => {
-  };
+    const handleDecrement = (item) => {
+        if (item.quantity > 1) {
+            dispatch(updateQuantity({
+                name: item.name,
+                quantity: item.quantity - 1
+            }));
+        }
+    };
 
-  const handleDecrement = (item) => {
-
-  };
+    const handleRemove = (item) => {
+        dispatch(removeItem(item.name));
+        onRemoveFromCart(item.name);
+    };
 
-  const handleRemove = (item) => {
-  };
+    const handleCheckoutShopping = () => {
+        alert('Checkout functionality to be added in the future.');
+    };
 
-  // Calculate total cost based on quantity for an item
-  const calculateTotalCost = (item) => {
-  };
+    return (
+        <div className="cart-container">
+            <h2 style={{ color: 'black' }}>Total Cart Amount: ${calculateTotalAmount()}</h2>
+            <div>
+                {cart.map(item => (
+                    <div className="cart-item" key={item.name}>
+                        <img className="cart-item-image" src={item.image} alt={item.name} />
+                        <div className="cart-item-details">
+                            <div className="cart-item-name">{item.name}</div>
+                            <div className="cart-item-cost">Cost: {item.cost}</div>
+                            <div className="cart-item-quantity">
+                                <button className="cart-item-button cart-item-button-dec" onClick={() => handleDecrement(item)}>-</button>
+                                <span className="cart-item-quantity-value">{item.quantity}</span>
+                                <button className="cart-item-button cart-item-button-inc" onClick={() => handleIncrement(item)}>+</button>
+                            </div>
+                            <div className="cart-item-total">Total: ${calculateTotalCost(item)}</div>
+                            <button className="cart-item-delete" onClick={() => handleRemove(item)}>Delete</button>
+                        </div>
+                    </div>
+                ))}
+            </div>
 
-  return (
-    <div className="cart-container">
-      <h2 style={{ color: 'black' }}>Total Cart Amount: ${calculateTotalAmount()}</h2>
-      <div>
-        {cart.map(item => (
-          <div className="cart-item" key={item.name}>
-            <img className="cart-item-image" src={item.image} alt={item.name} />
-            <div className="cart-item-details">
-              <div className="cart-item-name">{item.name}</div>
-              <div className="cart-item-cost">{item.cost}</div>
-              <div className="cart-item-quantity">
-                <button className="cart-item-button cart-item-button-dec" onClick={() => handleDecrement(item)}>-</button>
-                <span className="cart-item-quantity-value">{item.quantity}</span>
-                <button className="cart-item-button cart-item-button-inc" onClick={() => handleIncrement(item)}>+</button>
-              </div>
-              <div className="cart-item-total">Total: ${calculateTotalCost(item)}</div>
-              <button className="cart-item-delete" onClick={() => handleRemove(item)}>Delete</button>
+            <div className="continue_shopping_btn">
+                <button className="get-started-button" onClick={handleContinueShopping}>Continue Shopping</button>
+                <br />
+                <button className="get-started-button1" onClick={handleCheckoutShopping}>Checkout</button>
             </div>
-          </div>
-        ))}
-      </div>
-      <div style={{ marginTop: '20px', color: 'black' }} className='total_cart_amount'></div>
-      <div className="continue_shopping_btn">
-        <button className="get-started-button" onClick={(e) => handleContinueShopping(e)}>Continue Shopping</button>
-        <br />
-        <button className="get-started-button1">Checkout</button>
-      </div>
-    </div>
-  );
+        </div>
+    );
 };
 
 export default CartItem;
-
-

src/CartSlice.jsx

@@ -1,21 +1,32 @@
+// CartSlice.js
 import { createSlice } from '@reduxjs/toolkit';
 
 export const CartSlice = createSlice({
-  name: 'cart',
-  initialState: {
-    items: [], // Initialize items as an empty array
-  },
-  reducers: {
-    addItem: (state, action) => {
-
+    name: 'cart',
+    initialState: {
+        items: [],
     },
-    removeItem: (state, action) => {
+    reducers: {
+        addItem: (state, action) => {
+            const { name, image, cost } = action.payload;
+            const existingItem = state.items.find(item => item.name === name);
+            if (existingItem) {
+                existingItem.quantity++;
+            } else {
+                state.items.push({ name, image, cost, quantity: 1 });
+            }
+        },
+        removeItem: (state, action) => {
+            state.items = state.items.filter(item => item.name !== action.payload);
+        },
+        updateQuantity: (state, action) => {
+            const { name, quantity } = action.payload;
+            const itemToUpdate = state.items.find(item => item.name === name);
+            if (itemToUpdate) {
+                itemToUpdate.quantity = quantity;
+            }
+        },
     },
-    updateQuantity: (state, action) => {
-
-
-    },
-  },
 });
 
 export const { addItem, removeItem, updateQuantity } = CartSlice.actions;