JS/01_grundlagen/uebungen/u15-u17-formular_reichweite-verbrauch.html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 15 17: Reichweite & Verbrauch</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
  </head>
  <body>
    <main>
      <div class="container py-5">
        <div class="alert alert-primary">
          <h1>Übung 15: Reichweite & Verbrauch</h1>
          <ol>
            <li>
              Schreiben Sie ein Programm zur Kraftstoffverbrauchsberechnung für Pkws. Der Benutzer soll die gefahrenen
              Kilometer (Strecke) und die verbrauchte Benzinmenge angeben. Das Programm ermittelt daraufhin den
              Kraftstoffverbrauch auf 100 km und gibt ihn aus.

              <blockquote>
                <strong>Hinweis:</strong> Verwenden Sie folgende Formel:<br />
                <code>Verbrauch [l/100km] = Benzinmenge [l] / Strecke [km] × 100</code>
              </blockquote>
            </li>
            <li>
              Erweitern Sie das Programm derart, dass das Programm den Benutzer außerdem nach seiner Tankgröße fragt und
              ergänzend die maximale Reichweite in Kilometern berechnet.
              <blockquote>
                <strong>Hinweis:</strong> Verwenden Sie folgende Formel:<br />
                <code> Reichweite [km] = Tankgröße [l] × Strecke [km] / Benzinmenge [l] </code>
              </blockquote>
            </li>
          </ol>
        </div>

        <div class="alert alert-primary">
          <h2>Übung 17: Reichweite & Verbrauch, Teil 2</h2>
          <p>Runde die Ausgaben von Übung 15 (Teil 1 der Übung) kaufmännisch (d. h. ab 0.5 aufrunden).</p>
        </div>

        <form name="formula1" class="mb-3">
          <div class="row mb-3">
            <div class="col">
              <label for="drivenKm" class="form-label">Gefahrene Strecke</label>
              <div class="input-group">
                <input type="number" min="0" name="drivenKm" id="drivenKm" class="form-control" />
                <span class="input-group-text">km</span>
              </div>
              <span class="form-text">Vorsicht, Ami-Falle!</span>
            </div>

            <div class="col">
              <label for="usedFuelAmount" class="form-label">Verbrauchte Benzinmenge</label>
              <div class="input-group">
                <input type="number" min="0" name="usedFuelAmount" id="usedFuelAmount" class="form-control" />
                <span class="input-group-text">Liter</span>
              </div>
              <span class="form-text">Keine Freedom-Unit!</span>
            </div>
            <div class="col">
              <label for="fuelTankVolume" class="form-label">Größe Benzintank? </label>
              <div class="input-group">
                <input type="number" min="0" name="fuelTankVolume" id="fuelTankVolume" class="form-control" />
                <span class="input-group-text">Liter</span>
              </div>
              <span class="form-text">Keine Angst, wir machen keinen Schwanzvergleich!</span>
            </div>
          </div>

          <div class="text-center mb-5 d-grid">
            <button type="submit" class="btn btn-lg btn-warning">Prove my manliness!</button>
          </div>

          <div class="text-center">
            <button
              type="submit"
              class="btn btn-sm"
              disabled
              style="background-color: pink; border-color: pink; color: white">
              Aber ich bin eine Frau?
            </button>
          </div>

          <div class="text-center mt-1">
            <small>Das ist ein Scherz und nicht ernst gemeint!</small>
          </div>
        </form>

        <div class="output-a alert alert-secondary"></div>
        <div class="output-b alert alert-secondary"></div>
      </div>
    </main>
    <script>
      'use strict';

      const outputAEl = document.querySelector('.output-a');
      const outputBEl = document.querySelector('.output-b');

      const form = document.forms.formula1;

      const numberFormatter = new Intl.NumberFormat('de-DE');
      const kmFormatter = new Intl.NumberFormat('de-DE', {
        style: 'unit',
        unit: 'kilometer',
      });
      // const litreFormatter = new Intl.NumberFormat('de-DE', {
      //   style: 'unit',
      //   unit: 'liter',
      // });

      form.addEventListener('submit', (e) => {
        // e.preventDefault(); // Standardverhalten unterbinden

        const drivenKm = form.drivenKm.value;
        const usedFuelAmount = form.usedFuelAmount.value;
        const fuelTankVolume = form.fuelTankVolume.value;

        if (drivenKm === '' || usedFuelAmount === '' || fuelTankVolume === '') {
          return;
        }

        const fuelPer100Km = (usedFuelAmount / drivenKm) * 100;
        const maximumRange = (fuelTankVolume * drivenKm) / usedFuelAmount;

        outputAEl.innerText = `Verbrauch: ${numberFormatter.format(fuelPer100Km)} l/km, max. Reichweite: ${kmFormatter.format(maximumRange)}`;
        outputBEl.innerText = `Verbrauch: ${numberFormatter.format(Math.round(fuelPer100Km))} l/km, max. Reichweite: ${kmFormatter.format(Math.round(maximumRange))}`;
      });
    </script>
  </body>
</html>