05_react/uebungen/u13_input-amount/src/components/inputs/InputAmount.jsx

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import { FaMinus, FaPlus } from 'react-icons/fa6';
+// npm install react-icons  | Auf der npm Seite mit --save, ist nicht mehr nötig
+const InputAmount = (props) => {
+  // const { } = props;
+  const [amount, setAmount] = useState(0);
+
+  // EventHandlers ================
+  const handleChange = (e) => {
+    console.log(e); // Event-Objekte wurden um React Methoden und Eigenschaften erweitert. (SyntheticBaseEvent anstatt InputEvent)
+    console.log(e.target.value);
+  };
+
+  const handleClickDec = (e) => {
+    // Guard
+    if (amount < 0) return;
+
+    setAmount((prevState) => prevState - 1);
+  };
+
+  const handleClickInc = (e) => {
+    // Guard
+    if (amount > 10) return;
+
+    setAmount((prevState) => prevState + 1);
+  };
+
+  return (
+    <div className="m-input-amount input-amount">
+      <div className="input-group mb-3">
+        <span className="input-group-text">
+          <button
+            className="btn btn-dark button-decrease"
+            aria-label="Decrease Amount"
+            onClick={handleClickDec}
+            disabled={amount <= 0}>
+            <FaMinus />
+          </button>
+        </span>
+        <input
+          type="number"
+          name="amount"
+          placeholder="0"
+          aria-label="Amount"
+          value={amount}
+          className="form-control input-amount"
+          onChange={handleChange}
+        />
+        <span className="input-group-text">
+          <button
+            className="btn btn-dark button-increase"
+            aria-label="Increase Amount"
+            onClick={handleClickInc}
+            disabled={amount >= 10}>
+            <FaPlus />
+          </button>
+        </span>
+      </div>
+    </div>
+  );
+};
+export default InputAmount;

05_react/uebungen/u13_input-amount/src/components/inputs/InputPrice.jsx

@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import { FaDollarSign, FaEuroSign, FaYenSign } from 'react-icons/fa6';
+
+const InputPrice = (props) => {
+  const { currency = '$' } = props;
+
+  const [price, setPrice] = useState(0);
+
+  //Evenhandler
+  const handleChange = (e) => {
+    console.log(`Preis: ${e.target.value}`);
+    setPrice(e.target.value);
+  };
+
+  return (
+    <div className="m-input-price input-price">
+      <div className="input-group mb-3">
+        {currency === '$' && (
+          <span className="input-group-text">
+            <FaDollarSign />
+          </span>
+        )}
+        <input
+          type="number"
+          name="price"
+          placeholder="0.00"
+          aria-label="Price"
+          className="form-control input-price"
+          step="0.01"
+          value={price}
+          onChange={handleChange}
+        />
+        {currency === '€' && (
+          <span className="input-group-text">
+            <FaEuroSign />
+          </span>
+        )}
+        {currency === '¥' && (
+          <span className="input-group-text">
+            <FaYenSign />
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};
+export default InputPrice;