2026-09-11 11:25:27 +02:00
parent d9e2b41984
commit c7fcbb18cb
7 changed files with 4256 additions and 4 deletions
@@ -0,0 +1,130 @@
+<!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>