Stian Gaustad, C#EX3

src/App.jsx

@@ -1,61 +1,56 @@
+import { useState, useEffect } from 'react'
 import './styles/reset.css'
 import './styles/index.css'
-
+import Header from "./Components/Header/Header.jsx"
+import Cart from "./Components/Cart/Cart.jsx"
+import Credit from "./Components/Credit/Credit.jsx"
 import initialStoreItems from './store-items'
 
+
 /*
  Here's what a store item should look like
  {
  id: '001-beetroot',
  name: 'beetroot',
- price: 0.35
+ price: 0.35,
+ type: "vegetable"
  }
 
  What should a cart item look like? 🤔
  */
 
-console.log(initialStoreItems)
+//console.log(initialStoreItems)
 
 export default function App() {
-  // Setup state here...
+  const [cartItems, setCartItems] = useState([])
+
+  useEffect(() => {
+    const initialCart = []
+    initialStoreItems?.forEach((entry) => {
+      initialCart.push({...entry, quantity: 0})
+    })
+    setCartItems(initialCart)
+  },[])
+
+  const addItemToCart = (itemId) => {
+    const items = cartItems
+    const itemIndex = items.findIndex((i) => i.id == itemId)
+    const updatedItem = items.at(itemIndex)
+    updatedItem.quantity += 1
+    setCartItems([...items])
+  }
+
+  const removeItemFromCart = (itemId) => {
+    const updateItem = cartItems
+    updateItem[updateItem.findIndex((i) => i.id === itemId)].quantity -= 1
+    setCartItems([...updateItem])
+  }
 
   return (
     <>
-      <header id="store">
-        <h1>Greengrocers</h1>
-        <ul className="item-list store--item-list">
-          {/* Write some code here... */}
-        </ul>
-      </header>
-      <main id="cart">
-        <h2>Your Cart</h2>
-        <div className="cart--item-list-container">
-          <ul className="item-list cart--item-list">
-            {/* Write some code here... */}
-          </ul>
-        </div>
-        <div className="total-section">
-          <div>
-            <h3>Total</h3>
-          </div>
-          <div>
-            <span className="total-number">£0.00</span>
-          </div>
-        </div>
-      </main>
-      <div>
-        Icons made by
-        <a
-          href="https://www.flaticon.com/authors/icongeek26"
-          title="Icongeek26"
-        >
-          Icongeek26
-        </a>
-        from
-        <a href="https://www.flaticon.com/" title="Flaticon">
-          www.flaticon.com
-        </a>
-      </div>
+      <Header storeItems={initialStoreItems} addFunction={addItemToCart}/>
+      <Cart cart={cartItems} increment={addItemToCart} decrement={removeItemFromCart}/>
+      <Credit/>
     </>
   )
 }

src/Components/Cart/Cart.css

@@ -0,0 +1,118 @@
+/* Cart */
+
+#cart {
+    height: 55vh;
+    padding: 1rem;
+
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    grid-gap: 1rem;
+    justify-content: center;
+
+    border-top: 2px solid #00675b;
+  }
+
+  #cart h2 {
+    margin-bottom: 0;
+    text-align: center;
+  }
+
+  .cart--item-list-container {
+    min-width: 320px;
+    height: 100%;
+    padding: 0 1rem;
+
+    overflow-y: scroll;
+
+    border-radius: 0.5rem;
+    border: 2px solid #757575;
+  }
+
+  @media only screen and (max-width: 450px) {
+    .cart--item-list-container {
+      border: none;
+    }
+  }
+
+  .cart--item-list li {
+    padding: 1rem 0;
+
+    display: grid;
+    grid-template-columns: 24px minmax(150px, 1fr) repeat(3, auto);
+    grid-gap: 0.5rem;
+    align-items: center;
+
+    border-bottom: 1px dotted #000000;
+
+    font-size: 1.25rem;
+  }
+
+  .cart--item-list li:last-child {
+    border-bottom: none;
+  }
+
+  .cart--item-icon {
+    width: 24px;
+  }
+
+  .center {
+    display: grid;
+    place-items: center;
+  }
+
+  .quantity-btn {
+    width: 20px;
+    height: 20px;
+    padding: 0;
+
+    border-radius: 0.25rem;
+
+    font-weight: bold;
+  }
+
+  .remove-btn {
+    border: 2px solid #d32f2f;
+    background-color: #ffcdd2;
+    color: #d32f2f;
+  }
+
+  .add-btn {
+    border: 2px solid #388e3c;
+    background-color: #c8e6c9;
+    color: #388e3c;
+  }
+
+  .quantity-text {
+    width: 24px;
+    height: 24px;
+
+    border-radius: 0.25rem;
+    border: 2px solid #757575;
+    color: #757575;
+
+    text-align: center;
+    font-size: 0.75rem;
+    font-weight: bold;
+  }
+
+  /* Total */
+
+  .total-section {
+    padding: 0.5rem 1rem;
+
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+  }
+
+  .total-number {
+    font-weight: bold;
+  }
+
+  @media only screen and (max-width: 450px) {
+    .total-section {
+      border-top: 2px solid #00675b;
+      border-bottom: 2px solid #00675b;
+    }
+  }
+

src/Components/Cart/Cart.jsx

@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react'
+import "./Cart.css"
+import TotalCost from "./TotalCost/TotalCost.jsx"
+import PropTypes from 'prop-types'
+
+const Cart = ({cart, increment, decrement}) => {
+  const [cartPrice, setCartPrice] = useState(0)
+
+  useEffect(() => {
+    let price = 0
+    cart.forEach((item) => {
+      price += (parseFloat(item.price) * parseInt(item.quantity))
+    })
+    setCartPrice(price.toFixed(2))
+  }, [cart])
+
+  return (
+      <main id="cart">
+      <h2>Your Cart</h2>
+      <div className="cart--item-list-container">
+        <ul className="item-list cart--item-list">
+          {cart?.filter((e) => e.quantity !== 0)
+            .map((entry, index) => 
+            <li key={index}>
+              <img 
+                className="cart--item-icon"
+                src={"/assets/icons/"+entry.id+".svg"}
+              />
+              <p className="center">{entry.name}</p>
+              <button 
+                className="quantity-btn remove-btn" 
+                onClick={() => decrement(entry.id)}
+              >-</button>
+                <span className="center quantity-text">{entry.quantity}</span>
+              <button 
+                className="quantity-btn add-btn" 
+                onClick={() => increment(entry.id)}
+              >+</button>
+            </li>
+          )}
+        </ul>
+      </div>
+      <TotalCost cartPrice={cartPrice} />
+    </main>
+  )
+}
+
+Cart.propTypes = {
+  cart: PropTypes.array,
+  increment: PropTypes.func,
+  decrement: PropTypes.func,
+}
+
+export default Cart

src/Components/Cart/TotalCost/TotalCost.jsx

@@ -0,0 +1,14 @@
+const TotalCost = ({cartPrice}) => {
+    return (
+        <div className="total-section">
+            <div>
+                <h3>Total</h3>
+            </div>
+            <div>
+                <span className="total-number">£{cartPrice}</span>
+            </div>
+      </div>
+    )
+}
+
+export default TotalCost

src/Components/Credit/Credit.jsx

@@ -0,0 +1,19 @@
+const Credit = () => {
+    return (
+        <div>
+            Icons made by 
+            <a
+            href="https://www.flaticon.com/authors/icongeek26"
+            title="Icongeek26"
+            >
+                Icongeek26
+            </a>
+                from
+            <a href="https://www.flaticon.com/" title="Flaticon">
+                www.flaticon.com
+            </a>
+      </div>
+    )
+}
+
+export default Credit

src/Components/Header/Header.css

@@ -0,0 +1,46 @@
+/* Store */
+
+#store {
+    height: 45vh;
+    padding: 1rem;
+    overflow-y: scroll;
+    padding-left: 150px;
+
+    background-color: #e7f4ea;
+  }
+
+  #store h1 {
+    text-align: center;
+  }
+
+  .store--item-list {
+    display: grid;
+    grid-template-columns: repeat(4, 125px);
+    grid-gap: 1rem;
+    justify-content: center;
+  }
+
+  .store--item-list li {
+    display: grid;
+    place-items: center;
+    grid-row-gap: 0.5rem;
+  }
+
+  .store--item-icon {
+    width: 125px;
+    height: 125px;
+  }
+
+  @media only screen and (max-width: 800px) {
+    .store--item-list {
+      grid-template-columns: repeat(3, 125px);
+    }
+  }
+
+  @media only screen and (max-width: 500px) {
+    .store--item-list {
+      grid-template-columns: repeat(2, 125px);
+    }
+  }
+
+