Quelltext - Seite 2

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.
applyRounding(cents, mode)
Rundet einen Betrag abhängig von der gewählten Rundungsart: centgenau, auf ganze Euro aufrunden oder auf ganze Euro abrunden.
calculate()
Liest die Eingaben aus dem Formular aus, prüft sie, berechnet Trinkgeld, Gesamtbetrag und die jeweiligen Werte pro Person (intern in Cent, damit keine Rundungsfehler entstehen) und schreibt die Ergebnisse zurück in die HTML‑Ausgabe.
resetCalculator()
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

<style>
  .sk-tip, .sk-tip * { box-sizing: border-box; }
  .sk-tip {
    --sk-accent: #B1976B;
    --sk-accent-light: #d8c3a1;
    max-width: 560px;
    margin: 24px auto;
    padding: 28px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(177, 151, 107, 0.25);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #2b2b2b;
  }
  .sk-tip .sk-tip-title { margin: 0 0 18px; font-size: 1.35rem; font-weight: 700; color: var(--sk-accent); }
  .sk-tip .sk-tip-field { margin-bottom: 14px; }
  .sk-tip label { display: block; margin-bottom: 6px; font-size: .9rem; font-weight: 600; }
  .sk-tip input, .sk-tip select {
    width: 100%; padding: 11px 13px; font: inherit; font-size: .95rem; color: #2b2b2b;
    border: 1px solid #e3d9c6; border-radius: 10px; background: #fff;
  }
  .sk-tip input:focus, .sk-tip select:focus {
    outline: none; border-color: var(--sk-accent); box-shadow: 0 0 0 3px rgba(177,151,107,.25);
  }
  .sk-tip .sk-tip-row { display: flex; gap: 14px; }
  .sk-tip .sk-tip-row .sk-tip-field { flex: 1; min-width: 0; }
  .sk-tip .sk-tip-small { margin-top: 6px; font-size: .8rem; color: #7a7a7a; }
  .sk-tip .sk-tip-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
  .sk-tip .sk-tip-btn {
    padding: 11px 22px; border: none; border-radius: 12px; cursor: pointer; font: inherit; font-weight: 600; font-size: .92rem; color: #fff;
    background: linear-gradient(135deg, var(--sk-accent), var(--sk-accent-light));
    box-shadow: 0 4px 16px rgba(177,151,107,.45); transition: transform .15s ease, box-shadow .15s ease;
  }
  .sk-tip .sk-tip-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(177,151,107,.6); }
  .sk-tip .sk-tip-btn:active { transform: translateY(0); }
  .sk-tip .sk-tip-btn.sk-secondary { background: #fff; color: var(--sk-accent); border: 1px solid var(--sk-accent); box-shadow: none; }
  .sk-tip .sk-tip-btn.sk-secondary:hover { box-shadow: 0 4px 14px rgba(177,151,107,.3); }
  .sk-tip .sk-tip-msg { min-height: 1.3em; margin-top: 12px; font-size: .88rem; color: #b3402f; }
  .sk-tip .sk-tip-results { margin-top: 10px; padding: 8px 16px; background: #faf7f1; border: 1px solid rgba(177,151,107,.25); border-radius: 14px; }
  .sk-tip .sk-tip-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(177,151,107,.2); }
  .sk-tip .sk-tip-line:last-child { border-bottom: 0; }
  .sk-tip .sk-tip-line.sk-hide { display: none; }
  .sk-tip .sk-tip-value { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .sk-tip .sk-tip-line.sk-main .sk-tip-value { color: var(--sk-accent); font-size: 1.15rem; }
  .sk-tip .sk-tip-line.sk-sub { font-size: .85rem; color: #7a7a7a; }
  @media (max-width: 480px) { .sk-tip { padding: 18px; } .sk-tip .sk-tip-row { flex-direction: column; gap: 0; } }
</style>

<div class="sk-tip" id="skTip">
  <div class="sk-tip-title">💶 Trinkgeldrechner</div>

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

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

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

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

  <div class="sk-tip-msg" id="tipMsg" role="status" aria-live="polite"></div>

  <div class="sk-tip-results" aria-live="polite">
    <div class="sk-tip-line">
      <span>Trinkgeld gesamt:</span>
      <span class="sk-tip-value" id="tipAmount">€ 0,00</span>
    </div>
    <div class="sk-tip-line">
      <span>Trinkgeld pro Person:</span>
      <span class="sk-tip-value" id="tipPerPerson">€ 0,00</span>
    </div>
    <div class="sk-tip-line">
      <span>Gesamt mit Trinkgeld:</span>
      <span class="sk-tip-value" id="totalWithTip">€ 0,00</span>
    </div>
    <div class="sk-tip-line sk-main">
      <span>Gesamt pro Person:</span>
      <span class="sk-tip-value" id="totalPerPerson">€ 0,00</span>
    </div>
    <div class="sk-tip-line sk-sub sk-hide" id="tipSumRow">
      <span>Summe aller Anteile (durch Rundung abweichend):</span>
      <span class="sk-tip-value" id="tipSum">€ 0,00</span>
    </div>
  </div>
</div>

<script>
(function () {
  function init() {
    var $ = function (id) { return document.getElementById(id); };
    if (!$("skTip")) return;

    function formatEuro(value) {
      return "€ " + value.toLocaleString("de-DE", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }

    // value in Cent (ganzzahlig oder Bruch) -> Betrag in Euro
    function applyRounding(cents, mode) {
      var c = Math.round(cents);               // zuerst auf Cent, damit 11,0000001 nicht zu 12 wird
      if (mode === "up") return Math.ceil(c / 100);
      if (mode === "down") return Math.floor(c / 100);
      return c / 100;                          // cent-genau
    }

    function setMsg(t) { $("tipMsg").textContent = t || ""; }

    function calculate() {
      var billRaw = $("bill").value.trim(), tipRaw = $("tip").value.trim(), pplRaw = $("people").value.trim();
      var bill = billRaw === "" ? 0 : Number(billRaw);
      var tipPercent = tipRaw === "" ? 0 : Number(tipRaw);
      var people = pplRaw === "" ? 1 : Number(pplRaw);
      var rounding = $("rounding").value;

      if (!isFinite(bill) || bill < 0) return setMsg("Bitte einen gültigen Rechnungsbetrag (≥ 0) eingeben.");
      if (!isFinite(tipPercent) || tipPercent < 0) return setMsg("Bitte ein gültiges Trinkgeld in Prozent (≥ 0) eingeben.");
      if (!isFinite(people) || people < 1 || Math.floor(people) !== people) return setMsg("Anzahl Personen muss eine ganze Zahl ab 1 sein.");
      setMsg("");

      // Rechnung in Cent, damit keine Fließkomma-Fehler entstehen
      var billC = Math.round(bill * 100);
      var tipC = Math.round(billC * tipPercent / 100);
      var totalC = billC + tipC;

      var tipPerPerson = applyRounding(tipC / people, rounding);
      var totalPerPerson = applyRounding(totalC / people, rounding);

      $("tipAmount").textContent = formatEuro(tipC / 100);
      $("totalWithTip").textContent = formatEuro(totalC / 100);
      $("tipPerPerson").textContent = formatEuro(tipPerPerson);
      $("totalPerPerson").textContent = formatEuro(totalPerPerson);

      // Hinweis, falls die Summe der gerundeten Anteile vom echten Gesamtbetrag abweicht
      var sumC = Math.round(totalPerPerson * 100) * people;
      var row = $("tipSumRow");
      if (sumC !== totalC) {
        $("tipSum").textContent = formatEuro(sumC / 100);
        row.classList.remove("sk-hide");
      } else {
        row.classList.add("sk-hide");
      }
    }

    function resetCalculator() {
      $("bill").value = "0";
      $("tip").value = "18";
      $("people").value = "1";
      $("rounding").value = "cents";
      setMsg("");
      ["tipAmount", "tipPerPerson", "totalWithTip", "totalPerPerson"].forEach(function (id) { $(id).textContent = "€ 0,00"; });
      $("tipSumRow").classList.add("sk-hide");
    }

    $("calcBtn").addEventListener("click", calculate);
    $("resetBtn").addEventListener("click", resetCalculator);
    ["bill", "tip", "people"].forEach(function (id) { $(id).addEventListener("input", calculate); });
    $("rounding").addEventListener("change", calculate);
  }
  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", init);
  else init();
})();
</script>

0 Kommentare

Noch keine Kommentare. Schreib den ersten!

SK-REG BLOG

Trinkgeldrechner - Quelltext

Beschreibung des JavaScript‑Codes

0 Kommentare