44 lines
1.8 KiB
HTML
44 lines
1.8 KiB
HTML
<!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>
|