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

changes

Browse source
This commit is contained in:
Mike 2024-11-22 07:08:58 -05:00
parent 0664755110
commit aca34ffb10
18 changed files with 818 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
shopping-cart/index.html
View file

@ -10,7 +10,7 @@
rel="stylesheet"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Smig.Tech Coaching</title>
<title>Hobby Tech</title>
</head>
<body>
<div id="root"></div>

669
shopping-cart/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

4
shopping-cart/package.json
View file

@ -10,6 +10,10 @@
"preview": "vite preview"
},
"dependencies": {
"@emotion/react": "^11.13.5",
"@emotion/styled": "^11.13.5",
"@mui/icons-material": "^6.1.8",
"@mui/material": "^6.1.8",
"prop-types": "^15.8.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",

BIN
shopping-cart/public/hero.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 481 KiB

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

@ -1,3 +1,4 @@
import Button from "./components/button";
import PropTypes from "prop-types";
import styles from "./css/cart.module.css";
import { useOutletContext } from "react-router-dom";
@ -23,7 +24,6 @@ function Bag({ cartKeys, cart, setCart }) {
<>
{cartKeys.length > 0 ? (
<div className={styles.fullwidth}>
<h2 className={styles.header}>Cart</h2>
<div className={styles.cartItems}>
{cartKeys.map((key, index) => (
<CartItem
@ -36,7 +36,9 @@ function Bag({ cartKeys, cart, setCart }) {
</div>
</div>
) : (
<h2>Your cart is empty</h2>
<div className={styles["empty-cart"]}>
<h2>Your cart is empty</h2>
</div>
)}
</>
);
@ -44,15 +46,17 @@ function Bag({ cartKeys, cart, setCart }) {
function OrderSummary({ cart }) {
const cartItems = Object.keys(cart);
const shippingFee = 0.1;
let numItems = 0;
let subTotal = 0;
cartItems.forEach((item) => {
subTotal += cart[item].price * cart[item].qty;
numItems += cart[item].qty;
subTotal += Number(cart[item].price) * Number(cart[item].qty);
numItems += Number(cart[item].qty);
});
const shippingFee = subTotal * 0.1;
const total = subTotal + shippingFee;
const shippingCosts = shippingFee * subTotal;
const total = shippingCosts + subTotal;
return (
<div className={styles.summary}>
@ -60,9 +64,9 @@ function OrderSummary({ cart }) {
<p>
Subtotal ({numItems} items): ${currencyFormat(subTotal)}
</p>
<p>Shipping (10%): ${currencyFormat(shippingFee)}</p>
<p>Shipping (10%): ${currencyFormat(shippingCosts)}</p>
<p>Total: ${currencyFormat(total)}</p>
<button>Checkout</button>
<Button text={"Checkout"} />
</div>
);
}
@ -85,9 +89,10 @@ function CartItem({ item, cart, setCart }) {
</div>
<div>
<p>total: ${currencyFormat(qty * price)} </p>
<button onClick={() => removeFromCart(item, cart, setCart)}>
Remove From Cart
</button>
<Button
onClick={() => removeFromCart(item, cart, setCart)}
text={"Remove From Cart"}
/>
</div>
</div>
</div>
@ -96,13 +101,19 @@ function CartItem({ item, cart, setCart }) {
function QuantityInput({ item, cart, setCart }) {
function handleChange(e) {
const newQty = e.target.value;
const newQty = Number(e.target.value);
let obj = { ...cart };
obj[item.id].qty = newQty;
if (newQty !== 0) {
obj[item.id].qty = newQty;
} else {
obj[item.id].qty = 1;
}
setCart(obj);
}
return <input value={item.qty} onChange={handleChange} />;
return (
<input value={item.qty} onChange={handleChange} min="1" type="number" />
);
}
function increaseQty(item, cart, setCart) {

1
shopping-cart/src/Store.jsx
View file

@ -10,7 +10,6 @@ export default function Store() {
return (
<div>
<h1>Smig.Tech Store</h1>
<ProductCollection
loading={loading}
items={items}

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

@ -1,6 +1,10 @@
.btn {
padding: 1rem;
margin: 1rem;
font-size: 1rem;
border-radius: 0.5rem;
border: none;
cursor: pointer;
}
.action {

30
shopping-cart/src/components/main.jsx
View file

@ -12,18 +12,22 @@ export default function Main() {
function Default() {
return (
<div className={styles.container}>
<h1 className={styles.mainHeading}>
Our products help you skill up faster
</h1>
<p>
Trying to pivot into tech? There&apos;s a lot to figure out. We can help
you navigate the path with our products. Fast results and guaranteed
growth.
</p>
<Link to="/store">
<Button text={"Start shopping now!"} styles={"action"} />
</Link>
</div>
<>
<div className={styles.container}>
<h1 className={styles.mainHeading}>
Our products help <span className={styles["heading-color"]}>you</span>{" "}
</h1>
<p className={styles["sub-heading"]}>
Keep engineers happy using working technology. Fast results and
guaranteed value from day one.
</p>
<Link to="/store">
<Button text={"Start shopping now!"} />
</Link>
<div>
<img src="/hero.jpg" alt="" className={styles["hero-img"]} />
</div>
</div>
</>
);
}

25
shopping-cart/src/components/main.module.css
View file

@ -5,6 +5,29 @@ main {
.container {
display: flex;
flex-direction: column;
justify-content: start;
justify-content: center;
align-items: center;
height: 100vh;
}
.mainHeading {
font-size: 4rem;
margin: 0;
}
.sub-heading {
font-size: 1.5rem;
}
.heading-color {
color: #0e6c96;
}
.hero-img {
margin-top: 100px;
width: 100%;
max-height: 800px;
vertical-align: middle;
object-fit: contain;
float: left;
}

37
shopping-cart/src/components/navbar.jsx
View file

@ -1,35 +1,42 @@
import styles from "./navbar.module.css";
import { Link } from "react-router-dom";
import PropTypes from "prop-types";
import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
export default function Navbar({ cartItems }) {
const sumCartItems = Object.keys(cartItems).length;
return (
<nav className={styles.container}>
<h1>Smig.Tech</h1>
<Nav />
{sumCartItems > 0 ? (
<Link to="bag">
{" "}
<h1>{sumCartItems}</h1>
</Link>
) : (
<img src="/shopping_cart_icon.svg" />
)}
<h1 className={styles["nav-heading"]}>Hobby Tech</h1>
<Nav sumCartItems={sumCartItems} />
</nav>
);
}
function Nav() {
function Nav({ sumCartItems }) {
return (
<ul className={styles.nav}>
<li>
<Link to="/">home</Link>
<Link to="/" className={styles.link}>
home
</Link>
</li>
<li>
<Link to="store">shop</Link>
<Link to="store" className={styles.link}>
shop
</Link>
</li>
<Link to="bag" className={styles.link}>
{sumCartItems > 0 ? (
<div className={styles["cart-icon-container"]}>
<div className={styles["cart-icon-circle"]}></div>
<ShoppingCartIcon fontSize="large" />
</div>
) : (
<ShoppingCartIcon fontSize="large" />
)}
</Link>
</ul>
);
}
@ -37,3 +44,7 @@ function Nav() {
Navbar.propTypes = {
cartItems: PropTypes.object,
};
Nav.propTypes = {
sumCartItems: PropTypes.number,
};

25
shopping-cart/src/components/navbar.module.css
View file

@ -15,3 +15,28 @@
margin-left: auto;
align-self: center;
}
.link {
text-decoration: none;
font-size: 1.5rem;
color: #0e374e;
}
.nav-heading {
color: #0e374e;
}
.cart-icon-container {
position: relative;
}
.cart-icon-circle {
background: #85d5f4;
border-radius: 50%;
height: 20px;
width: 20px;
position: absolute;
top: 7px;
left: 10px;
opacity: 60%;
}

5
shopping-cart/src/components/productCollection.jsx
View file

@ -11,7 +11,10 @@ export default function ProductCollection({ loading, items, cart, setCart }) {
return (
<div key={index} className={styles.card}>
<Products item={item} cart={cart} setCart={setCart} />
<Link to={item.id}> More Info</Link>
<Link to={item.id} className={styles.link}>
{" "}
More Info
</Link>
</div>
);
})

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

@ -12,5 +12,18 @@
justify-content: end;
padding: 1.5rem;
margin: 1.5rem;
background: gray;
background: #e2f3fc;
border-radius: 1rem;
text-align: center;
}
.link {
text-decoration: none;
color: #0e374e;
font-weight: 600;
transition: font-weight 500ms;
}
.link:hover {
font-weight: 900;
}

18
shopping-cart/src/components/productDetails.jsx
View file

@ -1,4 +1,5 @@
import { useParams, useOutletContext, Link } from "react-router-dom";
import Button from "./button";
import Products from "./products";
import styles from "./productDetails.module.css";
@ -15,18 +16,23 @@ export default function ProductDetails() {
<div className={styles.container}>
{item ? (
<div className={styles.card}>
<Link to="/store">Back</Link>
<Link to="/store" className={styles.link}>
Back
</Link>
<Products item={item} cart={cart} setCart={setCart} />
<button
<Button
onClick={() => {
cart[item.id]
? removeFromCart(item, cart, setCart)
: addToCart(item, cart, setCart);
}}
>
{cart[item.id] ? "Remove from Cart" : "Add to Cart"}
</button>
<Link to="/bag">View Cart</Link>
text={cart[item.id] ? "Remove from Cart" : "Add to Cart"}
/>
{Object.keys(cart).length > 0 ? (
<Link to="/bag" className={styles.link}>
View Cart
</Link>
) : null}
</div>
) : (
<HandleInvalidItem />

13
shopping-cart/src/components/productDetails.module.css
View file

@ -4,6 +4,7 @@
justify-content: center;
flex-wrap: wrap;
align-items: stretch;
text-align: center;
}
.card {
display: flex;
@ -13,4 +14,16 @@
/*flex: 1;*/
padding: 1.5rem;
margin: 1.5rem;
border-radius: 1rem;
}
.link {
text-decoration: none;
color: #0e374e;
font-weight: 600;
transition: font-weight 500ms;
}
.link:hover {
font-weight: 900;
}

4
shopping-cart/src/components/products.jsx
View file

@ -4,7 +4,7 @@ import styles from "./products.module.css";
import { currencyFormat } from "../utils/currency";
export default function Products({ item, cart, setCart }) {
export default function Products({ item }) {
return (
<>
<img src={item.image} alt={item.title} className={styles.img} />
@ -16,6 +16,4 @@ export default function Products({ item, cart, setCart }) {
Products.propTypes = {
item: PropTypes.object,
cart: PropTypes.object,
setCart: PropTypes.func,
};

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

@ -3,6 +3,14 @@
justify-content: space-between;
}
.empty-cart {
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
margin-top: 0.5rem;
}
.summary {
margin-right: 3rem;
padding: 1rem;

13
shopping-cart/src/css/index.css
View file

@ -2,6 +2,7 @@
font-family: Inter, system-ui, sans-serif;
line-height: 1.5;
font-weight: 400;
font-size: 18px;
/*color-scheme: light dark;*/
/*color: rgba(255, 255, 255, 0.87);*/
@ -18,6 +19,18 @@ body {
display: flex;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type="number"] {
-moz-appearance: textfield;
}
.roboto-condensed-fnt {
font-family: "Roboto Condensed", sans-serif;
font-optical-sizing: auto;