2026-06-23 14:26:45 +02:00
parent 7c76b37a32
commit ae62a154b3
16 changed files with 166 additions and 5 deletions
--- a/01_grundlagen/uebungen/#u35_reichweite-verbrauch.html
+++ b/01_grundlagen/uebungen/#u35_reichweite-verbrauch.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Übung 35: Reichweite & Verbrauch, Teil 3</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 35: Reichweite & Verbrauch, Teil 3</h1>
+          <p>
+            Überarbeiten Sie Reichweite & Verbrauch, Teil 2 (Übung 18). Erstellen Sie passende Funktionen, die die
+            Benutzereingaben zurückgeben.
+          </p>
+        </div>
+      </div>
+
+      <section class="section-calculator">
+        <div class="container">
+          <form class="form-calculator" method="get">
+            <div class="row">
+              <div class="col-12 col-sm-6">
+                <div class="mb-3">
+                  <label for="input-strecke" class="form-label">Strecke</label>
+                  <input type="number" class="form-control" name="strecke" id="input-strecke" />
+                </div>
+              </div>
+              <div class="col-12 col-sm-6">
+                <div class="mb-3">
+                  <label for="input-benzinmenge" class="form-label">verbrauchte Benzinmenge</label>
+                  <input type="number" class="form-control" name="benzinmenge" id="input-benzinmenge" />
+                </div>
+              </div>
+            </div>
+            <!-- ▲ /.row ▲ -->
+            <div class="row">
+              <div class="col">
+                <div class="mb-3">
+                  <label for="input-tankgroesse" class="form-label">Tankgröße</label>
+                  <input type="number" class="form-control" name="tangroesse" id="input-tankgroesse" />
+                </div>
+              </div>
+            </div>
+            <!-- ▲ /.row ▲ -->
+            <div class="row">
+              <div class="col">
+                <!-- <input type="submit" value="Rechnen" class="btn btn-dark button-calculate" /> -->
+
+                <button type="submit" class="btn btn-dark button-calculate">Rechnen</button>
+              </div>
+            </div>
+          </form>
+
+          <div class="alert alert-secondary my-3" id="output"></div>
+          <div class="alert alert-secondary my-3" id="output2"></div>
+        </div>
+      </section>
+    </main>
+    <script>
+      'use strict';
+
+      // DOM & Variabendeklaration ==
+      const formCalculatorEl = document.querySelector('.form-calculator');
+      const outputAEl = document.querySelector('#output');
+      const outputBEl = document.querySelector('#output2');
+
+      const streckeEl = document.querySelector('input[name="strecke"]');
+      const benzinMengeEl = document.querySelector('input[name="benzinmenge"]');
+      const tankGroesseEL = document.querySelector('input[name="tangroesse"]');
+
+      // 1. Schreiben Sie ein Programm zur Kraftstoffverbrauchsberechnung für Pkws.
+      //const benzinMenge = prompt('Geben Sie die verbrauchte Benzinmenge an!');
+      //const strecke = prompt('Geben Sie die Strecke an!');
+
+      // Funktionen =========
+
+      //
+
+      // EventHandler =======
+      const onSubmit = (e) => {
+        e.preventDefault();
+      };
+
+      formCalculatorEl.addEventListener('submit', onSubmit); // onSumbit = funktionsreferenz
+    </script>
+  </body>
+</html>