as good as itll get

shopping-cart/src/Cart.jsx

@@ -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 className={styles["price-qty"]}>
-        </div>
+            <p> ${currencyFormat(price)} x </p>
-        <div className={styles.qtybtn}>
+            <div className={styles.qtybtn}>
-          <button onClick={() => decreaseQty(item, cart, setCart)}>-</button>
+              <button onClick={() => decreaseQty(item, cart, setCart)}>
-          <QuantityInput item={item} cart={cart} setCart={setCart} />
+                -
-          <button onClick={() => increaseQty(item, cart, setCart)}>+</button>
+              </button>
+              <QuantityInput item={item} cart={cart} setCart={setCart} />
+              <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}
+    />
   );
 }
 

shopping-cart/src/css/cart.module.css

@@ -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;
+}