Ersparnis Betrag Rechner

Kategorie: Allgemeine Anforderungen

• Integrierungsumgebung: Yootheme Pro (YTP)
• Responsive Design: Das Tool muss responsiv sein und auf verschiedenen Bildschirmgrößen gut aussehen.
• Funktionen:
  • Eingabe von zwei Preisen in separaten Feldern.
  • Auswahl zwischen Bruttopreis und Nettopreis über Radiobuttons.
  • Eingabefeld für Steuer (19%) sichtbar, wenn Bruttopreis ausgewählt ist.
  • Berechnung der Differenz zwischen den Preisen nach Klick auf den "Berechnen"-Button.
  • Anzeige der Differenz in Euro und Prozentsatz.

Kategorie: Layout und Gestaltung

• Container:
  • Padding: 30px oben/unten, 20px links/rechts.
  • Margin: 20px unten.
  • Hintergrundfarbe: #ffffff (weiß).
  • Rahmen: 1px solid #ddd.
  • Rundungen: 10px.
  • Schatten: 0 4px 8px rgba(0, 0, 0, 0.1).
• Input-Gruppen:
  • Margin: 15px unten.
• Beschriftungen (label):
  • Fontweight: bold.
  • Farbe: #333333.
  • Abstand: 5px unten.
• Eingabefelder (input[type="number"]):
  • Full-width.
  • Padding: 10px.
  • Rahmen: 1px solid #ccc.
  • Rundungen: 5px.
  • Farbe: #333333.
• Radiobuttons (radio-group):
  • Flex-Container für horizontale Ausrichtung.
  • Margin: 15px unten.
  • Labels: uk-text-middle für vertIKale Zentrierung.
  • Abstände: 20px rechts zwischen Radiobuttons.
• Steuerfeld (vatContainer):
  • Margin: 15px unten.
• Steuerfeldbeschriftung (label):
  • Fontweight: normal.
  • Farbe: #555555.
  • Abstand: 10px rechts.
• Resultado-Bereich (result):
  • Margin: 20px oben.
  • Padding: 15px.
  • Hintergrundfarbe: #d4ede2 (grüner Hintergrund).
  • Rundungen: 5px.
  • Schriftgröße: 18px.
  • Farbe: #333333.

Kategorie: Buttons

• Berechnen-Button (button):
  • Breite: 100%.
  • Padding: 12px 20px.
  • Hintergrundfarbe: #00b359 (hellgrüner Button).
  • Farbe: white.
  • Kein Rahmen.
  • Rundungen: 5px.
  • Hover-Effekt: Hintergrundfarbe #009445 (dunkelgrüner Button).
  • Übergang für die Hintergrundfarbe: 0.3s ease.

Kategorie: Farben

• Hintergrund des Ergebnisses: #d4ede2 (grüner Hintergrund).
• Primärfarbe für Schaltflächen: #00b359 (hellgrüner Button).
• Sekundärerde für Schaltflächen: #009445 (dunkelgrüner Button beim Hover).
• Hintergrund des Containers: #ffffff (weiß).
• Textfarben: #333333 (dunkelgrau/fett), #555555 (hellgrau).

Kategorie: Responsive Design

• Media-Queries:
  • Vorlage für Bildschirmgrößen kleiner als 768px:
    • Schriftgröße der Eingabefelder: 14px.
    • Schriftgröße des Buttons: 14px.

Kategorie: JavaScript-Funktionalität

• Radiobutton-Eventlistener:
  • Bei Auswahl des "Brutto"-Radiobuttons wird das Steuerfeld sichtbar.
  • Bei Auswahl des "Netto"-Radiobuttons wird das Steuerfeld ausgeblendet.
• Berechnungsfunktion:
  • Überprüfung aller Eingabefelder.
  • Berechnung der Differenz in Euro und im Prozentsatz.
  • Anzeige des Ergebnisses im Ergebnisbereich.