Quelltext - Seite 2

Autor: Stephan Krohn Kategorie: Blog

Beitragsseiten

Seite 2 von 2

Beschreibung des JavaScript‑Codes

Der JavaScript‑Teil des Trinkgeldrechners übernimmt die komplette Berechnung und Aktualisierung der angezeigten Werte. Er besteht aus vier zentralen Funktionen:

formatEuro(value)
Formatiert eine Zahl als Euro‑Betrag, z. B. 12.5 → € 12,50.
round(value, mode)
Rundet einen Betrag abhängig von der gewählten Rundungsart: centgenau, aufrunden oder abrunden.
calculate()
Liest die Eingaben aus dem Formular aus, berechnet Trinkgeld, Gesamtbetrag und die jeweiligen Werte pro Person und schreibt die Ergebnisse zurück in die HTML‑Ausgabe.
resetCalc()
Setzt alle Eingabefelder und Ergebnisfelder auf die Standardwerte zurück.

Kurz gesagt: Das JavaScript sorgt dafür, dass der Rechner vollständig im Browser funktioniert – ohne Server, ohne externe Bibliotheken.

Quelltext zum Modul

<h1>Trinkgeldrechner</h1>

<div class="field">
      <label for="bill">Rechnungsbetrag (€)</label>
      <input type="number" id="bill" min="0" step="0.01" value="0">
    </div>

<div class="row">
      <div class="field">
        <label for="tip">Trinkgeld (%)</label>
        <input type="number" id="tip" min="0" step="1" value="18">
      </div>
      <div class="field">
        <label for="people">Anzahl Personen</label>
        <input type="number" id="people" min="1" step="1" value="1">
      </div>
    </div>

<div class="field">
      <label for="rounding">Rundung pro Person</label>
      <select id="rounding">
        <option value="cents">Cent-genau</option>
        <option value="up">Aufrunden</option>
        <option value="down">Abrunden</option>
      </select>
      <div class="small">Rundung wirkt nur auf die Beträge pro Person.</div>
    </div>

<div class="actions">
      <button class="btn-primary" id="calcBtn">Berechnen</button>
      <button class="btn-secondary" id="resetBtn">Zurücksetzen</button>
    </div>

<div class="results">
      <div>
        <span>Trinkgeld gesamt:</span>
        <span class="value" id="tipAmount">€ 0,00</span>
      </div>
      <div>
        <span>Trinkgeld pro Person:</span>
        <span class="value" id="tipPerPerson">€ 0,00</span>
      </div>
      <div>
        <span>Gesamt mit Trinkgeld:</span>
        <span class="value" id="totalWithTip">€ 0,00</span>
      </div>
      <div>
        <span>Gesamt pro Person:</span>
        <span class="value" id="totalPerPerson">€ 0,00</span>
      </div>
    </div>
  </div>

function calculate() {
      const bill = parseFloat(document.getElementById("bill").value) || 0;
      const tipPercent = parseFloat(document.getElementById("tip").value) || 0;
      const people = parseInt(document.getElementById("people").value, 10) || 1;
      const rounding = document.getElementById("rounding").value;

if (people < 1) {
        alert("Anzahl Personen muss mindestens 1 sein.");
        return;
      }

const tipAmount = bill * (tipPercent / 100);
      const totalWithTip = bill + tipAmount;

const tipPerPersonRaw = tipAmount / people;
      const totalPerPersonRaw = totalWithTip / people;

const tipPerPersonRounded = applyRounding(tipPerPersonRaw, rounding);
      const totalPerPersonRounded = applyRounding(totalPerPersonRaw, rounding);

document.getElementById("tipAmount").textContent = formatEuro(tipAmount);
      document.getElementById("totalWithTip").textContent = formatEuro(totalWithTip);

// Anzeige: gerundete Werte, aber auf 2 Nachkommastellen
      document.getElementById("tipPerPerson").textContent =
        formatEuro(tipPerPersonRounded);
      document.getElementById("totalPerPerson").textContent =
        formatEuro(totalPerPersonRounded);
    }

function resetCalculator() {
      document.getElementById("bill").value = "0";
      document.getElementById("tip").value = "18";
      document.getElementById("people").value = "1";
      document.getElementById("rounding").value = "cents";
      document.getElementById("tipAmount").textContent = "€ 0,00";
      document.getElementById("tipPerPerson").textContent = "€ 0,00";
      document.getElementById("totalWithTip").textContent = "€ 0,00";
      document.getElementById("totalPerPerson").textContent = "€ 0,00";
    }

document.getElementById("calcBtn").addEventListener("click", calculate);
    document.getElementById("resetBtn").addEventListener("click", resetCalculator);
  </script>">

SK-REG BLOG

Trinkgeldrechner - Quelltext

Beitragsseiten

Beschreibung des JavaScript‑Codes