06_react/uebungen/u10_input-price/src/App.jsx

@@ -1,11 +1,17 @@
-import InputAmount from './components/inputs/InputAmount';
+import InputPrice from './components/inputs/InputPrice';
 
 function App(props) {
   // const { } = props;
 
   return (
     <div className="container py-5">
-      <InputAmount />
+      <InputPrice />
+      <br />
+      <InputPrice currency="$" />
+      <br />
+      <InputPrice currency="€" />
+      <br />
+      <InputPrice currency="¥" />
     </div>
   );
 }

06_react/uebungen/u10_input-price/src/components/inputs/InputPrice.jsx

@@ -0,0 +1,18 @@
+const InputPrice = (props) => {
+  const { currency = '$' } = props;
+
+  const InputGroupText = () => {
+    return <div className="input-group-text">{currency}</div>;
+  };
+  return (
+    <div className="m-input-price input-price">
+      <div className="input-group">
+        {currency === '$' && InputGroupText()}
+        <input type="text" placeholder="0.00" name="price" className="form-control input-price" />
+        {(currency === '€' || currency === '¥') && InputGroupText()}
+      </div>
+    </div>
+  );
+};
+
+export default InputPrice;

06_react/uebungen/u12-14_input-price/src/components/inputs/InputPrice.jsx

@@ -15,7 +15,9 @@ const InputPrice = (props) => {
   const handleChange = (e) => {
     // console.log(`Preis: ${e.target.value}`);
     // console.log('RegEx: ', isValidPrice(e.target.value));
-    setPrice(e.target.value);
+    let value = Number(e.target.value);
+
+    setPrice(value);
   };
 
   return (
@@ -29,10 +31,11 @@ const InputPrice = (props) => {
         <input
           type="number"
           name="price"
-          placeholder="0.00"
+          placeholder={0.0}
           aria-label="Price"
-          className={`form-control input-price ${!isValidPrice(price) ? 'is-invalid' : 'is-valid'}`}
-          step="0.01"
+          className={`form-control input-price 
+            ${!isValidPrice(price) ? 'is-invalid' : 'is-valid'}`}
+          step={0.01}
           value={price}
           onChange={handleChange}
         />

06_react/uebungen/u12-14_input-price/src/styles/05_modules/_inputPrice.scss

@@ -3,4 +3,10 @@
   input {
     text-align: center;
   }
+  .error {
+    border: 2px solid #c00;
+  }
+  .valid {
+    border: 2px solid green;
+  }
 }

06_react/uebungen/u12-14_input-price/vite.config.js

@@ -1,7 +1,15 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+  css: {
+    preprocessorOptions: {
+      scss: {
+        quietDeps: true, // Unix
+        silenceDeprecations: ['color-functions', 'global-builtin', 'import', 'legacy-js-api', 'if-function'],
+      },
+    },
+  },
+});

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

@@ -1,19 +1,41 @@
+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 min = 0;
+  const max = 10;
+  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 value = Number(e.target.value);
+
+    if (isNaN(value) || value > max) return;
+    setAmount(value);
+  };
+
+  const handleClickDecrease = (e) => {
+    if (amount <= min) return;
+    setAmount(amount - 1);
+  };
+
+  const handleClickIncrease = (e) => {
+    if (amount >= max) return;
+    setAmount(amount + 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">
+          <button
+            className="btn btn-dark button-decrease"
+            aria-label="Decrease Amount"
+            onClick={handleClickDecrease}
+            disabled={amount <= min}>
             <FaMinus />
           </button>
         </span>
@@ -21,12 +43,19 @@ const InputAmount = (props) => {
           type="number"
           name="amount"
           placeholder="0"
+          min={min}
+          max={max}
           aria-label="Amount"
           className="form-control input-amount"
           onChange={handleChange}
+          value={amount}
         />
         <span className="input-group-text">
-          <button className="btn btn-dark button-increase" aria-label="Increase Amount">
+          <button
+            className="btn btn-dark button-increase"
+            aria-label="Increase Amount"
+            onClick={handleClickIncrease}
+            disabled={amount >= max}>
             <FaPlus />
           </button>
         </span>

06_react/unterricht/tag35/02_eventhandler-html/index.html

@@ -23,7 +23,7 @@
           value="0"
           onchange="console.log(this.value)" />
         <hr />
-        <input type="text" name="text" class="form-control input-text" oninput="console.log(this.value)" />
+        <input type="number" name="text" class="form-control input-text" oninput="console.log(this.value)" />
       </div>
     </main>
     <script>

06_react/unterricht/tag35/03_components-with-events/src/components/inputs/InputAmount.jsx

@@ -14,10 +14,10 @@ const InputAmount = (props) => {
     console.log(e.currentTarget.name);
     switch (e.currentTarget.name) {
       case 'increase':
-        console.loge('inc');
+        console.log('inc');
         break;
       case 'decrease':
-        console.loge('dec');
+        console.log('dec');
         break;
       default: //nothing
     }

06_react/unterricht/tag35/04_components-with-hooks/src/components/inputs/InputAmount.jsx

@@ -17,7 +17,6 @@ const InputAmount = (props) => {
   };
   const handleClick = (e) => {
     console.log('Event: ', e);
-
     console.log(e.currentTarget.name);
     switch (e.currentTarget.name) {
       case 'increase':