diff --git a/Components_Tree_Diagram/Components-Tree_Diagram.html b/Components_Tree_Diagram/Components-Tree_Diagram.html new file mode 100644 index 0000000..6d9dca7 --- /dev/null +++ b/Components_Tree_Diagram/Components-Tree_Diagram.html @@ -0,0 +1,11 @@ + + + + +Untitled Diagram + + +
+ + + \ No newline at end of file diff --git a/Components_Tree_Diagram/Components-Tree_Diagram.jpg b/Components_Tree_Diagram/Components-Tree_Diagram.jpg new file mode 100644 index 0000000..a70ccc0 Binary files /dev/null and b/Components_Tree_Diagram/Components-Tree_Diagram.jpg differ diff --git a/package-lock.json b/package-lock.json index ea547b5..0460136 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3654,9 +3654,9 @@ } }, "node_modules/vite": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz", - "integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==", + "version": "4.5.3", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz", + "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==", "dev": true, "dependencies": { "esbuild": "^0.18.10", diff --git a/src/App.jsx b/src/App.jsx index 03e658b..400dceb 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,31 +1,28 @@ import './styles/reset.css' import './styles/index.css' +import { useState } from 'react' + +// import initialStoreItems from './store-items' + +import Store from './Components/Store' +import Cart from './Components/Cart' +import Total from './Components/Total' + +export default function App() { + const [cartProds, setCartProds] = useState([]) -import initialStoreItems from './store-items' -export default function App() { return ( <>

Greengrocers

- +
-

Your Cart

-
- -
-
-
-

Total

-
-
- £0.00 -
-
+ +
+
Icons made by p.id === product.id); + + if (inCart) { + inCart.qty++; + setCartProds([...cartProds]); + } else { + const addProduct = { ...product, qty: 1 }; + setCartProds([...cartProds, addProduct]); + } + } + + return ( + + ) +} \ No newline at end of file diff --git a/src/Components/Cart.jsx b/src/Components/Cart.jsx new file mode 100644 index 0000000..bf0548f --- /dev/null +++ b/src/Components/Cart.jsx @@ -0,0 +1,13 @@ +import CartProducts from "./CartProducts" +export default function Cart({ cartProds, setCartProds }) { + return ( + <> +

Your Cart

+
+
    + +
+
+ + ) +} \ No newline at end of file diff --git a/src/Components/CartProducts.jsx b/src/Components/CartProducts.jsx new file mode 100644 index 0000000..c023d42 --- /dev/null +++ b/src/Components/CartProducts.jsx @@ -0,0 +1,31 @@ +export default function CartProducts({ cartProds, setCartProds }) { + + function handleClick(e, prod) { + if (e.target.innerText === '+') { + prod.qty++ + } + if (e.target.innerText === '-' && prod.qty > 0) { + prod.qty-- + } + setCartProds([...cartProds]) + } + + return ( + cartProds.map((prod, index) => { + if (prod.qty) { + return ( +
  • + {prod.name} +

    {prod.name}

    + + {prod.qty} + +
    • + ) + } + }) + ) +} \ No newline at end of file diff --git a/src/Components/Store.jsx b/src/Components/Store.jsx new file mode 100644 index 0000000..bb08407 --- /dev/null +++ b/src/Components/Store.jsx @@ -0,0 +1,12 @@ +import { useState } from 'react' +import initialStoreItems from '../store-items' +import StoreItem from "./StoreItem" + +export default function Store({ cartProds, setCartProds }) { + const [products, setProducts] = useState(initialStoreItems) + return ( + + ) +} \ No newline at end of file diff --git a/src/Components/StoreItem.jsx b/src/Components/StoreItem.jsx new file mode 100644 index 0000000..6175a26 --- /dev/null +++ b/src/Components/StoreItem.jsx @@ -0,0 +1,21 @@ +import AddToCart from "./AddToCart" + +export default function StoreItem({ products, cartProds, setCartProds }) { + + + return ( + products.map(product => ( +
  • +
    + {product.name} +
    +
    + +

    Price: ${product.price}

    + + +
    +
    • + )) + ) +} diff --git a/src/Components/Total.jsx b/src/Components/Total.jsx new file mode 100644 index 0000000..479a245 --- /dev/null +++ b/src/Components/Total.jsx @@ -0,0 +1,15 @@ +export default function Total({ cartProds }) { + + const total = cartProds.reduce((total, prod) => (total += prod.price * prod.qty),0) + + return ( +
    +
    +

    Total

    +
    +
    + £{total.toFixed(2)} +
    +
    + ) +} \ No newline at end of file