05_react/uebungen/u13_input-amount/src/App.jsx

@@ -0,0 +1,34 @@
+import InputAmount from './components/inputs/InputAmount';
+
+function App(props) {
+  // const { } = props;
+
+  return (
+    <div className="container py-5">
+      <InputAmount />
+
+      <hr />
+
+      <div className="alert alert-primary">
+        <h2>
+          Übung 13: InputAmount um <strong>min</strong> und <strong>max</strong> Werte erweitern
+        </h2>
+        <p>
+          Endlich sind wir in der Lage die Anzahl in unserer <strong>InputAmount</strong>-Komponente zu verändern und
+          über der <strong>useState</strong>-Hook ein Rerendering der Komponente auszulösen.
+        </p>
+        <p>
+          Jetzt bist du gefragt: Erweitere die <strong>InputAmount</strong> Komponente, sodass der Wert des Eingabefelds
+          auf einen Bereich zwischen 0 und 10 begrenzt ist. Wenn der Benutzer versucht, den Wert unter 0 oder über 10 zu
+          setzen, soll der Wert auf 0 bzw. 10 gesetzt werden und der entsprechende Button deaktiviert werden.
+        </p>
+        <p>
+          <strong>Hinweis:</strong> In React kannst du das <strong>disabled</strong>-Attribut auf einem Button
+          verwenden, um ihn zu deaktivieren. Wenn der zugewiesene Wert true ist, wird der Button deaktiviert,
+          andernfalls bleibt er aktiv. Die Syntax sieht wie folgt aus
+        </p>
+      </div>
+    </div>
+  );
+}
+export default App;