-
Cart
{cartKeys.map((key, index) => (
) : (
-
Your cart is empty
+
+
Your cart is empty
+
)}
);
@@ -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 (
@@ -60,9 +64,9 @@ function OrderSummary({ cart }) {
Subtotal ({numItems} items): ${currencyFormat(subTotal)}
-
Shipping (10%): ${currencyFormat(shippingFee)}
+
Shipping (10%): ${currencyFormat(shippingCosts)}
Total: ${currencyFormat(total)}
-
Checkout
+
);
}
@@ -85,9 +89,10 @@ function CartItem({ item, cart, setCart }) {
{item ? (
-
Back
+
+ Back
+
-
{
cart[item.id]
? removeFromCart(item, cart, setCart)
: addToCart(item, cart, setCart);
}}
- >
- {cart[item.id] ? "Remove from Cart" : "Add to Cart"}
-
-
View Cart
+ text={cart[item.id] ? "Remove from Cart" : "Add to Cart"}
+ />
+ {Object.keys(cart).length > 0 ? (
+
+ View Cart
+
+ ) : null}
) : (
diff --git a/shopping-cart/src/components/productDetails.module.css b/shopping-cart/src/components/productDetails.module.css
index 0d26554..07c3252 100644
--- a/shopping-cart/src/components/productDetails.module.css
+++ b/shopping-cart/src/components/productDetails.module.css
@@ -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;
}
diff --git a/shopping-cart/src/components/products.jsx b/shopping-cart/src/components/products.jsx
index 6c58aa4..ae24701 100644
--- a/shopping-cart/src/components/products.jsx
+++ b/shopping-cart/src/components/products.jsx
@@ -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 (
<>
@@ -16,6 +16,4 @@ export default function Products({ item, cart, setCart }) {
Products.propTypes = {
item: PropTypes.object,
- cart: PropTypes.object,
- setCart: PropTypes.func,
};
diff --git a/shopping-cart/src/css/cart.module.css b/shopping-cart/src/css/cart.module.css
index 79d2b4d..678d95a 100644
--- a/shopping-cart/src/css/cart.module.css
+++ b/shopping-cart/src/css/cart.module.css
@@ -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;
diff --git a/shopping-cart/src/css/index.css b/shopping-cart/src/css/index.css
index cf217eb..98288d1 100644
--- a/shopping-cart/src/css/index.css
+++ b/shopping-cart/src/css/index.css
@@ -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;
+