01_grundlagen/uebungen/u35_reichweite-verbrauch.html

@@ -69,19 +69,40 @@
 
       const streckeEl = document.querySelector('input[name="strecke"]');
       const benzinMengeEl = document.querySelector('input[name="benzinmenge"]');
-      const tankGroesseEL = document.querySelector('input[name="tangroesse"]');
+      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 =========
+      const calcBenzinMenge = (drivenKm, usedFuelAmount) => {
+        if (isNaN(drivenKm) || isNaN(usedFuelAmount)) {
+          return NaN;
+        }
 
-      //
+        const fuelPer100Km = (usedFuelAmount / drivenKm) * 100;
+        return fuelPer100Km;
+      };
+
+      const calcStrecke = (drivenKm, usedFuelAmount, fuelTankVolume) => {
+        if (isNaN(drivenKm) || isNaN(usedFuelAmount) || isNaN(fuelTankVolume)) {
+          return NaN;
+        }
+
+        const maximumRange = (fuelTankVolume * drivenKm) / usedFuelAmount;
+        return maximumRange;
+      };
 
       // EventHandler =======
       const onSubmit = (e) => {
         e.preventDefault();
+        const strecke = Number(streckeEl.value);
+        const benzinMenge = Number(benzinMengeEl.value);
+        const tankGroesse = Number(tankGroesseEl.value);
+
+        outputAEl.textContent = `Verbrauch/100km: ${calcBenzinMenge(strecke, benzinMenge).toFixed(1)}l`;
+        outputBEl.textContent = `Stecke: ${calcStrecke(strecke, benzinMenge, tankGroesse).toFixed(1)}km`;
       };
 
       formCalculatorEl.addEventListener('submit', onSubmit); // onSumbit = funktionsreferenz