01_grundlagen/linksammlung.md

@@ -28,6 +28,9 @@
 - [CSS Guide Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
 - [CSS Flexboxfroggy](https://flexboxfroggy.com/#de)
 - [CSS Gridgarden](https://cssgridgarden.com/#de)
+- [CSS3 color names](https://htmlcolorcodes.com/color-names/)
+- [CSS Gradient](https://cssgradient.io/)
+- [Animate.css](https://animate.style/)
 
 ## Software/ Tools
 

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

@@ -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>

01_grundlagen/uebungen/u15-u17_reichweite-verbrauch.html

@@ -6,6 +6,7 @@
     <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">
@@ -18,7 +19,8 @@
               Kraftstoffverbrauch auf 100 km und gibt ihn aus.
 
               <blockquote>
-                <strong>Hinweis:</strong> Verwenden Sie folgende Formel:<br />
+                <strong>Hinweis:</strong> Verwenden Sie folgende Formel:
+
                 <code>Verbrauch [l/100km] = Benzinmenge [l] / Strecke [km] × 100</code>
               </blockquote>
             </li>
@@ -26,7 +28,8 @@
               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 />
+                <strong>Hinweis:</strong> Verwenden Sie folgende Formel:
+
                 <code> Reichweite [km] = Tankgröße [l] × Strecke [km] / Benzinmenge [l] </code>
               </blockquote>
             </li>
@@ -45,6 +48,21 @@
 
       const outputAEl = document.querySelector('.output-a');
       const outputBEl = document.querySelector('.output-b');
+
+      const distance = prompt('Geben Sie die gefahre Distanz in Kilometer ein');
+      const gasolineAmount = prompt('Geben Sie die verbrauchte Benzinmenge in Litern ein');
+      const tankCapacity = prompt('Geben Sie die Tankgröße in Litern ein');
+
+      // Verbrauch [l/100km] = Benzinmenge [l] / Strecke [km] × 100
+      const consumption = (gasolineAmount / distance) * 100;
+      // Reichweite [km] = Tankgröße [l] × Strecke [km] / Benzinmenge [l]
+      const maximumRange = (tankCapacity * distance) / gasolineAmount;
+
+      console.log(consumption);
+      console.log(maximumRange);
+
+      outputAEl.textContent = `Der Kraftstoffverbrauch auf 100 km: ${consumption.toFixed(1)}`;
+      outputBEl.textContent = `Die maximale Reichweite in Kilometern: ${maximumRange.toFixed(1)}`;
     </script>
   </body>
 </html>

01_grundlagen/uebungen/u16_rest-sekunden-2.html

@@ -22,6 +22,10 @@
       'use strict';
 
       const outputEl = document.querySelector('.output');
+      const minutes = Math.floor(2000 / 60); // => 33   Minuten
+      const seconds = 2000 % 60; // => 20   Restsekunden
+
+      outputEl.textContent = `${minutes}:${seconds} (mm:ss)`;
     </script>
   </body>
 </html>

01_grundlagen/uebungen/u18_lottozahl.html

@@ -16,7 +16,7 @@
         overflow: hidden;
       }
 
-      .lotto-number {
+      .lotto-ball {
         width: 50px;
         height: 50px;
         border-radius: 50%;
@@ -49,7 +49,7 @@
           </p>
         </div>
         <div class="output alert alert-secondary my-3">
-          <div class="lotto-ball"><span class="lotto-number">00</span></div>
+          <div class="lotto-ball animate__animated animate__bounceIn"><span class="lotto-number">00</span></div>
         </div>
       </div>
     </main>
@@ -58,6 +58,12 @@
 
       const outputEl = document.querySelector('.output');
       const lottoNumberEl = document.querySelector('.lotto-number');
+
+      const randomLottoNumber = Math.floor(Math.random() * 49) + 1;
+
+      console.log(randomLottoNumber);
+
+      lottoNumberEl.textContent = randomLottoNumber;
     </script>
   </body>
 </html>

01_grundlagen/unterricht/tag05/website-static/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Webseite mit HTML & CSS (SCSS)</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">
+        <h1>Webseite mit HTML & CSS (SCSS)</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+    </script>
+  </body>
+</html>