ibm-developer-skills-network · Dev-Abdullah-786 · Aug 23, 2025
diff --git a/src/AboutUs.css b/src/AboutUs.css
@@ -1,20 +1,22 @@
 .about-us-container {
-    width: 1000px;
+    width: 700px;
     /* margin: 0 auto; */
     /* padding: 20px; */
     /* background-color: red; */
-    text-align: justify;
+    text-align: center;
+    margin-right: 700px;
+    font-size: 10px;
   }
 
   .about-us-heading {
-    font-size: 32px;
+    font-size: 20px;
     font-weight: bold;
     color: #333;
     margin-bottom: 20px;
   }
 
   .about-us-description {
-    font-size: 18px;
+    font-size: 10px;
     color: #666;
     margin-bottom: 30px;
     text-align: center;

diff --git a/src/App.css b/src/App.css
@@ -38,7 +38,7 @@
 
 .landing_content {
  margin-top: 430px;
-  margin-left: 100px;
+  margin-left: 150px;
   transform: translate(-50%, -50%);
   z-index: 1;
   text-align: center;
@@ -50,19 +50,23 @@
   flex-direction: column;
   justify-content: center;
   gap: 10px;
+  margin-right: 70px;
 }
 
 .content p,
 .content h1 {
   color: white;
+  margin-left: 30px;
 }
 
 .content h1 {
+ font-size: 30px;
   font-size: 48px;
   margin-bottom: 10px;
 }
 
 .content p {
+  font-size: 20px;
   font-size: 25px;
 }
 
@@ -71,6 +75,7 @@
   height: 2px;
   background-color: #4caf50;
   margin: 10px 0;
+  margin-left: 20px;
 }
 
 .get-started-button {
@@ -83,6 +88,7 @@
   cursor: pointer;
   transition: background-color 0.3s ease;
   margin-top: 40px;
+  margin-left: 20px;
 }
 
 .get-started-button:hover {

diff --git a/src/CartItem.css b/src/CartItem.css
@@ -233,11 +233,13 @@
     padding: 15px 75px;
     font-size: 23px;
     border: none;
-    border-radius: 5px;
     background-color: #4caf50;
     color: white;
     cursor: pointer;
     transition: background-color 0.3s ease;
-    margin-top: 40px;
+    margin-top: 20px;
+    margin-bottom: 40px;
+    border-radius: 5px;
+    margin-left: 20px;
   }
 
diff --git a/src/CartItem.jsx b/src/CartItem.jsx
@@ -9,27 +9,43 @@ const CartItem = ({ onContinueShopping }) => {
 
   // Calculate total amount for all products in the cart
   const calculateTotalAmount = () => {
-
+    let total = 0;
+
+    cart.forEach(item => {
+      const cost = item.cost ? parseFloat(item.cost.replace('$', '')) : 0;
+      total += cost * item.quantity;
+    });
+
+    return total.toFixed(2);
   };
 
   const handleContinueShopping = (e) => {
-
+   onContinueShopping(e);
+  };
+
+   const handleCheckoutShopping = (e) => {
+    alert('Functionality to be added for future reference');
   };
 
 
 
   const handleIncrement = (item) => {
+    dispatch(updateQuantity({ name: item.name, quantity: item.quantity + 1 }));
   };
 
   const handleDecrement = (item) => {
-
+    dispatch(updateQuantity({ name: item.name, quantity: item.quantity - 1 }));
   };
 
   const handleRemove = (item) => {
+    dispatch(removeItem({ name: item.name }));
   };
 
   // Calculate total cost based on quantity for an item
   const calculateTotalCost = (item) => {
+    const price = item.cost ? parseFloat(item.cost.replace('$', '')) : 0;
+    const total = price * item.quantity;  
+    return total.toFixed(2);
   };
 
   return (
@@ -57,7 +73,7 @@ const CartItem = ({ onContinueShopping }) => {
       <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>
+        <button className="get-started-button1" onClick={()=>handleCheckoutShopping()}>Checkout</button>
       </div>
     </div>
   );

diff --git a/src/CartSlice.jsx b/src/CartSlice.jsx
@@ -3,17 +3,27 @@ import { createSlice } from '@reduxjs/toolkit';
 export const CartSlice = createSlice({
   name: 'cart',
   initialState: {
-    items: [], // Initialize items as an empty array
+    items: [], 
   },
   reducers: {
-    addItem: (state, action) => {
-
+   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.name);
     },
     updateQuantity: (state, action) => {
-
-
+      const { name, quantity } = action.payload;
+      const itemToUpdate = state.items.find(item => item.name === name);
+      if (itemToUpdate) {
+        itemToUpdate.quantity = quantity;
+      }
     },
   },
 });

diff --git a/src/ProductList.css b/src/ProductList.css
@@ -39,6 +39,13 @@ body {
 
 }
 
+.category {
+    text-align: center;
+    text-decoration:underline;
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
 /* Product Grid */
 .product-grid {
     display:flex;
@@ -84,6 +91,7 @@ body {
 .product-title {
     font-weight: bold;
     margin-bottom: 10px;
+    margin-top: 10px;
 }
 
 .product-price {
@@ -153,6 +161,10 @@ body {
 
 }
 
+.company {
+    margin-left: 15px;
+}
+
 .luxury {
     display: flex;
     align-items: center;

diff --git a/src/ProductList.jsx b/src/ProductList.jsx
@@ -1,10 +1,28 @@
 import React, { useState, useEffect } from 'react';
 import './ProductList.css'
 import CartItem from './CartItem';
+import { addItem } from './CartSlice';
+import { useDispatch, useSelector } from 'react-redux';
+
 function ProductList({ onHomeClick }) {
     const [showCart, setShowCart] = useState(false);
     const [showPlants, setShowPlants] = useState(false); // State to control the visibility of the About Us page
 
+    const [addedToCart, setAddedToCart] = useState({});
+    const dispatch = useDispatch();
+    const cartItems = useSelector((state) => state.cart.items);
+    const isInCart = (productName) => cartItems.some(cartItem => cartItem.name === productName);
+    const totalCartQuantity = cartItems.reduce((sum, item) => sum + (item.quantity || 0), 0);
+
+    const handleAddToCart = (product) => {
+        dispatch(addItem(product));
+
+        setAddedToCart((prevState) => ({
+            ...prevState,
+            [product.name]: true,
+        }));
+    };
+
     const plantsArray = [
         {
             category: "Air Purifying Plants",
@@ -259,7 +277,7 @@ function ProductList({ onHomeClick }) {
                     <div className="luxury">
                         <img src="https://cdn.pixabay.com/photo/2020/08/05/13/12/eco-5465432_1280.png" alt="" />
                         <a href="/" onClick={(e) => handleHomeClick(e)}>
-                            <div>
+                            <div className='company'>
                                 <h3 style={{ color: 'white' }}>Paradise Nursery</h3>
                                 <i style={{ color: 'white' }}>Where Green Meets Serenity</i>
                             </div>
@@ -269,13 +287,84 @@ function ProductList({ onHomeClick }) {
                 </div>
                 <div style={styleObjUl}>
                     <div> <a href="#" onClick={(e) => handlePlantsClick(e)} style={styleA}>Plants</a></div>
-                    <div> <a href="#" onClick={(e) => handleCartClick(e)} style={styleA}><h1 className='cart'><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" id="IconChangeColor" height="68" width="68"><rect width="156" height="156" fill="none"></rect><circle cx="80" cy="216" r="12"></circle><circle cx="184" cy="216" r="12"></circle><path d="M42.3,72H221.7l-26.4,92.4A15.9,15.9,0,0,1,179.9,176H84.1a15.9,15.9,0,0,1-15.4-11.6L32.5,37.8A8,8,0,0,0,24.8,32H8" fill="none" stroke="#faf9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" id="mainIconPathAttribute"></path></svg></h1></a></div>
+                    <div>
+                        <a href="#" onClick={(e) => handleCartClick(e)} style={styleA}>
+                            <h1 className="cart" style={{ position: 'relative' }}>
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" id="IconChangeColor" height="68" width="68">
+                                    <rect width="156" height="156" fill="none"></rect>
+                                    <circle cx="80" cy="216" r="12"></circle>
+                                    <circle cx="184" cy="216" r="12"></circle>
+                                    <path d="M42.3,72H221.7l-26.4,92.4A15.9,15.9,0,0,1,179.9,176H84.1a15.9,15.9,0,0,1-15.4-11.6L32.5,37.8A8,8,0,0,0,24.8,32H8"
+                                        fill="none"
+                                        stroke="#faf9f9"
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        strokeWidth="2"
+                                        id="mainIconPathAttribute">
+                                    </path>
+                                </svg>
+
+                                {/* Show count badge only if totalCartQuantity > 0 */}
+                                {Number.isInteger(totalCartQuantity) && totalCartQuantity > 0 && (
+                                    <span style={{
+                                        position: 'absolute',
+                                        top: '0',
+                                        right: '0',
+                                        background: 'red',
+                                        color: 'white',
+                                        borderRadius: '50%',
+                                        padding: '4px 7px',
+                                        fontSize: '20px',
+                                        minWidth: '30px',
+                                        height: '30px',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center'
+                                    }}>
+                                        {totalCartQuantity}
+                                    </span>
+                                )}
+
+                            </h1>
+                        </a>
+                    </div>
                 </div>
             </div>
             {!showCart ? (
                 <div className="product-grid">
+                    {plantsArray.map((category, index) => ( // Loop through each category in plantsArray
+                        <div key={index}> {/* Unique key for each category div */}
+                            <h1 className='category'>
+                                <div>{category.category}</div> {/* Display the category name */}
+                            </h1>
+                            <div className="product-list"> {/* Container for the list of plant cards */}
+                                {category.plants.map((plant, plantIndex) => ( // Loop through each plant in the current category
+                                    <div className="product-card" key={plantIndex}> {/* Unique key for each plant card */}
+                                        <img
+                                            className="product-image"
+                                            src={plant.image} // Display the plant image
+                                            alt={plant.name} // Alt text for accessibility
+                                        />
+                                        <div className="product-title">{plant.name}</div> {/* Display plant name */}
+                                        {/* Display other plant details like description and cost */}
+                                        <div className="product-description">{plant.description}</div> {/* Display plant description */}
+                                        <div className="product-cost">{plant.cost}</div> {/* Display plant cost */}
 
+                                        <button
+                                            className="product-button"
+                                            onClick={() => handleAddToCart(plant)}
+                                            disabled={isInCart(plant.name)}
+                                            style={isInCart(plant.name) ? { backgroundColor: 'gray', cursor: 'not-allowed' } : {}}
+                                        >
+                                            {isInCart(plant.name) ? 'Added to Cart' : 'Add to Cart'}
+                                        </button>
 
+
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    ))}
                 </div>
             ) : (
                 <CartItem onContinueShopping={handleContinueShopping} />