as good as itll get

This commit is contained in:
Mike 2024-11-22 20:46:32 -05:00
parent aca34ffb10
commit 907aac1b75
2 changed files with 39 additions and 9 deletions

View file

@ -66,7 +66,10 @@ function OrderSummary({ cart }) {
</p>
<p>Shipping (10%): ${currencyFormat(shippingCosts)}</p>
<p>Total: ${currencyFormat(total)}</p>
<Button text={"Checkout"} />
<Button
text={"Checkout"}
onClick={() => alert("Congrats! You would've leveled up")}
/>
</div>
);
}
@ -80,15 +83,21 @@ function CartItem({ item, cart, setCart }) {
<div className={styles.card}>
<div>
<h3>{title}</h3>
<p>Price: ${currencyFormat(price)} x </p>
</div>
<div className={styles["price-qty"]}>
<p> ${currencyFormat(price)} x </p>
<div className={styles.qtybtn}>
<button onClick={() => decreaseQty(item, cart, setCart)}>-</button>
<button onClick={() => decreaseQty(item, cart, setCart)}>
-
</button>
<QuantityInput item={item} cart={cart} setCart={setCart} />
<button onClick={() => increaseQty(item, cart, setCart)}>+</button>
<button onClick={() => increaseQty(item, cart, setCart)}>
+
</button>
</div>
<p>Item total: ${currencyFormat(qty * price)} </p>
</div>
</div>
<div>
<p>total: ${currencyFormat(qty * price)} </p>
<Button
onClick={() => removeFromCart(item, cart, setCart)}
text={"Remove From Cart"}
@ -112,7 +121,14 @@ function QuantityInput({ item, cart, setCart }) {
}
return (
<input value={item.qty} onChange={handleChange} min="1" type="number" />
<input
value={item.qty}
onChange={handleChange}
min="1"
max="999"
type="number"
className={styles.input}
/>
);
}

View file

@ -60,6 +60,16 @@
border-bottom: 1px solid black;
}
.price-qty {
display: flex;
gap: 30px;
justify-content: center;
}
.price-qty p {
margin: 0;
}
.qtybtn {
display: flex;
}
@ -81,3 +91,7 @@
.header {
margin: 1rem;
}
.input {
max-width: 30px;
}