smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2024-12-25 22:10:43 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

reorg tree and add summary

Browse source
This commit is contained in:
Mike 2024-10-18 07:18:29 -04:00
parent 6babd2bee0
commit 87cfe81d2b
9 changed files with 62 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
shopping-cart/index.html
View file

@ -3,6 +3,12 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/favicon.png" /> <link rel="icon" type="image/png" href="/favicon.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Smig.Tech Coaching</title> <title>Smig.Tech Coaching</title>
</head> </head>

2
shopping-cart/src/App.jsx
View file

@ -1,6 +1,6 @@
import { useState } from "react"; import { useState } from "react";
import { Outlet } from "react-router-dom"; import { Outlet } from "react-router-dom";
import "./App.css"; import "./css/App.css";
import Navbar from "./components/navbar"; import Navbar from "./components/navbar";
function App() { function App() {

41
shopping-cart/src/Cart.jsx
View file

@ -10,8 +10,10 @@ const Cart = () => {
return ( return (
<div> <div>
<h2>Cart</h2> <div className={styles.container}>
<Bag cartKeys={cartKeys} cart={cart} setCart={setCart} /> <Bag cartKeys={cartKeys} cart={cart} setCart={setCart} />
<OrderSummary cart={cart} />
</div>
</div> </div>
); );
}; };
@ -21,6 +23,7 @@ function Bag({ cartKeys, cart, setCart }) {
<> <>
{cartKeys.length > 0 ? ( {cartKeys.length > 0 ? (
<div> <div>
<h2>Cart</h2>
{cartKeys.map((key, index) => ( {cartKeys.map((key, index) => (
<CartItem <CartItem
item={cart[key]} item={cart[key]}
@ -37,6 +40,30 @@ function Bag({ cartKeys, cart, setCart }) {
); );
} }
function OrderSummary({ cart }) {
const cartItems = Object.keys(cart);
let numItems = 0;
let subTotal = 0;
cartItems.forEach((item) => {
subTotal += cart[item].price * cart[item].qty;
numItems += cart[item].qty;
});
const shippingFee = subTotal * 0.1;
const total = subTotal + shippingFee;
return (
<div className={styles.summary}>
<h2>Order Summary</h2>
<p>
Subtotal ({numItems} items): ${currencyFormat(subTotal)}
</p>
<p>Shipping (10%): ${currencyFormat(shippingFee)}</p>
<p>Total: ${currencyFormat(total)}</p>
</div>
);
}
function CartItem({ item, cart, setCart }) { function CartItem({ item, cart, setCart }) {
const { title, price, image, qty } = item; const { title, price, image, qty } = item;
@ -45,8 +72,8 @@ function CartItem({ item, cart, setCart }) {
<img src={image} alt={title} /> <img src={image} alt={title} />
<div> <div>
<h3>{title}</h3> <h3>{title}</h3>
<p>Price: ${currencyFormat(price)}</p> <p>Price: ${currencyFormat(price)} x </p>
<p>Qty: {qty}</p> <p>Qty: {qty} </p>
</div> </div>
<div> <div>
<button onClick={() => decreaseQty(item, cart, setCart)}> <button onClick={() => decreaseQty(item, cart, setCart)}>
@ -58,7 +85,7 @@ function CartItem({ item, cart, setCart }) {
</button> </button>
</div> </div>
<div> <div>
<p>Total: {currencyFormat(qty * price)}</p> <p>total: ${currencyFormat(qty * price)} </p>
<button onClick={() => removeFromCart(item, cart, setCart)}> <button onClick={() => removeFromCart(item, cart, setCart)}>
Delete Delete
</button> </button>
@ -103,4 +130,8 @@ Bag.propTypes = {
setCart: PropTypes.func, setCart: PropTypes.func,
}; };
OrderSummary.propTypes = {
cart: PropTypes.object,
};
export default Cart; export default Cart;

4
shopping-cart/src/components/productCollection.module.css
View file

@ -8,9 +8,9 @@
.card { .card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-width: calc(100% / 5); max-width: 350px;
justify-content: end; justify-content: end;
/*flex: 1;*/
padding: 1.5rem; padding: 1.5rem;
margin: 1.5rem; margin: 1.5rem;
background: gray;
} }

4
shopping-cart/src/components/products.module.css
View file

@ -1,7 +1,7 @@
.img { .img {
width: 100%; width: 100%;
height: auto; max-height: 300px;
vertical-align: middle; vertical-align: middle;
object-fit: cover; object-fit: contain;
float: left; float: left;
} }

0
shopping-cart/src/App.css → shopping-cart/src/css/App.css
View file

5
shopping-cart/src/css/cart.module.css
View file

@ -1,3 +1,8 @@
.container { .container {
display: flex; display: flex;
justify-content: space-between;
}
.summary {
margin-right: 1.5rem;
} }

11
shopping-cart/src/index.css → shopping-cart/src/css/index.css
View file

@ -1,11 +1,11 @@
:root { :root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; font-family: "Roboto Condensed", Inter, system-ui, sans-serif;
line-height: 1.5; line-height: 1.5;
font-weight: 400; font-weight: 400;
color-scheme: light dark; color-scheme: light dark;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
background-color: #242424; /*background-color: #242424;*/
font-synthesis: none; font-synthesis: none;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
@ -18,6 +18,13 @@ body {
display: flex; display: flex;
} }
.roboto-condensed-fnt {
font-family: "Roboto Condensed", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
/*h1 {*/ /*h1 {*/
/* font-size: 3.2em;*/ /* font-size: 3.2em;*/
/* line-height: 1.1;*/ /* line-height: 1.1;*/

2
shopping-cart/src/main.jsx
View file

@ -1,6 +1,6 @@
import { StrictMode } from "react"; import { StrictMode } from "react";
import { createRoot } from "react-dom/client"; import { createRoot } from "react-dom/client";
import "./index.css"; import "./css/index.css";
import { createBrowserRouter, RouterProvider } from "react-router-dom"; import { createBrowserRouter, RouterProvider } from "react-router-dom";
import routes from "./routes"; import routes from "./routes";