ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
Philippe Torrel
2026-08-06 14:38:46 +02:00
parent 2814319650
commit 2c47aa98b8
1022 changed files with 109709 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
05_react/uebungen/u10_input-price/index.html Normal file
View File

@@ -0,0 +1,43 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 10: InputPrice Komponente</title>
</head>
<body>
<div id="root"></div>
<div class="container py-2">
<div class="alert alert-primary">
<h2>Übung 10: InputPrice Komponente</h2>
<p>
Eine weitere häufig verwendete Komponente ist ein Input-Feld für Preise. Erstelle eine neue Komponente namens
<code>InputPrice</code>, die ein Eingabefeld für Preise mit einer Währungseinheit anzeigt.
</p>
<p>
Dabei soll die Währungseinheit über eine Prop konfigurierbar sein, sodass die Komponente für verschiedene
Währungen verwendet werden kann. Es sollen die folgenden Anforderungen erfüllt werden:
</p>
<ul class="list">
<li>Das Eingabefeld soll nur Zahlen und Dezimalpunkte zulassen.</li>
<li>
Die Währung soll über die Prop currency eingestellt werden können und standardmäßig <code>$</code> sein.
</li>
<li>Die Währungseinheiten <code>$</code>, <code>€</code> und <code>¥</code> sollen unterstützt werden.</li>
<li>
Bei der Währung <code>$</code> soll die Währungseinheit links vom Eingabefeld angezeigt werden, bei den
Währungen <code>€</code> und <code>¥</code> rechts vom Eingabefeld.
</li>
<li>
Für die linke oder rechte Positionierung der Währungseinheit soll die Bootstrap-Klasse
<code>input-group-text </code>verwendet werden.
</li>
</ul>
</div>
</div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>