diff --git a/greengrocers-app-diagram.png b/greengrocers-app-diagram.png new file mode 100644 index 0000000..974d797 Binary files /dev/null and b/greengrocers-app-diagram.png differ diff --git a/index.html b/index.html index c1c82ab..f17aa6d 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - + @@ -8,6 +8,7 @@
+ diff --git a/src/App.jsx b/src/App.jsx index 03e658b..de8f87a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,31 +1,44 @@ -import './styles/reset.css' -import './styles/index.css' +import "./styles/reset.css"; +import "./styles/index.css"; +import initialStoreItems from "./store-items"; -import initialStoreItems from './store-items' +import { useState } from "react"; +import Header from "./Header"; +import Cart from "./Cart"; export default function App() { + const [products, setProducts] = useState(initialStoreItems); + const [cart, setCart] = useState([]); + + function handleAddToCartClick(event) { + const { id } = event.target; + const isFound = cart.find((product) => product.id === id); + + products.forEach((product) => { + if (product.id === id && !isFound) { + setCart([...cart, { ...product, quantity: 1 }]); + } + + if (product.id === id && isFound) { + const index = cart.findIndex((product) => product.id === id); + const item = cart[index]; + + const newCart = cart.map((product) => { + if (product.id === item.id) { + product.quantity = product.quantity + 1; + } + return product; + }); + + setCart(newCart); + } + }); + } + return ( <> -
-

Greengrocers

- -
-
-

Your Cart

-
- -
-
-
-

Total

-
-
- £0.00 -
-
-
+
+
Icons made by
- ) + ); } diff --git a/src/Cart.jsx b/src/Cart.jsx new file mode 100644 index 0000000..115c5fe --- /dev/null +++ b/src/Cart.jsx @@ -0,0 +1,30 @@ +import CartList from "./CartList"; + +export default function Cart(props) { + let total = 0; + + props.cart.forEach((product) => { + const productQuantity = product.quantity; + const productPrice = product.price; + + const cost = productQuantity * productPrice; + total += cost; + }); + + return ( +
+

Your Cart

+
+ +
+
+
+

Total

+
+
+ {total.toFixed(2)} +
+
+
+ ); +} diff --git a/src/CartList.jsx b/src/CartList.jsx new file mode 100644 index 0000000..3057378 --- /dev/null +++ b/src/CartList.jsx @@ -0,0 +1,61 @@ +export default function CartList(props) { + function handleIncrementClick(event) { + const { id } = event.target; + + const incrementQuantity = props.cart.map((product) => { + if (product.id === id) { + product.quantity = product.quantity + 1; + } + return product; + }); + + props.setCart(incrementQuantity); + } + + function handleDecrementClick(event) { + const { id } = event.target; + + const decrementQuantity = props.cart.map((product) => { + if (product.id === id && product.quantity > 0) { + product.quantity = product.quantity - 1; + } + return product; + }); + + props.setCart( + decrementQuantity.filter((product) => product.quantity !== 0) + ); + } + + return ( +
    + {props.cart.map((product) => { + return ( +
  • + {`foto +

    {product.name}

    + + {product.quantity} + +
    • + ); + })} +
+ ); +} diff --git a/src/Header.jsx b/src/Header.jsx new file mode 100644 index 0000000..829a5dd --- /dev/null +++ b/src/Header.jsx @@ -0,0 +1,21 @@ +export default function Header(props) { + return ( +
+

Greengrocers

+
    + {props.products.map((product, index) => { + return ( +
  • +
    + beetroot +
    + +
    • + ); + })} +
+
+ ); +} diff --git a/src/assets/icons/001-beetroot.svg b/src/assets/icons/001-beetroot.svg new file mode 100644 index 0000000..48e1ede --- /dev/null +++ b/src/assets/icons/001-beetroot.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/002-carrot.svg b/src/assets/icons/002-carrot.svg new file mode 100644 index 0000000..6d29469 --- /dev/null +++ b/src/assets/icons/002-carrot.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/003-apple.svg b/src/assets/icons/003-apple.svg new file mode 100644 index 0000000..0c2890d --- /dev/null +++ b/src/assets/icons/003-apple.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/004-apricot.svg b/src/assets/icons/004-apricot.svg new file mode 100644 index 0000000..2143fca --- /dev/null +++ b/src/assets/icons/004-apricot.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/005-avocado.svg b/src/assets/icons/005-avocado.svg new file mode 100644 index 0000000..3440e3c --- /dev/null +++ b/src/assets/icons/005-avocado.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/006-bananas.svg b/src/assets/icons/006-bananas.svg new file mode 100644 index 0000000..d47fcc1 --- /dev/null +++ b/src/assets/icons/006-bananas.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/007-bell-pepper.svg b/src/assets/icons/007-bell-pepper.svg new file mode 100644 index 0000000..2e696ff --- /dev/null +++ b/src/assets/icons/007-bell-pepper.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/008-berry.svg b/src/assets/icons/008-berry.svg new file mode 100644 index 0000000..5838435 --- /dev/null +++ b/src/assets/icons/008-berry.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/009-blueberry.svg b/src/assets/icons/009-blueberry.svg new file mode 100644 index 0000000..5c1e516 --- /dev/null +++ b/src/assets/icons/009-blueberry.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/010-eggplant.svg b/src/assets/icons/010-eggplant.svg new file mode 100644 index 0000000..96c3d76 --- /dev/null +++ b/src/assets/icons/010-eggplant.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/store-items.js b/src/store-items.js index 96dd2ea..feebe7e 100644 --- a/src/store-items.js +++ b/src/store-items.js @@ -1,75 +1,84 @@ - -const storeItems = [ +const storeItems = [ { id: "001-beetroot", name: "beetroot", price: 0.35, - description: "The beetroot is the taproot portion of a beet plant, usually known in North America as beets while the vegetable is referred to as beetroot in British English, and also known as the table beet, garden beet, red beet, dinner beet or golden beet.", - type: "vegetable" + description: + "The beetroot is the taproot portion of a beet plant, usually known in North America as beets while the vegetable is referred to as beetroot in British English, and also known as the table beet, garden beet, red beet, dinner beet or golden beet.", + type: "vegetable", }, { id: "002-carrot", name: "carrot", price: 0.35, - description: "The carrot is a root vegetable, typically orange in color, though heirloom variants including purple, black, red, white, and yellow cultivars exist, all of which are domesticated forms of the wild carrot, Daucus carota, native to Europe and Southwestern Asia.", - type: "vegetable" + description: + "The carrot is a root vegetable, typically orange in color, though heirloom variants including purple, black, red, white, and yellow cultivars exist, all of which are domesticated forms of the wild carrot, Daucus carota, native to Europe and Southwestern Asia.", + type: "vegetable", }, { id: "003-apple", name: "apple", price: 0.35, - description: "An apple is a round, edible fruit produced by an apple tree (Malus spp., among them the domestic or orchard apple; Malus domestica).", - type: "fruit" + description: + "An apple is a round, edible fruit produced by an apple tree (Malus spp., among them the domestic or orchard apple; Malus domestica).", + type: "fruit", }, { id: "004-apricot", name: "apricot", price: 0.35, - description: "An apricot is a fruit, or the tree that bears the fruit, of several species in the genus Prunus.", - type: "fruit" + description: + "An apricot is a fruit, or the tree that bears the fruit, of several species in the genus Prunus.", + type: "fruit", }, { id: "005-avocado", name: "avocado", price: 0.35, - description: "The avocado, alligator pear or avocado pear (Persea americana) is a medium-sized, evergreen tree in the laurel family (Lauraceae).", - type: "fruit" + description: + "The avocado, alligator pear or avocado pear (Persea americana) is a medium-sized, evergreen tree in the laurel family (Lauraceae).", + type: "fruit", }, { id: "006-bananas", name: "bananas", price: 0.35, - description: "A banana is an elongated, edible fruit – botanically a berry – produced by several kinds of large herbaceous flowering plants in the genus Musa.", - type: "fruit" + description: + "A banana is an elongated, edible fruit – botanically a berry – produced by several kinds of large herbaceous flowering plants in the genus Musa.", + type: "fruit", }, { id: "007-bell-pepper", name: "bell pepper", price: 0.35, - description: "The bell pepper (also known as sweet pepper, pepper, capsicum /ˈkæpsɪkəm/ or in some places, mangoes) is the fruit of plants in the Grossum Group of the species Capsicum annuum.", - type: "fruit" + description: + "The bell pepper (also known as sweet pepper, pepper, capsicum /ˈkæpsɪkəm/ or in some places, mangoes) is the fruit of plants in the Grossum Group of the species Capsicum annuum.", + type: "fruit", }, { id: "008-berry", name: "berry", price: 0.35, - description: "A berry is a small, pulpy, and often edible fruit. Typically, berries are juicy, rounded, brightly colored, sweet, sour or tart, and do not have a stone or pit, although many pips or seeds may be present.", - type: "fruit" + description: + "A berry is a small, pulpy, and often edible fruit. Typically, berries are juicy, rounded, brightly colored, sweet, sour or tart, and do not have a stone or pit, although many pips or seeds may be present.", + type: "fruit", }, { id: "009-blueberry", name: "blueberry", price: 0.35, - description: "Blueberry is a widely distributed and widespread group of perennial flowering plant with blue or purple berries.", - type: "fruit" + description: + "Blueberry is a widely distributed and widespread group of perennial flowering plant with blue or purple berries.", + type: "fruit", }, { id: "010-eggplant", name: "eggplant", price: 0.35, - description: "Eggplant, aubergine, brinjal, or baigan is a plant species in the nightshade family Solanaceae. Solanum melongena is grown worldwide for its edible fruit.", - type: "vegetable" - } -] + description: + "Eggplant, aubergine, brinjal, or baigan is a plant species in the nightshade family Solanaceae. Solanum melongena is grown worldwide for its edible fruit.", + type: "vegetable", + }, +]; -export default storeItems +export default storeItems;