Autor: Stephan Krohn Kategorie: Blog

Beitragsseiten

Der Trinkgeldrechner hilft dir dabei, schnell und bequem das passende Trinkgeld für jede Rechnung zu ermitteln. Gib einfach den Rechnungsbetrag, den gewünschten Trinkgeld-Prozentsatz und – falls ihr gemeinsam bezahlt – die Anzahl der Personen ein.

Der Rechner zeigt dir sofort:

das gesamte Trinkgeld
das Trinkgeld pro Person
den Gesamtbetrag inklusive Trinkgeld
den anteiligen Gesamtbetrag pro Person

Trinkgeldrechner

Rechnungsbetrag (€)

Trinkgeld (%)

Anzahl Personen

Rundung pro Person

Rundung wirkt nur auf die Beträge pro Person.

Trinkgeld gesamt: € 0,00

Trinkgeld pro Person: € 0,00

Gesamt mit Trinkgeld: € 0,00

Gesamt pro Person: € 0,00

Optional kannst du festlegen, ob die Beträge pro Person centgenau, aufgerundet oder abgerundet werden sollen. So erhältst du immer exakt die Werte, die du für deine Zahlung benötigst – ob im Restaurant, Café oder bei Lieferdiensten.

Einfach, schnell und übersichtlich.

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

Beitragsseiten

Trinkgeldrechner

Beschreibung des JavaScript‑Codes