diff --git a/shopping-cart/index.html b/shopping-cart/index.html index bf1c93a..3e6a866 100644 --- a/shopping-cart/index.html +++ b/shopping-cart/index.html @@ -3,6 +3,12 @@ + + + Smig.Tech Coaching diff --git a/shopping-cart/src/App.jsx b/shopping-cart/src/App.jsx index c68d04d..8bf3d4f 100644 --- a/shopping-cart/src/App.jsx +++ b/shopping-cart/src/App.jsx @@ -1,6 +1,6 @@ import { useState } from "react"; import { Outlet } from "react-router-dom"; -import "./App.css"; +import "./css/App.css"; import Navbar from "./components/navbar"; function App() { diff --git a/shopping-cart/src/Cart.jsx b/shopping-cart/src/Cart.jsx index e1ba498..e183976 100644 --- a/shopping-cart/src/Cart.jsx +++ b/shopping-cart/src/Cart.jsx @@ -10,8 +10,10 @@ const Cart = () => { return (
-

Cart

- +
+ + +
); }; @@ -21,6 +23,7 @@ function Bag({ cartKeys, cart, setCart }) { <> {cartKeys.length > 0 ? (
+

Cart

{cartKeys.map((key, index) => ( { + subTotal += cart[item].price * cart[item].qty; + numItems += cart[item].qty; + }); + const shippingFee = subTotal * 0.1; + const total = subTotal + shippingFee; + + return ( +
+

Order Summary

+

+ Subtotal ({numItems} items): ${currencyFormat(subTotal)} +

+

Shipping (10%): ${currencyFormat(shippingFee)}

+

Total: ${currencyFormat(total)}

+
+ ); +} + function CartItem({ item, cart, setCart }) { const { title, price, image, qty } = item; @@ -45,8 +72,8 @@ function CartItem({ item, cart, setCart }) { {title}

{title}

-

Price: ${currencyFormat(price)}

-

Qty: {qty}

+

Price: ${currencyFormat(price)} x

+

Qty: {qty}

-

Total: {currencyFormat(qty * price)}

+

total: ${currencyFormat(qty * price)}

@@ -103,4 +130,8 @@ Bag.propTypes = { setCart: PropTypes.func, }; +OrderSummary.propTypes = { + cart: PropTypes.object, +}; + export default Cart; diff --git a/shopping-cart/src/components/productCollection.module.css b/shopping-cart/src/components/productCollection.module.css index 0d26554..ab8720d 100644 --- a/shopping-cart/src/components/productCollection.module.css +++ b/shopping-cart/src/components/productCollection.module.css @@ -8,9 +8,9 @@ .card { display: flex; flex-direction: column; - max-width: calc(100% / 5); + max-width: 350px; justify-content: end; - /*flex: 1;*/ padding: 1.5rem; margin: 1.5rem; + background: gray; } diff --git a/shopping-cart/src/components/products.module.css b/shopping-cart/src/components/products.module.css index 302ced5..d677f47 100644 --- a/shopping-cart/src/components/products.module.css +++ b/shopping-cart/src/components/products.module.css @@ -1,7 +1,7 @@ .img { width: 100%; - height: auto; + max-height: 300px; vertical-align: middle; - object-fit: cover; + object-fit: contain; float: left; } diff --git a/shopping-cart/src/App.css b/shopping-cart/src/css/App.css similarity index 100% rename from shopping-cart/src/App.css rename to shopping-cart/src/css/App.css diff --git a/shopping-cart/src/css/cart.module.css b/shopping-cart/src/css/cart.module.css index abde53a..8701719 100644 --- a/shopping-cart/src/css/cart.module.css +++ b/shopping-cart/src/css/cart.module.css @@ -1,3 +1,8 @@ .container { display: flex; + justify-content: space-between; +} + +.summary { + margin-right: 1.5rem; } diff --git a/shopping-cart/src/index.css b/shopping-cart/src/css/index.css similarity index 81% rename from shopping-cart/src/index.css rename to shopping-cart/src/css/index.css index f1540d6..b1f74de 100644 --- a/shopping-cart/src/index.css +++ b/shopping-cart/src/css/index.css @@ -1,11 +1,11 @@ :root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + font-family: "Roboto Condensed", Inter, system-ui, sans-serif; line-height: 1.5; font-weight: 400; color-scheme: light dark; color: rgba(255, 255, 255, 0.87); - background-color: #242424; + /*background-color: #242424;*/ font-synthesis: none; text-rendering: optimizeLegibility; @@ -18,6 +18,13 @@ body { display: flex; } +.roboto-condensed-fnt { + font-family: "Roboto Condensed", sans-serif; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; +} + /*h1 {*/ /* font-size: 3.2em;*/ /* line-height: 1.1;*/ diff --git a/shopping-cart/src/main.jsx b/shopping-cart/src/main.jsx index 6e8aaf2..b9e93a3 100644 --- a/shopping-cart/src/main.jsx +++ b/shopping-cart/src/main.jsx @@ -1,6 +1,6 @@ import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; -import "./index.css"; +import "./css/index.css"; import { createBrowserRouter, RouterProvider } from "react-router-dom"; import routes from "./routes";