diff --git a/.eslintrc.cjs b/.eslintrc.cjs
deleted file mode 100644
index 4dcb439..0000000
--- a/.eslintrc.cjs
+++ /dev/null
@@ -1,20 +0,0 @@
-module.exports = {
- root: true,
- env: { browser: true, es2020: true },
- extends: [
- 'eslint:recommended',
- 'plugin:react/recommended',
- 'plugin:react/jsx-runtime',
- 'plugin:react-hooks/recommended',
- ],
- ignorePatterns: ['dist', '.eslintrc.cjs'],
- parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
- settings: { react: { version: '18.2' } },
- plugins: ['react-refresh'],
- rules: {
- 'react-refresh/only-export-components': [
- 'warn',
- { allowConstantExport: true },
- ],
- },
-}
diff --git a/Untitled Diagram.Greengrocers.drawio b/Untitled Diagram.Greengrocers.drawio
new file mode 100644
index 0000000..19dabd6
--- /dev/null
+++ b/Untitled Diagram.Greengrocers.drawio
@@ -0,0 +1,72 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/App.jsx b/src/App.jsx
index 03e658b..36c6f0c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,43 +2,12 @@ import './styles/reset.css'
import './styles/index.css'
import initialStoreItems from './store-items'
-
+import Content from './components/Content'
export default function App() {
+
return (
<>
-
-
- Your Cart
-
-
-
-
Total
-
-
- £0.00
-
-
Your Cart
+
+
+
+
+
+
Total
+
+
+ £{total.toFixed(2)}
+
+
+ {
+ items.map((item, index) =>
+ <>
+ {
+ item.idName !== '' && -
+
+ {item.itemName}
+
+ {item.quantity}
+
+
+ }
+
+ )
+ }
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/Content.jsx b/src/components/Content.jsx
new file mode 100644
index 0000000..6901432
--- /dev/null
+++ b/src/components/Content.jsx
@@ -0,0 +1,69 @@
+import { useState } from "react";
+import Cart from "./Cart";
+import HeaderContent from "./HeaderContent";
+import StoreItem from "./StoreItem";
+import CartItem from "./CartItem";
+
+export default function Content(initialStoreItems){
+
+
+ const [items, setItems] = useState([{
+ itemName : '',
+ quantity : 0,
+ idName : ''
+ }])
+
+ const [total, setTotal] = useState(0)
+ const handleclick = (e) => {
+ const { id , value, name} = e.target
+ const plusOrMin = name !== 'negative-button' ? +1 : -1
+ const existItem = items.find((item) => item.idName === id)
+ console.log(existItem)
+ if(plusOrMin === -1 && existItem.quantity === 1){
+ setItems(items.filter(item => item.idName !== id))
+ setTotal( total-0.35 )
+ //if we remove a item and total becomes 0 then user will see '-0.00', so with the next line of code we wont have the problem
+ total === 0 ? 0: total
+ }else if (existItem){
+ setItems(
+ items.map(item => item.idName === id ? {
+ ...item,
+ quantity: item.quantity + plusOrMin
+ } : item)
+ )
+ setTotal(plusOrMin !== -1 ? total+0.35 : total-0.35)
+ } else {
+ setItems([...items,{
+ itemName:value,
+ quantity:1,
+ idName:id
+ }])
+ setTotal(total+0.35)
+ }
+ }
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/HeaderContent.jsx b/src/components/HeaderContent.jsx
new file mode 100644
index 0000000..1f1dd31
--- /dev/null
+++ b/src/components/HeaderContent.jsx
@@ -0,0 +1,9 @@
+
+export default function HeaderContent({ children }) {
+ return (
+
+ Greengrocers
+ {children}
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/ListItems.jsx b/src/components/ListItems.jsx
new file mode 100644
index 0000000..14338c6
--- /dev/null
+++ b/src/components/ListItems.jsx
@@ -0,0 +1,6 @@
+export default function ListItems(){
+
+}
\ No newline at end of file
diff --git a/src/components/StoreItem.jsx b/src/components/StoreItem.jsx
new file mode 100644
index 0000000..7f4d21a
--- /dev/null
+++ b/src/components/StoreItem.jsx
@@ -0,0 +1,19 @@
+export default function StoreItem({ initialStoreItems, onClick }){
+ const itemsList = initialStoreItems.items
+ return (
+
+ {itemsList.map((item,index) => {
+ return (
+ -
+
+
+
+ )
+ })}
+
+ )
+}
+
+