ibm-developer-skills-network · MostafaDisha-coder · Dec 15, 2024 · Dec 15, 2024 · Dec 15, 2024 · Dec 15, 2024
diff --git a/CNAME b/CNAME
@@ -0,0 +1 @@
+dishaforlife.com
diff --git a/index.html b/index.html
@@ -5,11 +5,11 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>E-Plant</title>
-    <meta name="keywords" content="Vite, React, plants, gardening, Air Purifying Plants, Aromatic Fragrant Plants, Insect Repellent Plants, Medicinal Plants, Low Maintenance Plants" /> <!-- Add meta keywords here -->
-
+    <meta name="keywords" content="Vite, React, plants, gardening, Air Purifying Plants, Aromatic Fragrant Plants, Insect Repellent Plants, Medicinal Plants, Low Maintenance Plants" />
+    <link rel="stylesheet" href="./src/index.css" />
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="./src/main.jsx"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -25,5 +25,6 @@
     "eslint-plugin-react-refresh": "^0.4.6",
     "gh-pages": "^6.1.1",
     "vite": "^5.2.0"
-  }
+  },
+ "homepage": "/shoppingreact/"
 }
diff --git a/src/AboutUs.jsx b/src/AboutUs.jsx
@@ -1,29 +1,35 @@
-import React from 'react';
-import './AboutUs.css';
+import React from "react";
+import "./AboutUs.css";
 
 function AboutUs() {
   return (
     <div className="about-us-container">
       {/* <h1 className="about-us-heading">About Us</h1> */}
-      <p className="about-us-description">Welcome to Paradise Nursery, where green meets serenity!</p>
+      <p className="about-us-description">
+        "Step into Disha Nursery, where nature and tranquility come together."
+      </p>
       <p className="about-us-content">
-        At Paradise Nursery, we are passionate about bringing nature closer to you. Our mission is to provide a wide range of 
-        high-quality plants that not only enhance the beauty of your surroundings but also contribute to a healthier and 
-        more sustainable lifestyle. From air-purifying plants to aromatic fragrant ones, we have something for every 
-        plant enthusiast.
+        At Disha Nursery, we are dedicated to connecting you with the beauty of
+        nature. Our mission is to offer a diverse selection of premium-quality
+        plants that elevate your surroundings and promote a healthier, more
+        sustainable way of life. Whether you're looking for air-purifying
+        greenery or delightfully fragrant blooms, we have something to inspire
+        every plant lover.
       </p>
       {/* <p className="plant_logo_left"><img src="https://p1.hiclipart.com/preview/922/979/640/green-leaf-logo-emoji-seedling-emoticon-sticker-plant-plant-stem-flower-png-clipart-thumbnail.jpg" height='50px' width='50px' alt="" /></p> */}
       <p className="about-us-content">
-        Our team of experts is dedicated to ensuring that each plant meets our strict standards of quality and care. 
-        Whether you're a seasoned gardener or just starting your green journey, we're here to support you every step of 
-        the way. Feel free to explore our collection, ask questions, and let us help you find the perfect plant for your 
-        home or office.
+        At Disha Nursery, our team of experts is committed to ensuring that
+        every plant meets our high standards of quality and care. Whether you're
+        an experienced gardener or embarking on your green journey, we're here
+        to guide you every step of the way. Explore our diverse collection, ask
+        questions, and let us help you discover the perfect plant for your home
+        or office.
       </p>
       {/* <p className="plant_logo_right"><img src="https://p1.hiclipart.com/preview/922/979/640/green-leaf-logo-emoji-seedling-emoticon-sticker-plant-plant-stem-flower-png-clipart-thumbnail.jpg" height='50px' width='50px' alt="" /></p> */}
 
       <p className="about-us-content">
-        Join us in our mission to create a greener, healthier world. Visit Paradise Nursery today and experience the 
-        beauty of nature right at your doorstep.
+        "Join us in our mission to create a greener, healthier world. Visit
+        Disha Nursery today and bring the beauty of nature to your doorstep."
       </p>
     </div>
   );

diff --git a/src/App.css b/src/App.css
@@ -19,7 +19,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background-image: url('https://cdn.pixabay.com/photo/2017/07/13/08/59/greenhouse-2499758_1280.jpg');
+  background-image: url("https://thumbs.dreamstime.com/b/gentle-nature-background-butterfly-blurred-324410107.jpg");
   background-size: 100% 100%;
   background-position: center;
   filter: brightness(0.8);
@@ -30,14 +30,14 @@
   justify-content: center;
   height: 100vh;
   width: 100vw;
- top: 100px;
+  top: 100px;
   backdrop-filter: blur(4px);
-  background-color: rgba(0,0,0,0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   gap: 20px;
 }
 
 .landing_content {
- margin-top: 430px;
+  margin-top: 430px;
   margin-left: 100px;
   transform: translate(-50%, -50%);
   z-index: 1;

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,45 +1,44 @@
-
-import React, { useState } from 'react';
-import ProductList from './ProductList';
-import './App.css';
-import AboutUs from './AboutUs';
+import React, { useState } from "react";
+import ProductList from "./ProductList";
+import "./App.css";
+import AboutUs from "./AboutUs";
 
 function App() {
-
   const [showProductList, setShowProductList] = useState(false);
+  const [cartCount, setCartCount] = useState(0);
 
   const handleGetStartedClick = () => {
     setShowProductList(true);
   };
 
   return (
     <div className="app-container">
-      <div className={`landing-page ${showProductList ? 'fade-out' : ''}`}>
+      <div className={`landing-page ${showProductList ? "fade-out" : ""}`}>
         <div className="background-image"></div>
         <div className="content">
-         <div className="landing_content">
-         <h1>Welcome To Paradise Nursery</h1>
-          <div className="divider"></div>
-          <p>Where Green Meets Serenity</p>
-
-          <button className="get-started-button" onClick={handleGetStartedClick}>
-            Get Started
-          </button>
-         </div>
-          <div className="aboutus_container">
-          <AboutUs/>
+          <div className="landing_content">
+            <h1>Welcome to Disha Nursery</h1>
+            <div className="divider"></div>
+            <p>Where Nature and Peace Flourish.</p>
+            <button
+              className="get-started-button"
+              onClick={handleGetStartedClick}
+            >
+              Get Started
+            </button>
           </div>
+          <div className="aboutus_container">
+            <AboutUs />
           </div>
-
+        </div>
       </div>
-      <div className={`product-list-container ${showProductList ? 'visible' : ''}`}>
-        <ProductList />
+      <div
+        className={`product-list-container ${showProductList ? "visible" : ""}`}
+      >
+        <ProductList cartCount={cartCount} setCartCount={setCartCount} />
       </div>
     </div>
   );
 }
 
 export default App;
-
-
-
diff --git a/src/CartItem.jsx b/src/CartItem.jsx
@@ -9,27 +9,42 @@ const CartItem = ({ onContinueShopping }) => {
 
   // Calculate total amount for all products in the cart
   const calculateTotalAmount = () => {
-
+    return cart.reduce((total, item) => {
+      const cost = parseFloat(item.cost.replace('$', ''));
+      return total + (cost * item.quantity);
+    }, 0).toFixed(2);
   };
 
   const handleContinueShopping = (e) => {
-
+    if (onContinueShopping) {
+      onContinueShopping(e);
+    }
   };
 
-
-
   const handleIncrement = (item) => {
+    dispatch(updateQuantity({
+      name: item.name,
+      quantity: item.quantity + 1
+    }));
   };
 
   const handleDecrement = (item) => {
-
+    if (item.quantity > 1) {
+      dispatch(updateQuantity({
+        name: item.name,
+        quantity: item.quantity - 1
+      }));
+    }
   };
 
   const handleRemove = (item) => {
+    dispatch(removeItem(item.name));
   };
 
   // Calculate total cost based on quantity for an item
   const calculateTotalCost = (item) => {
+    const cost = parseFloat(item.cost.replace('$', ''));
+    return (cost * item.quantity).toFixed(2);
   };
 
   return (
@@ -43,26 +58,44 @@ const CartItem = ({ onContinueShopping }) => {
               <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>
+                <button 
+                  className="cart-item-button cart-item-button-dec" 
+                  onClick={() => handleDecrement(item)}
+                  disabled={item.quantity <= 1}
+                >
+                  -
+                </button>
                 <span className="cart-item-quantity-value">{item.quantity}</span>
-                <button className="cart-item-button cart-item-button-inc" onClick={() => handleIncrement(item)}>+</button>
+                <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>
-      <div style={{ marginTop: '20px', color: 'black' }} className='total_cart_amount'></div>
+      <div style={{ marginTop: '20px', color: 'black' }} className='total_cart_amount'>
+        {cart.length > 0 ? `Total Items: ${cart.length}` : 'Your cart is empty'}
+      </div>
       <div className="continue_shopping_btn">
-        <button className="get-started-button" onClick={(e) => handleContinueShopping(e)}>Continue Shopping</button>
+        <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" 
+          disabled={cart.length === 0}
+        >
+          Checkout
+        </button>
       </div>
     </div>
   );
 };
 
 export default CartItem;
-
-
diff --git a/src/CartSlice.jsx b/src/CartSlice.jsx
@@ -1,23 +1,33 @@
-import { createSlice } from '@reduxjs/toolkit';
+import { createSlice } from "@reduxjs/toolkit";
 
-export const CartSlice = createSlice({
-  name: 'cart',
+const cartSlice = createSlice({
+  name: "cart",
   initialState: {
     items: [], // Initialize items as an empty array
   },
   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;
+      }
     },
   },
 });
 
-export const { addItem, removeItem, updateQuantity } = CartSlice.actions;
+export const { addItem, removeItem, updateQuantity } = cartSlice.actions;
 
-export default CartSlice.reducer;
+export default cartSlice.reducer;