weather-box

feat: webseite-js
added uebungen 1 - 10
2026-07-10 09:33:29 +02:00 · 2026-07-10 09:09:52 +02:00 · 2026-07-09 14:33:21 +02:00 · 2026-07-09 13:54:36 +02:00 · 2026-07-09 12:09:07 +02:00 · 2026-07-09 08:43:52 +02:00
1915 changed files with 348685 additions and 15 deletions
--- a/01_grundlagen/MATERIAL/accompanying_files/template/index.html
+++ b/01_grundlagen/MATERIAL/accompanying_files/template/index.html
@@ -0,0 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Index</title>
    <script src="script.js" defer></script>
  </head>
  <body></body>
 </html>
--- a/01_grundlagen/MATERIAL/accompanying_files/template/script.js
+++ b/01_grundlagen/MATERIAL/accompanying_files/template/script.js
@@ -0,0 +1 @@
 'use strict';
--- a/01_grundlagen/docs/emmet-cheatsheet.pdf
+++ b/01_grundlagen/docs/emmet-cheatsheet.pdf
--- a/01_grundlagen/docs/escape-notation.md
+++ b/01_grundlagen/docs/escape-notation.md
@@ -0,0 +1,19 @@
 # Escape–Notation (Backslash Maskierung)
 Neben gewöhnlichen, druckbaren Zeichen gibt es Sonderzeichen, die mittels [Escape-Notation](https://www.w3schools.com/python/python_strings_escape.asp#:~:text=An%20escape%20character%20is%20a,character%20you%20want%20to%20insert.) kodiert werden können:
 | Code                 | Ausgabe                           |
 | -------------------- | --------------------------------- |
 | `\0`                 | das NULL-Zeichen                  |
 | `\'`                 | einfaches Anführungszeichen       |
 | `\"`                 | doppeltes Anführungszeichen       |
 | `\\`                 | Rückwärtsschrägstrich (backslash) |
 | `\n`                 | Zeilenumbruch (new line)          |
 | `\r`                 | Zeilenanfang (carriage return)    |
 | `\v`                 | vertikaler Tabulator              |
 | `\t`                 | Tabulator                         |
 | `\b`                 | Backspace                         |
 | `\f`                 | Seitenvorschub (form feed)        |
 | `\uXXXX`             | Unicode-Codepoint                 |
 | `\u{X}`…`\u{XXXXXX}` | Unicode-Codepoint                 |
 | `\xXX`               | Latin-1-Zeichen                   |
--- a/01_grundlagen/docs/escape-notation.pdf
+++ b/01_grundlagen/docs/escape-notation.pdf
--- a/01_grundlagen/docs/programmierrichtlinien.md
+++ b/01_grundlagen/docs/programmierrichtlinien.md
@@ -0,0 +1,8 @@
 # Programmierrichtlinien
 - Schreibe immer genau eine Anweisung in genau eine Zeile.
 - Setze beim Beenden einer Anweisung das Semikolon.
 - Verwende im Normalfall einfache Anführungszeichen zur Begrenzung von Strings. (prefer: Single Quote)
 - Schreibe Konstanten, die der Konfiguration dienen, komplett in Großbuchstaben und verwende den Underscore \_ zur Worttrennung. (SCREAMING_SNAKE_CASE)
 - Deklariere Konstanten, die der Konfiguration dienen, am Anfang deines Codes.
 - Vor und nach einem Operator mit zwei Operanden (z. B. Additions- oder Zuweisungsoperator) steht ein Leerzeichen.
--- a/01_grundlagen/docs/schleifen-in-js.pdf
+++ b/01_grundlagen/docs/schleifen-in-js.pdf
--- a/01_grundlagen/faq/htmltagwrap.html
+++ b/01_grundlagen/faq/htmltagwrap.html
@@ -0,0 +1,31 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTMLTagWrap</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>HTMLTagWrap</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex id molestias pariatur voluptatibus exercitationem,
          iusto eum autem quae nam adipisci labore provident optio cum doloribus numquam, cupiditate necessitatibus
          ducimus praesentium?
        </p>
        <ol>
          <li>Listenpunkt</li>
          <li>Listenpunkt</li>
          <li>Listenpunkt</li>
          <li>Listenpunkt</li>
          <li>Listenpunkt</li>
        </ol>
      </div>
    </main>
    <script>
      'use strict';
    </script>
  </body>
 </html>
--- a/01_grundlagen/faq/style.css
+++ b/01_grundlagen/faq/style.css
@@ -0,0 +1,9 @@
 *,
 html {
  margin: 0;
  padding: 0;
 }
 body {
  background-color: #ff9900;
 }
--- a/01_grundlagen/faq/substr.js
+++ b/01_grundlagen/faq/substr.js
@@ -0,0 +1 @@
 'test'.substr(1);
--- a/01_grundlagen/faq/xyz-example.js
+++ b/01_grundlagen/faq/xyz-example.js
@@ -0,0 +1,13 @@
 'use strict';
 let x = () => {
  a = 3;
 };
 let y = () => (a = 5);
 let z = () => {
  console.log(a);
 };
 x();
 y();
 z();
--- a/01_grundlagen/projekte/js-basics-alcohol-test-template/.gitignore
+++ b/01_grundlagen/projekte/js-basics-alcohol-test-template/.gitignore
@@ -0,0 +1,24 @@
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 node_modules
 dist
 dist-ssr
 *.local
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
 .DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
--- a/01_grundlagen/projekte/js-basics-alcohol-test-template/README.md
+++ b/01_grundlagen/projekte/js-basics-alcohol-test-template/README.md
@@ -0,0 +1,21 @@
 ## Alcohol Test: Template
 Alcohol Test is an application that helps you obtain a rough estimate of your blood alcohol content. Users first enter their weight and then log beverages as needed. From this, the estimated current blood alcohol content (EBAC) is calculated. This template is the starting point from which you can begin your submission task. Let yourself go and don’t limit your creativity.
 ## License and terms of use
 © Web Professional Institute Inc. All rights reserved.
 This material is provided solely for students enrolled in courses offered by Web Professional Institute Inc. By accessing or using this code, you acknowledge that it is strictly for educational use within the context of Web Professional Institute Inc. programs.
 **Usage Restrictions:**
 - Redistribution, sharing, or copying of this material outside the course environment is strictly prohibited.
 - The content is designed to support your learning objectives and is not authorized for commercial projects, public repositories, or applications beyond the course scope.
 - Unauthorized commercial use or open-source distribution is strictly prohibited and may result in expulsion from the program and legal action.
 **Agreement & Rights:**
 As a student, you have agreed to these terms as part of your enrollment agreement, which includes additional details on permitted uses, restrictions, and policies. The author and Web Professional Institute Inc. retain all rights to this material, including the code base and instructional content.
 For any questions regarding these terms, please contact Web Professional Institute Inc. for clarification.
--- a/01_grundlagen/projekte/js-basics-alcohol-test-template/index.js
+++ b/01_grundlagen/projekte/js-basics-alcohol-test-template/index.js
@@ -0,0 +1,17 @@
 const data = {
  weight: 70,
  drinks: [
    {
      type: 'beer',
      amount: 1,
    },
    {
      type: 'wine',
      amount: 1,
    },
  ],
 };
 // Your code here
 console.log(decideOnDrivingAbility(data));
--- a/01_grundlagen/projekte/js-basics-royal-flush-template/.gitignore
+++ b/01_grundlagen/projekte/js-basics-royal-flush-template/.gitignore
@@ -0,0 +1,24 @@
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 node_modules
 dist
 dist-ssr
 *.local
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
 .DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
--- a/01_grundlagen/projekte/js-basics-royal-flush-template/Augabenstellung.md
+++ b/01_grundlagen/projekte/js-basics-royal-flush-template/Augabenstellung.md
@@ -0,0 +1,160 @@
 # Projektarbeit 1: Royal Flush\!
 ## Einleitung
 Offensichtlich hat sich herumgesprochen, dass sich mit Online-Poker eine Menge Geld verdienen lässt. Dein Auftraggeber möchte eine neue Poker-Website entwickeln. Die Spiellogik benötigt viele spezielle Funktionen. Deswegen hat der Projektleiter dich dem Team zugeteilt. Jeder Entwickler programmiert nur einen kleinen Teil der Webanwendung.
 Natürlich fällt die Programmierung der **wichtigsten Funktion** in deinen Aufgabenbereich.
 ## Technologien / Anforderungen
 - Setze **JavaScript – ECMAScript 2015 (ES6)** oder neuer ein.
 - Externe JavaScript-Bibliotheken (oder aus Drittquellen übernommener Code) sind **nicht** zugelassen.
 - Überprüft wird die Aufgabe im aktuellen **Chrome Browser**.
 - Entwickle **kein grafisches User Interface (GUI)** — d. h. du benötigst auch kein HTML oder CSS.
 - Verwende lediglich die **Konsolenausgabe**, um die Funktionalität der Anwendung zu demonstrieren.
 ---
 ## Arbeitsschritt 1: Prüfung auf Name und Kartenfarbe
 Das neue Pokersystem repräsentiert eine Karte intern als String aus **Name** (z. B. `K` für King) und **Kartenfarbe** (z. B. `♠`). Die Kartenfarben verwenden ihre jeweiligen UTF-8-Zeichen. Beispielsweise wird die Karte Herzkönigin als `'Q♥'` und die Karte Kreuz 8 als `'8♣'` repräsentiert.
 Folgende Konstanten sind bereits vorgegeben:
 ```javascript
 const SUITS = '♠♥♦♣';
 const NAMES = [
  '2',
  '3',
  '4',
  '5',
  '6',
  '7',
  '8',
  '9',
  '10',
  'J',
  'Q',
  'K',
  'A',
 ];
 ```
 ### Codebeispiel 361
 Schreibe die Funktionen `toName` und `toSuit`, die eine Karte jeweils auf ihren Namen bzw. auf ihre Kartenfarbe abbilden.
 **Beispiele:**
 ```javascript
 toName('9♣'); // => '9'
 toName('10♥'); // => '10'
 toName('Q♥'); // => 'Q'
 toSuit('9♣'); // => '♣'
 toSuit('10♥'); // => '♥'
 ```
 ---
 ## Arbeitsschritt 2: Validierung
 ### 🔨 Codebeispiel 362
 Programmiere eine Funktion `isValidCard`, die prüft, ob es sich bei dem übergebenen String um eine valide Karte handelt. Eine String gilt dann als eine valide Repräsentation einer Karte, wenn er exakt der besprochenen Zusammensetzung aus Name und Farbe entspricht.
 **Beispiele:**
 ```javascript
 isValidCard('9♣'); // => true
 isValidCard('11♣'); // => false
 isValidCard('9X'); // => false
 ```
 Eine Pokerhand besteht aus fünf Karten. Das Pokersystem repräsentiert diese als Arrays mit je fünf Elementen, bei denen es sich um Stringrepräsentationen von Karten handelt, z. B. `['9♣', '9♦', '9♠', '9♥', 'Q♥']`.
 Programmiere noch eine weitere Funktion `isValidHand`, die prüft, ob es sich bei einem übergebenen Array um eine valide Repräsentation einer Kartenhand handelt. Eine Kartenhand ist dann valide (und nur dann), wenn sie genau **fünf valide Karten** enthält.
 > **Wichtig:** Greife zur Implementierung von `isValidCard` auf die Funktionen `toName` und `toSuit` zurück. Genauso verwendest du `isValidCard` zur Realisierung von `isValidHand`.
 ---
 ## Arbeitsschritt 3: Sortierung
 Um dem Spieler das Erfassen seiner Kartenhand zu erleichtern, müssen die Karten vorsortiert werden.
 ### Codebeispiel 363
 Programmiere dazu eine Funktion `sortHand`.
 1.  Vergleiche zunächst nur anhand ihres **Namens**, so dass 2er, 3er …, Damen, Könige etc. direkt nebeneinander angeordnet werden. Um die korrekte Reihenfolge der Namen zu bestimmen, kannst du auf den **Indexwert von `NAMES`** zurückgreifen. Z. B. ist eine `'2'` mit Indexwert 0 weniger wert als ein Bube (`'J'`) mit Indexwert 9.
 2.  Berücksichtige in einer überarbeiteten Variante auch die **Kartenfarbe**. Es gilt die Reihenfolge aus dem String `SUITS`. Diese neue Sortierung soll dann die vorherige Variante ersetzen.
 **Beispiele:**
 ```javascript
 sortHand(['3♥', '2♥', '5♥', '2♣', '4♣']);
 // => ['2♠', '2♥', '2♦', '2♣', 'Q♥'] // Korrektur: Die Kartenfarben sollten in der richtigen Reihenfolge stehen, dies ist ein Beispiel aus der Aufgabenstellung
 sortHand(['3♥', '2♥', '5♥', '2♣', '4♣']);
 // => ['2♣', '2♥', '3♥', '4♣', '5♥'] // Bei gleicher Zahl ist die Farbe entscheidend: ♣ ist höher als ♥ im Beispiel, wenn SUITS = '♠♥♦♣'
 sortHand(['2♦', 'Q♥', '2♥', '2♣', '2♠']);
 // => ['2♠', '2♥', '2♦', '2♣', 'Q♥'] // Falsche Ausgabe im Beispiel, richtige Sortierung basierend auf SUITS = '♠♥♦♣'
 // => ['2♠', '2♥', '2♦', '2♣', 'Q♥']
 // Anmerkung: Basierend auf SUITS='♠♥♦♣', wäre die Reihenfolge ♠ > ♥ > ♦ > ♣.
 // Für die Sortierung '2♠', '2♥', '2♦', '2♣', 'Q♥' bedeutet dies, dass ♠ den höchsten Indexwert hat, wenn die Sortierung aufsteigend ist.
 ```
 > **Tipps zur Vorgehensweise:**
 >
 > - Parametrisiere `sort` mit einer Vergleichsfunktion `compareCards`, die zwei Karten entgegennimmt und einen positiven Wert, einen negativen Wert oder (bei identischen Karten) 0 zurückliefert. Du kannst das wie bei der numerischen Sortierung mit **Subtraktion** lösen.
 > - Um den Vergleichswert zu bestimmen, vergleichst du zunächst nur die **Indexwerte der Namen**.
 > - Um die Kartenfarbe zu berücksichtigen, kannst du einen Kartenpositionswert durch eine höhere Gewichtung des Indexwertes des Namens erhalten:
 >   $$\text{Kartenposition} = \text{Gewichtungsfaktor} \times \text{Position des Namens in NAMES} + \text{Position der Kartenfarbe in SUITS}$$
 > - Der **Gewichtungsfaktor** ist dabei idealerweise einfach die Anzahl der Kartenfarben (`SUITS.length`).
 ---
 ## Arbeitsschritt 4: Kategorisierung
 ### 🔨 Codebeispiel 364
 - Eine Pokerhand, bei der alle Karten die **gleiche Kartenfarbe** aufweisen, heißt **Flush**.
 - Eine Hand, die aus **fünf aufeinanderfolgenden Karten** besteht, heißt **Straight** (deutsch: Straße).
 - Für den unwahrscheinlichen Fall, dass die Hand aus fünf aufeinanderfolgenden Karten in der gleichen Farbe besteht, spricht man von einem **Straight Flush**.
 - Falls ein Straight Flush außerdem noch das **Ass (als höchste Karte)** enthält, liegt ein **Royal Flush** vor — das wertvollste Pokerblatt\!
 Entwickle Funktionen, die eine Pokerhand darauf prüfen, ob jeweils eine der oben genannten Kategorien vorliegt. Beachte auch, dass das Array die Karten nicht zwingend in aufsteigender Reihenfolge enthalten muss.
 **Beispiele:**
 ```javascript
 isFlush(['7♥', '2♥', 'Q♥', '10♥', '5♥']); // => true
 isFlush(['7♥', '2♥', 'Q♥', '10♣', '5♥']); // => false
 isStraight(['5♥', '6♦', '7♥', '8♣', '9♥']); // => true
 isStraightFlush(['5♥', '6♥', '7♥', '8♥', '9♥']); // => true
 isRoyalFlush(['10♥', 'J♥', 'Q♥', 'K♥', 'A♥']); // => true
 isRoyalFlush(['10♥', 'J♥', 'Q♥', 'K♣', 'A♥']); // => false
 isRoyalFlush(['K♥', 'A♥', 'Q♥', '10♥', 'J♥']); // => true
 ```
 > **Tipp zur Vorgehensweise (Straight):**
 >
 > - Betrachte nur die Namen der Karten.
 > - Sortiere diese und verbinde sie zu einem String (mittels `join()`).
 > - Wenn dieser String in `NAMES.join()` enthalten ist, handelt es sich bei der ursprünglichen Hand um einen Straight.
 >
 > **Beispiel:**
 >
 > `['9♥', '6♦', '7♥', '5♣', '8♥']` $\to$ `['9', '6', '7', '5', '8']` $\to$ `['5', '6', '7', '8', '9']` $\to$ `'5,6,7,8,9'`
 >
 > `'5,6,7,8,9'` liegt innerhalb von `'2,3,4,5,6,7,8,9,10,J,Q,K,A'` und ist somit ein Straight.
 ---
 ## Hinweise
 - Selbstverständlich kannst du die Implementierung der verlangten Funktionen jederzeit in weitere Funktionen unterteilen.
 - Alle verlangten Funktionen lassen sich aber prinzipiell jeweils mit einem einzigen Ausdruck implementieren. Tatsächlich wären an keiner Stelle geschweifte Klammern nötig. Du kannst sie aber natürlich verwenden, falls du möchtest.
 - Die verlangten Funktionen bauen aufeinander auf. So nutzt beispielsweise `isValidHand` die Funktion `isValidCard` und wird selbst in den darauffolgenden Funktionen weiterverwendet.
 - Du musst lediglich die Funktionen liefern. Es ist nicht erforderlich, Werte per `prompt` o.ä. zu erfragen.
 - Die in der Aufgabe genannten Angaben zur API sind grundsätzlich verpflichtend. D. h. du verwendest die in der Aufgabenstellung genannten **Funktionsnamen, Argumente, Argumentnamen, Rückgabewerte** usw.
--- a/01_grundlagen/projekte/js-basics-royal-flush-template/README.md
+++ b/01_grundlagen/projekte/js-basics-royal-flush-template/README.md
@@ -0,0 +1,21 @@
 ## Royal Flush: Template
 Royal Flush is an application that allows you to check hands in Texas Hold'em. The goal is to check if a hand is valid. You should also be able to check whether it is a flush, a straight, a straight flush or a royal flush.
 ## License and terms of use
 © Web Professional Institute Inc. All rights reserved.
 This material is provided solely for students enrolled in courses offered by Web Professional Institute Inc. By accessing or using this code, you acknowledge that it is strictly for educational use within the context of Web Professional Institute Inc. programs.
 **Usage Restrictions:**
 - Redistribution, sharing, or copying of this material outside the course environment is strictly prohibited.
 - The content is designed to support your learning objectives and is not authorized for commercial projects, public repositories, or applications beyond the course scope.
 - Unauthorized commercial use or open-source distribution is strictly prohibited and may result in expulsion from the program and legal action.
 **Agreement & Rights:**
 As a student, you have agreed to these terms as part of your enrollment agreement, which includes additional details on permitted uses, restrictions, and policies. The author and Web Professional Institute Inc. retain all rights to this material, including the code base and instructional content.
 For any questions regarding these terms, please contact Web Professional Institute Inc. for clarification.
--- a/01_grundlagen/projekte/js-basics-royal-flush-template/index.js
+++ b/01_grundlagen/projekte/js-basics-royal-flush-template/index.js
@@ -0,0 +1,4 @@
 const SUITS = '♠♥♦♣';
 const NAMES = ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A'];
 // Your code here
--- a/01_grundlagen/uebungen/#o01_palindrom.html
+++ b/01_grundlagen/uebungen/#o01_palindrom.html
@@ -0,0 +1,63 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Optionale Übung optional 01: Palindrom Checker</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">
          <h2>Optionale Übung 01: Palindrom Checker</h2>
          <p>
            Ein Palindrom ist ein Wort, das vorwärts und rückwärts gelesen dasselbe ist. Ein guter Weg, um das zu
            überprüfen, ist, das Wort umzukehren und zu sehen, ob es dem Original entspricht. Allerdings sollte man
            dabei die Groß- und Kleinschreibung sowie Leerzeichen oder Sonderzeichen berücksichtigen.
          </p>
          <p>
            Schreibe eine JavaScript-Funktion namens <code>isPalindrom</code>, die eine Zeichenkette (string) als
            Eingabe akzeptiert. Die Funktion soll <code>true</code> zurückgeben, wenn es sich bei der Zeichenkette um
            ein Palindrom handelt, und <code>false</code> andernfalls.
          </p>
          <h3>Beispiele:</h3>
          <ul>
            <li>"anna"</li>
            <li>"Lagerregal"</li>
            <li>"Ein Esel lese nie"</li>
          </ul>
          <h3>Anforderungen:</h3>
          <ul>
            <li>
              Die Funktion soll nicht zwischen Groß- und Kleinschreibung unterscheiden (z. B. 'Anna' ist ein Palindrom).
            </li>
            <li>Leerzeichen und Satzzeichen sollen ignoriert werden.</li>
          </ul>
        </div>
      </div>
    </main>
    <script>
      'use strict';
      const outputEl = document.querySelector('.output');
      const isPalindrom = (toCheckString) => {
        const reverseString = toCheckString
          .replace(/[$%!.,]/g, '')
          .split('')
          .reverse()
          .join('');
        return toCheckString.trim().toLowerCase() === reverseString.trim().toLowerCase() ? true : false;
      };
      const toTest = ` Lagerregal`;
      const result = isPalindrom(toTest);
      console.log(toTest, result);
      outputEl.textContent = `${toTest} ist ${result ? 'ein' : 'KEIN'} Palindrom`;
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/o01_kontaktformular-adel.html
+++ b/01_grundlagen/uebungen/o01_kontaktformular-adel.html
@@ -0,0 +1,183 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></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>Kontaktformular</h1>
        <form class="form-contact">
          <!-- Eigene CSS-Klasse -->
          <div class="row">
            <div class="col-12 col-md-2">
              <div class="mb-3">
                <label for="input-gender" class="form-label">Anrede</label>
                <select id="input-gender" name="gender" class="form-select" required>
                  <option value="f">Frau</option>
                  <option value="m">Herr</option>
                  <option value="d">Divers</option>
                </select>
              </div>
            </div>
            <!-- ------------------------------------------------------------------- -->
            <div class="col-12 col-md-5">
              <!-- col-12: volle Breite auf Handy, col-md-6: halbe Breite auf Desktop -->
              <div class="mb-3">
                <!-- margin-bottom: 1rem -->
                <label for="input-firstname" class="form-label">Vorname</label>
                <input
                  type="text"
                  id="input-firstname"
                  name="firstname"
                  class="form-control input-firstname"
                  placeholder="Vorname eingeben.."
                  required />
              </div>
            </div>
            <!-- --------------------------------- -->
            <div class="col-12 col-md-5">
              <div class="mb-3">
                <label for="lastname" class="form-label">Nachname</label>
                <input
                  type="text"
                  id="lastname"
                  name="lastname"
                  class="form-control"
                  placeholder="Nachname eingeben..."
                  required />
              </div>
            </div>
          </div>
          <!-- --------------------------------------------- -->
          <!-- ------------------------------------------------ -->
          <div class="row">
            <div class="col-12 col-md-6">
              <div class="mb-3">
                <label for="E-Mail" class="form-label">E-Mail</label>
                <input
                  type="text"
                  id="E-Mail"
                  name="E-Mail"
                  class="form-control"
                  placeholder="E-Mail eingeben..."
                  required />
              </div>
            </div>
            <div class="col-12 col-md-6">
              <div class="mb-3">
                <label for="input-birthdate" class="form-label">Geburtsdatum</label>
                <input type="date" id="input-birthdate" name="birthdate" class="form-control" required />
              </div>
            </div>
          </div>
          <!-- ------------------------ -->
          <!-- <label for="Adresse" class="form-lable">Adresse</label> -->
          <!-- ------------------------------------------ -->
          <div class="row">
            <div class="col-12 col-md-4">
              <div class="mb-3">
                <label for="Strasse" class="form-lable">Straße</label>
                <input
                  type="text"
                  id="Strasse"
                  name="Straße"
                  class="form-control"
                  placeholder="Straße eingeben..."
                  required />
              </div>
            </div>
            <!-- ---------------------------------------------  -->
            <div class="col-12 col-md-4">
              <div class="mb-3">
                <label for="plz" class="form-lable">PLZ</label>
                <input type="text" id="plz" name="PLZ" class="form-control" placeholder="PLZ" required />
              </div>
            </div>
            <!-- ---------------------------------------------- -->
            <div class="col-3 col-md-4">
              <div class="mb-3">
                <label for="Hausnr" class="form-Hausnr">Hausnummer</label>
                <input type="text" id="Hausnr" name="Hausnr" class="form-control" placeholder="Hausnr" required />
              </div>
            </div>
          </div>
          <!-- /row ---------------------------------------------------- -->
          <div class="row">
            <div class="col-12">
              <div class="mb-3">
                <label for="Stadt" class="form-ort">Stadt</label>
                <input type="text" id="Stadt" name="Stadt" class="form-control" placeholder="Stadt" required />
              </div>
            </div>
          </div>
          <!-- ----------------------------------------- -->
          <div class="row">
            <div class="col">
              <div class="mb-3">
                <label for="input-subject" class="form-label">Land</label>
                <select id="input-subject" name="subject" class="form-select" required>
                  <option value="">Deutschland</option>
                  <option value="">Frankreich</option>
                  <option value="">Österreich</option>
                </select>
              </div>
            </div>
          </div>
          <!-- ------------------------------------    -->
          <div class="row">
            <div class="col-12">
              <div class="mb-3">
                <label for="input-message" class="form-label">Nachricht</label>
                <textarea
                  id="input-message"
                  name="message"
                  class="form-control"
                  rows="3"
                  placeholder=""
                  required></textarea>
              </div>
            </div>
          </div>
          <!-- ----------------------------------------   -->
          <div class="row">
            <div class="col-12">
              <div class="mb-3 form-check">
                <input
                  type="checkbox"
                  id="input-datenschutz"
                  name="datenschutz"
                  class="form-check-input"
                  value="datenschutz"
                  required />
                <label for="input-datenschutz" class="form-check-label">
                  Ich habe die Datenschutzerklärung gelesen und akzeptiere sie.
                </label>
              </div>
            </div>
          </div>
          <!-- ▲ /row ▲ -->
        </form>
      </div>
    </main>
    <script>
      'use strict';
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/o01_kontaktformular-ersin.html
+++ b/01_grundlagen/uebungen/o01_kontaktformular-ersin.html
@@ -0,0 +1,209 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FormularUebung</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>FormularUebung</h1>
        <form class="form-contact">
          <div class="row">
            <div class="col-12 col-sm-6">
              <div class="mb-3">
                <label for="input-firstname" class="form-label">Vorname</label>
                <input
                  type="text"
                  id="input-firstname"
                  name="firstname"
                  class="form-control input-firstname"
                  placeholder="Vorname eingeben..." />
              </div>
            </div>
            <div class="col-12 col-sm-6">
              <div class="mb-3">
                <label for="input-lastname" class="form-label">Nachname</label>
                <input
                  type="text"
                  id="input-lastname"
                  name="lastname"
                  class="form-control input-lastname"
                  placeholder="Nachname eingeben..." />
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-12 col-sm-8">
              <div class="mb-3">
                <label for="input-street-name" class="form-label">Straße</label>
                <input
                  type="text"
                  id="input-street-name"
                  name="street-name"
                  class="form-control input-street-name"
                  placeholder="Straße eingeben..." />
              </div>
            </div>
            <div class="col-12 col-sm">
              <div class="mb-3">
                <label for="input-housenr" class="form-label">Hausnummer</label>
                <input
                  type="text"
                  id="input-housenr"
                  name="housenr"
                  class="form-control input-housenr"
                  placeholder="Hausnr. eingeben..." />
              </div>
            </div>
          </div>
          <!-- Bei type=number mit min="00000" und max="999999" sind Ergebnisse wie 7 möglich, daher type="text"-->
          <div class="row">
            <div class="col-12 col-sm">
              <div class="mb-3">
                <label for="input-zipcode" class="form-label">Postleitzahl</label>
                <input
                  type="text"
                  id="input-zipcode"
                  name="zipcode"
                  class="form-control input-zipcode"
                  placeholder="PLZ eingeben..."
                  minlength="5"
                  maxlength="7" />
              </div>
            </div>
            <div class="col-12 col-sm-8">
              <div class="mb-3">
                <label for="input-town" class="form-label">Stadt/Ort</label>
                <input
                  type="text"
                  id="input-town"
                  name="town"
                  class="form-control input-town"
                  placeholder="Ort eingeben..." />
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="mb-3">
                <label for="select-country" class="form-label">Land auswählen</label>
                <select name="country" class="form-select" id="select-country">
                  <option value="" selected>Bitte Land auswählen</option>
                  <optgroup label="Südamerika">
                    <option value="ag">Argentinien</option>
                    <option value="br">Brasilien</option>
                    <option value="uy">Uruguay</option>
                    <option value="cl">Chile</option>
                  </optgroup>
                  <optgroup label="Europa">
                    <option value="de">Deutschland</option>
                    <option value="fr">Frankreich</option>
                    <option value="es">Spanien</option>
                    <option value="it">Italien</option>
                  </optgroup>
                </select>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="mb-3">
                <label for="input-email" class="form-label">Type: email</label>
                <input
                  type="email"
                  required
                  class="form-control"
                  name="email"
                  id="input-email"
                  placeholder="E-Mail Adresse eingeben..." />
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-12">
              <div class="mb-3">
                <label for="input-subject" class="form-label">Thema</label>
                <input
                  type="text"
                  id="input-subject"
                  name="subject"
                  class="form-control input-subject"
                  placeholder="Thema eingeben..." />
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="mb-3">
                <label for="input-message" class="form-label">Nachricht</label>
                <textarea
                  id="input-message"
                  name="message"
                  class="form-control input-message"
                  placeholder="Deine Nachricht"></textarea>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="mb-3">
                <button type="submit" class="btn btn-dark">Formular abschicken</button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </main>
    <script>
      // Vorname, Nachname,
      // Str, Hausnummer
      // pls, ort
      // Land (select)
      // Email
      // subject
      // message
      // btn
      'use strict';
      const form = document.querySelector('.form-contact');
      // eventlistener function e soll bei abschicken ausgeführt werden
      form.addEventListener('submit', function (e) {
        e.preventDefault(); // Damit die Seite nich neu lädt wie beim Beispiel am Freitag
        const firstnameEl = document.getElementById('input-firstname').value;
        const lastnameEl = document.getElementById('input-lastname').value;
        const streetEl = document.getElementById('input-street-name').value;
        const housenrEl = document.getElementById('input-housenr').value;
        const zipcodeEl = document.getElementById('input-zipcode').value;
        const townEl = document.getElementById('input-town').value;
        const emailEl = document.getElementById('input-email').value;
        const subjectEl = document.getElementById('input-subject').value;
        const messageEl = document.getElementById('input-message').value;
        //Bei Feldern, wo man was auswählen muss
        const countrySelectEl = document.querySelector('select[name="country"]');
        // const country = countrySelectEl.options[countrySelect.selectedIndex].text;
        const country = countrySelectEl.value;
        console.log(countrySelectEl);
        const summary = `Vorname: ${firstnameEl}, Nachname: ${lastnameEl}, Straße: ${streetEl} ${housenrEl}, PLZ: ${zipcodeEl}, Ort: ${townEl}, Land: ${country}, E-Mail: ${emailEl}, Thema: ${subjectEl}, Nachricht: ${messageEl}`;
        console.log(summary);
        alert(summary);
      });
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u01_console-log.html
+++ b/01_grundlagen/uebungen/u01_console-log.html
@@ -0,0 +1,24 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 1: In die Konsole geloggt</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">
          <h2>Übung 1: In die Konsole geloggt</h2>
          <p>Gib deinen Namen in der Konsole aus.</p>
        </div>
      </div>
    </main>
    <script>
      'use strict';
      console.log('Philippe Torrel');
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u02_alert.html
+++ b/01_grundlagen/uebungen/u02_alert.html
@@ -0,0 +1,27 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 2: Alarm!</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">
          <h2>Übung 2: Alarm!</h2>
          <p>
            Gib den folgenden Text in einer Alert-Box aus: »Alert! Your console is on fire! Hurry! Write an email to the
            fire department.
          </p>
        </div>
      </div>
    </main>
    <script>
      'use strict';
      alert('Alert! Your console is on fire! Hurry! Write an email to the fire department.');
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u03_sekunden.html
+++ b/01_grundlagen/uebungen/u03_sekunden.html
@@ -0,0 +1,35 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 3: Sekunden</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">
          <h2>Übung 3: Sekunden</h2>
          <p>
            Wie viele Minuten und Restsekunden haben 2000 Sekunden? Verwende console.log für die Ausgabe.<br />
            <strong>Hinweise</strong>: Am einfachsten ist die Aufgabe mithilfe des Modulo-Operators zu lösen.
            Nachkommastellen kannst du im Moment noch nicht entfernen. Darauf kommen wir später zurück.
          </p>
        </div>
        <div class="output alert alert-secondary my-3"></div>
      </div>
    </main>
    <script>
      'use strict';
      let outputEl = document.querySelector('.output');
      var minutes = Math.trunc(2000 / 60);
      var seconds = 2000 % 60;
      outputEl.textContent = minutes + ' Minuten ' + seconds + ' Sekunden';
      console.log(minutes + ' Minuten ' + seconds + ' Sekunden');
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u04_glueck_codes.html
+++ b/01_grundlagen/uebungen/u04_glueck_codes.html
@@ -0,0 +1,37 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 4: Glück & Codes</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">
          <h2>Übung 4: Glück & Codes</h2>
          <p>
            Kennst du Glückszahlen und Namenscodes? Hier ist ein Namenscode mit einem interessanten Schema:
            Multipliziere die Länge deines Vornamens mit der Länge deines Nachnamens und lass dir das Ergebnis in der
            Konsole ausgeben.
          </p>
        </div>
        <div class="output alert alert-secondary my-3"></div>
      </div>
    </main>
    <script>
      'use strict';
      let outputEl = document.querySelector('.output');
      let firstName = 'Andreas';
      let lastName = 'Rohleder';
      let lengthName = firstName.length * lastName.length;
      outputEl.textContent = lengthName;
      console.log(lengthName); // => 56
      console.log('Philippe'.length * 'Torrel'.length); // => 48
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u05_typeof.html
+++ b/01_grundlagen/uebungen/u05_typeof.html
@@ -0,0 +1,32 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 5: Na? Was bist denn du?</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">
          <h2>Übung 5: Na? Was bist denn du?</h2>
          <p>
            Welchen Datentyp hat das folgende Literal?<br />
            '42'
          </p>
        </div>
        <div class="output alert alert-secondary my-5"></div>
      </div>
    </main>
    <script>
      'use strict';
      let outputEl = document.querySelector('.output');
      let terry = '42';
      console.log(typeof terry);
      outputEl.textContent = typeof terry;
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u06_rechnen.html
+++ b/01_grundlagen/uebungen/u06_rechnen.html
@@ -0,0 +1,69 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 6: Nur ein bisschen rechnen …</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 6: Nur ein bisschen rechnen …</h1>
          <table class="table table-striped">
            <thead class="table-dark">
              <tr>
                <th>Ausdruck</th>
                <th>Rückgabewert</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>3 + 4</td>
                <td id="rech1"></td>
              </tr>
              <tr>
                <td>3 * 12</td>
                <td id="rech2"></td>
              </tr>
              <tr>
                <td>25 + 12</td>
                <td id="rech3"></td>
              </tr>
              <tr>
                <td>(12 - 3) / 3</td>
                <td id="rech4"></td>
              </tr>
              <tr>
                <td>12 % 3</td>
                <td id="rech5"></td>
              </tr>
              <tr>
                <td>12 * (44 / 11) / 3 + 67</td>
                <td id="rech6"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </main>
    <script>
      'use strict';
      let rech1 = 3 + 4;
      let rech2 = 3 * 12;
      let rech3 = 25 + 12;
      let rech4 = (12 - 3) / 3;
      let rech5 = 12 % 3;
      let rech6 = (12 * (44 / 11)) / 3 + 67;
      document.getElementById('rech1').textContent = rech1;
      document.getElementById('rech2').textContent = rech2;
      document.getElementById('rech3').textContent = rech3;
      document.getElementById('rech4').textContent = rech4;
      document.getElementById('rech5').textContent = rech5;
      document.getElementById('rech6').textContent = rech6;
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u07_prompt-age.html
+++ b/01_grundlagen/uebungen/u07_prompt-age.html
@@ -0,0 +1,33 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 7: Also sowas fragt man doch nicht!</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 7: Also sowas fragt man doch nicht!</h1>
          <p>
            Fragen Sie nun nach dem Alter des Anwenders, speichern Sie es in einer Variable und geben Sie es über die
            Konsole aus. Denken Sie daran, für die Variable einen sinnvollen Bezeichner zu wählen.
          </p>
        </div>
        <div class="output alert alert-secondary my-3"></div>
      </div>
    </main>
    <script>
      'use strict';
      const outputEl = document.querySelector('.output');
      const age = prompt('Wie alt sind Sie?');
      console.log(age);
      outputEl.textContent = `Du bist ${age} Jahre alt.`;
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u08_tax-totalprice.html
+++ b/01_grundlagen/uebungen/u08_tax-totalprice.html
@@ -0,0 +1,52 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 8: Immer diese Steuern...</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">
          <h2>Übung 8: Immer diese Steuern...</h2>
          <p>
            Preise könnten so viel angenehmer sein, wenn die verflixte Mehrwertsteuer nicht wäre. Aber wenn du die
            Steuer schon selbst zahlen musst, kann dir wenigstens das Ausrechnen des Brutto-Preises jemand abnehmen: JS!
            Schreibe also ein Programm, das dir den Bruttopreis zu $150 (netto) berechnet und ausgibt — Hinweis: Es
            sollten $183 sein.
          </p>
          <p>Folgende Definitionen steht dir zur Verfügung:</p>
          <p>
            <code>
              'use strict'<br />
              const TAX_PERCENTAGE = 22<br />
              let price = 150<br />
              /* your code here */<br />
              console.log(totalPrice)<br />
            </code>
          </p>
        </div>
        <div class="output alert alert-secondary my-3"></div>
      </div>
    </main>
    <script>
      'use strict';
      const TAX_PERCENTAGE = 22;
      const TAX_RATE = 1 + TAX_PERCENTAGE / 100; // => 1.22
      const outputEl = document.querySelector('.output');
      const price = 150;
      // const totalPrice = price + (price * TAX_PERCENTAGE) / 100;
      const totalPrice = price * TAX_RATE;
      console.log(totalPrice);
      outputEl.textContent = `total price is: $${totalPrice}`;
      /* your code here */
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u09_bezeichner.html
+++ b/01_grundlagen/uebungen/u09_bezeichner.html
@@ -0,0 +1,59 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 9: Finden Sie geeignete Variablenbezeichner!</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>Übung 9: Finden Sie geeignete Variablenbezeichner!</h1>
        <p>Denken Sie sich geeignete Bezeichner für die Variablen folgender Tabelle aus:</p>
        <table class="table table-striped">
          <thead>
            <tr>
              <th>Bedeutung</th>
              <th>Variablenbezeichner</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Preis eines Buches in einem Onlineshop</td>
              <td><strong>bookPrice</strong>, buchPreis</td>
            </tr>
            <tr>
              <td>Anzahl der angemeldeten Benutzer</td>
              <td>userNr, <strong>userAmount</strong>, loggedUserCount, angemeldeteBenutzer</td>
            </tr>
            <tr>
              <td>Titel einer Webseite</td>
              <td><strong>siteTitle, pageTitle, websiteTitle</strong></td>
            </tr>
            <tr>
              <td>Höhe eines Hauses auf einer Immobiliensite</td>
              <td>hausHoehe, <strong>houseHeight</strong>, buildingHeight, heightOfHouse</td>
            </tr>
            <tr>
              <td>Typ eines Monitors auf der Site eines Herstellers</td>
              <td>monitorTyp, <strong>screenType</strong>, monitorType, displayType</td>
            </tr>
            <tr>
              <td>Fahrgestellnummer eines reparierten Autos auf der Website einer Autowerkstatt</td>
              <td>reapariertFahrgestellNr, <strong>vinRepaired</strong></td>
            </tr>
          </tbody>
        </table>
      </div>
    </main>
    <script>
      'use strict';
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u10_bezeichner-verbessern.html
+++ b/01_grundlagen/uebungen/u10_bezeichner-verbessern.html
@@ -0,0 +1,153 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 10: Bezeichner verbessern</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">
        <h2>Übung 10: Bezeichner verbessern</h2>
        <table class="table table-striped my-5">
          <thead class="table-dark">
            <tr>
              <th>Bezeichner</th>
              <th>Bedeutung</th>
              <th>Problem</th>
              <th>Vorschläge</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>bildNr</td>
              <td>Inhalt</td>
              <td>-</td>
              <td>imageNr, imageNumber</td>
            </tr>
            <tr>
              <td>bildid</td>
              <td>Inhalt</td>
              <td>kein lowerCamelCase</td>
              <td>bildId, imgId, imageId</td>
            </tr>
            <tr>
              <td>bildZähler</td>
              <td>Anzahl der hochgeladenen Bilder</td>
              <td>keine Sonderzeichen</td>
              <td>bildZaehler, imageCounter, imgCounter</td>
            </tr>
            <tr>
              <td>zahlerFuerDie AktuelleZeileIn DerTabelleDie DieBenutzer Auflistet</td>
              <td>Zähler für die aktuelle Zeile, in der Tabelle, die die Benutzer auflistet.</td>
              <td>zu lang</td>
              <td>aktuelleZeileInBenutzerliste, userCountCurrentRow</td>
            </tr>
            <tr>
              <td>urenKelvornAme</td>
              <td>Vorname des Sohns eines Enkels</td>
              <td>falsche Groß- und Kleinschreibweise</td>
              <td>urenkelVorname, greatGrandsonFirstName, firstNameGreatGrandson</td>
            </tr>
            <tr>
              <td>x</td>
              <td>Geburtsdatum</td>
              <td>nicht aussagekräftig</td>
              <td>gebDatum, <strong>birthdate</strong>, dateOfBirth</td>
            </tr>
            <tr>
              <td>y</td>
              <td>Nummer der aktuellen Seite</td>
              <td>nicht aussagekräftig</td>
              <td>aktSeiteNr, currentPageNr</td>
            </tr>
            <tr>
              <td>d</td>
              <td>Dateiname</td>
              <td>nicht aussagekräftig</td>
              <td><strong>fileName</strong>, filename</td>
            </tr>
            <tr>
              <td>faqUeberschrift</td>
              <td>Überschrift der Liste häufig gestellter Fragen</td>
              <td>-</td>
              <td>faqTitel, faqUeberschrift, faqTitle, <strong>faqHeadline</strong>, FAQHeadline</td>
            </tr>
            <tr>
              <td>menHoeh</td>
              <td>Höhe eines Menüs</td>
              <td>keine gängigen Abkürzung</td>
              <td>menuHeight, navHeight</td>
            </tr>
            <tr>
              <td>strName</td>
              <td>Straßenname</td>
              <td>-</td>
              <td>strName, streetName</td>
            </tr>
            <tr>
              <td>wanf</td>
              <td>Wandfarbe</td>
              <td>keine gängigen Abkürzung</td>
              <td>wandFarbe, wallColor</td>
            </tr>
            <tr>
              <td>PoStLeiTZaHl</td>
              <td>Postleitzahl</td>
              <td>falsche Groß- und Kleinschreibweise</td>
              <td>plz, postcode, <strong>zipCode</strong>, postalCode</td>
            </tr>
            <tr>
              <td>PLZ</td>
              <td>Postleitzahl</td>
              <td>-</td>
              <td>plz, postcode, <strong>zipCode</strong>, postalCode</td>
            </tr>
            <tr>
              <td>plz</td>
              <td>Postleitzahl</td>
              <td>-</td>
              <td>plz, postcode, <strong>zipCode</strong>, postalCode</td>
            </tr>
            <tr>
              <td>2.frage</td>
              <td>Die 2. Frage</td>
              <td>Syntaxfehler</td>
              <td>frageZwei, frage2, question2, <strong>questionTwo</strong></td>
            </tr>
            <tr>
              <td>anzahl?</td>
              <td>Die vom Benutzer eingegebene Anzahl von Produktexemplaren, die er kaufen möchte.</td>
              <td>Syntaxfehler</td>
              <td>anzProduktExemplar, anzahlProdukt, productAmount</td>
            </tr>
            <tr>
              <td>wichtige Meldung!</td>
              <td>Die Variable enthält den Text einer wichtigen Systemmeldung.</td>
              <td>Syntaxfehler</td>
              <td>wichtigeMeldung, importantMessage, systemMsg, alertMessage</td>
            </tr>
            <tr>
              <td>pi</td>
              <td>Die Zahl π (3.14…)</td>
              <td>Konfigurationsvariable</td>
              <td>PI, Math.PI</td>
            </tr>
          </tbody>
        </table>
      </div>
    </main>
    <script>
      'use strict';
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u11_rechnen-in-strings.html
+++ b/01_grundlagen/uebungen/u11_rechnen-in-strings.html
@@ -0,0 +1,49 @@
 <!DOCTYPE html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 11: Rechnen mit Strings?</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">
        <h2>Übung 11: Rechnen mit Strings?</h2>
        <table class="table table-striped">
          <thead class="table-dark">
            <tr>
              <td>Ausdruck</td>
              <td>Rückgabewert</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>'Hallo' + 'Welt'</td>
              <td>HalloWelt</td>
            </tr>
            <tr>
              <td>'Hallo' + ' Welt'</td>
              <td>Hallo Welt</td>
            </tr>
            <tr>
              <td>'1' + '1'</td>
              <td>11</td>
            </tr>
            <tr>
              <td>1 + 1</td>
              <td>2</td>
            </tr>
            <tr>
              <td>'1 + 1'</td>
              <td>1 + 1</td>
            </tr>
          </tbody>
        </table>
      </div>
    </main>
    <script>
      'use strict';
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u12_prompt-lieblingsessen.html
+++ b/01_grundlagen/uebungen/u12_prompt-lieblingsessen.html
@@ -0,0 +1,61 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 12: Mit prompt das Lieblingsessen erfragen</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 my-3">
          <h1>Übung 12: Mit prompt das Lieblingsessen erfragen</h1>
          <ol>
            <li>
              Fragen Sie den Benutzer nach seinem Lieblingsessen und seinem Lieblingsgetränk und speichern Sie beides in
              passend benannte Variablen.
            </li>
            <li>
              Verwenden Sie beide Variablen in einem Satz, den Sie über die Konsole ausgeben. Verketten Sie dabei die
              Variablen mithilfe des Verkettungsoperators mit den restlichen Satzteilen .
            </li>
            <li>
              Führen Sie die letzte Übung noch einmal durch, aber verwenden Sie dieses Mal Template String
              Substitutions.
            </li>
            <li>
              Wenn Sie ganz fleißig sind, können Sie als dritte Variante noch austesten, wie sich beide Varianten in der
              gleichen Ausgabe verwenden lassen.
            </li>
          </ol>
        </div>
        <div class="alert alert-success my-3 output-a"></div>
        <div class="alert alert-danger my-3 output-b"></div>
        <div class="alert alert-warning my-3 output-c"></div>
      </div>
    </main>
    <script>
      'use strict';
      const outputAEl = document.querySelector('.output-a');
      const outputBEl = document.querySelector('.output-b');
      const outputCEl = document.querySelector('.output-c');
      const favoriteFood = prompt('Dein Lieblingsessen ist..?');
      const favoriteDrink = prompt('Dein favorisiertes Getränk ist..?');
      outputAEl.textContent =
        'Mein Lieblingsessen ist ' + favoriteFood + ' und mein Lieblingsgetränk ist ' + favoriteDrink + '!';
      // EMPFEHLUNG
      outputBEl.textContent = `Mein Lieblingsessen ist ${favoriteFood} und mein Lieblingsgetränk ist ${favoriteDrink}!`;
      // ========
      outputCEl.textContent =
        'Mein Lieblingsessen ist ' + favoriteFood + ` und mein Lieblingsgetränk ist ${favoriteDrink}!`;
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u13_fehler-im-detail.html
+++ b/01_grundlagen/uebungen/u13_fehler-im-detail.html
@@ -0,0 +1,57 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 13: Fehler im Detail</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 my-3">
          <h2>Übung 13: Fehler im Detail</h2>
          <p>Im folgenden Code haben sich einige Fehler und auch Regelwidrigkeiten eingeschlichen.</p>
        </div>
        <div class="output alert alert-secondary my-3"></div>
      </div>
    </main>
    <script>
      'use strict';
      const outputEl = document.querySelector('.output');
      let tale = `Three hicks were working on a telephone tower - Steve, Bruce and Jed. 
 Steve falls off and is killed instantly.
 As the ambulance takes the body away, Bruce says, 'Someone should go and tell his wife.'
 Jed says, 'OK, I'm pretty good at that sensitive stuff, I'll do it.'
 Two hours later, he comes back carrying a case of beer.
 Bruce says, 'Where did you get that, Jed?'
 'Steve's wife gave it to me,' Jed replies.
 'That's unbelievable, you told the lady her husband was dead and she gave you beer?'
 Well, not exactly', Jed says. 'When she answered the door, I said to her, "You must be Steve's widow".'
 She said, 'No, I'm not a widow!'
 And I said, 'I'll bet you a case of Budweiser you are.`;
      const tale2 =
        "Three hicks were working on a telephone tower - Steve, Bruce and Jed.\nSteve falls off and is killed instantly.\nAs the ambulance takes the body away, Bruce says, 'Someone should go and tell his wife.'Jed says, 'OK, I'm pretty good at that sensitive stuff, I'll do it.\n'Two hours later, he comes back carrying a case of beer.\nBruce says, 'Where did you get that, Jed?'\n'Steve's wife gave it to me,' Jed replies.\n'That's unbelievable, you told the lady her husband was dead and she gave you beer?'Well, not exactly', Jed says. 'When she answered the door, I said to her, \"You must be Steve's widow\".'She said, 'No, I'm not a widow!'And I said, 'I'll bet you a case of Budweiser you are.";
      console.log(tale);
      console.log(tale2);
      outputEl.innerHTML = tale.replaceAll('\n', '<br/>');
      outputEl.innerHTML = `<p>${tale2.replaceAll('\n', '</p><p>')}</p>`;
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u14_rechnen-ausdruecke.html
+++ b/01_grundlagen/uebungen/u14_rechnen-ausdruecke.html
@@ -0,0 +1,102 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 14: Also, was sind das denn nur für Ausdrücke?</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>Übung 14: Also, was sind das denn nur für Ausdrücke?</h1>
        <!--  Übung 14 -->
        <table class="table table-striped my-5">
          <thead class="table-dark">
            <tr>
              <th>Ausdruck</th>
              <th>Rückgabewert</th>
              <th>Datentyp</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>'1.5' * 2</td>
              <td>3</td>
              <td>number</td>
            </tr>
            <tr>
              <td>'1,5' * 2</td>
              <td>NaN</td>
              <td>number</td>
            </tr>
            <tr>
              <td>'1.5' + 2</td>
              <td>'1.52'</td>
              <td>string</td>
            </tr>
            <tr>
              <td>Number('1.5') * 2</td>
              <td>3</td>
              <td>number</td>
            </tr>
            <tr>
              <td>Number('1,5') * 2</td>
              <td>NaN</td>
              <td>number</td>
            </tr>
            <tr>
              <td>Number('3 Tage') * 7</td>
              <td>NaN</td>
              <td>number</td>
            </tr>
            <tr>
              <td>Number('Seite 20') + 5</td>
              <td>NaN</td>
              <td>number</td>
            </tr>
            <tr>
              <td>'9,2' + Number('11.7')</td>
              <td>'9,211.7'</td>
              <td>string</td>
            </tr>
            <tr>
              <td>(NaN - 2) * (4 / 2)</td>
              <td>NaN</td>
              <td>number</td>
            </tr>
            <tr>
              <td>alert(Number(17 / 2 + 1.3))</td>
              <td>undefined</td>
              <td>'undefined'</td>
            </tr>
            <tr>
              <td>console.log(Number(17 / 2 + 1.3))</td>
              <td>undefined</td>
              <td>'undefined'</td>
            </tr>
            <tr>
              <td>typeof 12.25</td>
              <td>'number'</td>
              <td>string</td>
            </tr>
            <tr>
              <td>typeof typeof 12.25</td>
              <td>'string'</td>
              <td>string</td>
            </tr>
          </tbody>
        </table>
      </div>
    </main>
    <script>
      'use strict';
      // const result = alert('hello');
      // const result2 = console.log('Ergebnis: ', result);
      // console.log(result, result2);
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u15-u17_reichweite-verbrauch.html
+++ b/01_grundlagen/uebungen/u15-u17_reichweite-verbrauch.html
@@ -0,0 +1,63 @@
 <!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.2.2/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>
        <div class="output-a alert alert-secondary"></div>
        <div class="output-b alert alert-secondary"></div>
      </div>
    </main>
    <script>
      'use strict';
      //const tankGroesse = console.prompt('Wie groß ist Ihr Tank in liter?');
      const outputAEl = document.querySelector('.output-a');
      const outputBEl = document.querySelector('.output-b');
      const streckeKm = Number(prompt('gefahrene Stecke in km'));
      const benzinL = Number(prompt('Benzinverbrauch in l'));
      const tankGroesse = Number(prompt('Tankgröße in l'));
      const verbrauchkm = (benzinL / streckeKm) * 100;
      ////////////////
      const maxReichweite = (tankGroesse * streckeKm) / benzinL;
      outputAEl.textContent = `${verbrauchkm.toFixed(1)} l/100km.`;
      outputBEl.textContent = `Die maximale Reichweite beträgt ${Math.round(maxReichweite)}km`;
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u16_rest-sekunden-2.html
+++ b/01_grundlagen/uebungen/u16_rest-sekunden-2.html
@@ -0,0 +1,43 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 16: Sekunden, Teil 2</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" />
  </head>
  <body>
    <main>
      <div class="container py-5">
        <div class="alert alert-primary">
          <h2>Übung 16: Sekunden, Teil 2</h2>
          Gib die Ergebnisse des Zeitrechners (Übung 3) abgerundet (ohne Nachkommastellen) in folgender Form aus:
          <strong>mm:ss</strong>
        </div>
        <div class="output alert alert-secondary"></div>
      </div>
    </main>
    <script>
      'use strict';
      const outputEl = document.querySelector('.output');
      // Wie viele Minuten und Restsekunden haben 2000 Sekunden? Verwende console.log für die Ausgabe.
      const minuten = 60;
      const gesamtSekunden = 2000;
      const sekProMinute = Math.round(gesamtSekunden / minuten);
      const restsekunden = Math.round(gesamtSekunden % 60);
      console.log(sekProMinute);
      console.log(restsekunden);
      const text = `2000 Sekunden sind ${sekProMinute} Minuten und ${restsekunden} Sekunden. ${sekProMinute}:${restsekunden} (mm:ss)`;
      console.log(text);
      outputEl.textContent = text;
      outputEl.innerHTML = text.replaceAll('\n', '');
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u18_lottozahl.html
+++ b/01_grundlagen/uebungen/u18_lottozahl.html
@@ -0,0 +1,68 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 18: Lotto oder der »49-Seiten Würfel«</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet" />
    <style>
      *,
      html {
        box-sizing: border-box;
      }
      .output {
        overflow: hidden;
      }
      .lotto-ball {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 2px solid #f8f8f8;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #f2f2f2;
        background: radial-gradient(circle, rgba(242, 242, 242, 1) 0%, rgba(130, 130, 130, 1) 93%);
        box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
      }
      .lotto-number {
        font-weight: bolder;
      }
    </style>
  </head>
  <body>
    <main>
      <div class="container py-5">
        <div class="alert alert-primary">
          <h2>Übung 18: Lotto oder der »49-Seiten Würfel«</h2>
          <p>
            Für Zufallszahlen von eins bis sechs ist ein Würfel wirklich praktisch — und sinnvoll. Für alle anderen
            Fälle ist ein Zufallsgenerator natürlich unumgänglich und Pflichtprogramm. Zum Beispiel, wenn du Hilfe für
            deine nächsten Lottozahlen benötigst …
          </p>
          <p>
            Schreibe ein Programm, das genau eine Zufallszahl zwischen 1 und 49 ausgibt. Die Grenzwerte 1 und 49 sollen
            dabei inklusive sein und Nachkommastellen sind nicht erwünscht.
          </p>
        </div>
        <div class="output alert alert-secondary my-3">
          <div class="lotto-ball"><span class="lotto-number">00</span></div>
        </div>
      </div>
    </main>
    <script>
      'use strict';
      const outputEl = document.querySelector('.output');
      const lottoNumberEl = document.querySelector('.lotto-number');
      // Lottozahl ermitteln (von 1-49)
      const lottoNumber = Math.floor(Math.random() * 49) + 1;
      lottoNumberEl.textContent = lottoNumber;
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u19-20-22-darkside-quiz.html
+++ b/01_grundlagen/uebungen/u19-20-22-darkside-quiz.html
@@ -0,0 +1,88 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 22: Die dunkle Seite schlägt zurück …</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 my-5">
          <h2>Übung 22: Die dunkle Seite schlägt zurück …</h2>
          <p>
            Endlich setzt du deinen Kampf gegen die dunkle Seite von JS fort (siehe Übung 20) und erstellst zwei neue
            »Kampf-Sequenzen«:
          </p>
          <p>»What's the German word for if« (Mehrere Lösungsmöglichkeiten: wenn, falls).</p>
          <p>»Now, please enter a string with a length between 8 and 15 characters …«</p>
        </div>
        <div class="alert alert-primary">
          <h2>Übung 23: Die dunkle Seite schlägt zurück…</h2>
          <p>
            Endlich setzen Sie Ihren Kampf gegen die dunkle Seite von JS fort (siehe Übung 20) und erstellen zwei neue
            »Kampf-Sequenzen«:
          </p>
          <ul class="list">
            <li>»What's the German word for if« (Mehrere Lösungsmöglichkeiten: wenn, falls).</li>
            <li>»Now, please enter a string with a length between 8 and 15 characters…«</li>
          </ul>
        </div>
      </div>
    </main>
    <script>
      'use strict';
      const QUESTION_1 = 'Welcher Operator hat eine höhere Priorität: * oder + ?';
      const SOLUTION_1 = '*';
      const QUESTION_2 = 'Was ist das deutsche Wort für if?';
      const SOLUTION_2_1 = 'wenn';
      const SOLUTION_2_2 = 'falls';
      const QUESTION_3 = 'Geben Sie bitte einen String mit einer Länge von 8 bis 15 Zeichen ein';
      const SOLUTION_3_1 = 8;
      const SOLUTION_3_2 = 15;
      const outputEl = document.querySelector('.output');
      const username = prompt('Bitte geben Sie ihren Vornamen ein: ');
      alert(`Willkommen beim Spiel, die dunkle Seite von JS, ${username}!`);
      const playerFitness = prompt(
        `${username}, fühlen Sie sich bereit gegen die dunkle Seite von JS anzutreten? Bitte antworten Sie mit ja oder nein (y/n)`,
      )
        .trim()
        .toLowerCase();
      if (playerFitness === 'ja' || playerFitness === 'y') {
        alert('Okay, mögen die Spiele beginnen');
        const answer1 = prompt(QUESTION_1).trim().toLowerCase();
        if (answer1 === SOLUTION_1) {
          alert(`Richtige Antwort, ${username}! Die helle Seite ist stark in dir!`);
        } else {
          alert(`${username}, leider lagst du falsch. Die dunkle Seite von JS hat gewonnen!`);
        }
        const answer2 = prompt(QUESTION_2).trim().toLowerCase();
        if (answer2 === SOLUTION_2_1 || answer2 === SOLUTION_2_2) {
          alert(`Richtige Antwort, ${username}! Die helle Seite ist weiterhin stark in dir!`);
        } else {
          alert(`${username}, leider lagst du falsch. Die dunkle Seite wächst in dir!`);
        }
        const answer3 = Number(prompt(`${username}! ${QUESTION_3}`));
        if (answer3.length >= SOLUTION_3_1 && answer3.length <= SOLUTION_3_2) {
          alert(`Richtige Antwort, ${username}! Die helle Seite ist stark in dir!`);
        } else {
          alert(`${username}, leider lagst du falsch. Die dunkle Seite ist stark in dir!`);
        }
      } else {
        alert(`${username}, die dunkle Seite ist stark in dir!`);
      }
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u19-u20-quiz-1.html
+++ b/01_grundlagen/uebungen/u19-u20-quiz-1.html
@@ -0,0 +1,106 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 19 und 20: Die dunkle Seite von JavaScript</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">
          <h2>Übung 19: Die dunkle Seite von JavaScript</h2>
          <p>
            Programmieren Sie nun Stück für Stück ein kleines Quiz, in dem ein Spieler Fragen zu JS beantworten muss und
            damit gegen Fehler und schlechten Code — also die dunkle Seite von JS — antritt. Möge der Source mit Ihnen
            sein.
          </p>
          <ol class="list">
            <li>
              <p>
                Als ersten Schritt fragen Sie den Spieler nach seinem Namen, speichern diesen in eine Variable und
                begrüßen ihn mittels einer Alert-Box. Ergänzen Sie den folgenden Code:
              </p>
              <pre>
  <code> 'use strict'; let username = … alert(…); </code></pre>
            </li>
            <li>
              <p>
                Stellen Sie dem Spieler die Frage, ob er sich fit genug fühlt, um gegen das dunkle JavaScript
                anzutreten. Es ist sinnvoll, bei der Frage die Antwortmöglichkeiten anzugeben. Die Antwort speichern Sie
                in einer neuen Variable und erstellen als Nächstes eine
                <code>if</code>-Verzweigung. Der Rumpf des <code>if</code> soll nur ausgewertet werden, wenn der Spieler
                bestätigt, dass er sich stark genug fühlt, das Spiel zu beginnen. In den Rumpf schreiben wir ein
                <code>alert</code>, das den Spielstart bestätigt und den Spieler anfeuert.
              </p>
              <p>
                Für den Fall, dass der Spieler zu feige ist und einen mangelnden Fitness-Grad angegeben hat, schreiben
                Sie eine weitere
                <code>if</code>-Verzweigung, die den Fall abfängt und den Spieler mit Schimpf und Schande verabschiedet.
                Natürlich dürfen Sie auch freundlich bleiben — ganz wie Sie mögen.
              </p>
              <blockquote>
                <strong>Tipp:</strong> Schon während Sie das Programm entwickeln, sollten Sie es immer wieder testen.
                Führen Sie nach jeder Änderung das Programm erneut aus!
              </blockquote>
            </li>
            <li>
              <p>
                Nun kann es losgehen. Stellen Sie den Spieler vor seine erste Aufgabe. Deklarieren Sie nach dem alert
                eine neue Variable, in der Sie die Antwort des Spielers zu folgender Frage speichern:<br />
                <code>»Which Operator has the higher priority: * or + ?«</code>
              </p>
              <p>
                Um auf die Antwort reagieren zu können, schreiben Sie eine weitere
                <code>if</code>-Verzweigung, deren Rumpf nur ausgewertet wird, wenn die Antwort stimmt.
              </p>
              <p>
                <code>alert</code> gratuliert hier zur korrekten Antwort. Wenn Sie mögen, können Sie noch weitere
                Verzweigungen mit Fragen einbauen.
              </p>
            </li>
            <li>
              <p>
                Fügen Sie ein weiteres <code>if</code> für die Variante ein, in der der Spieler eine falsche Antwort
                gibt.
              </p>
            </li>
          </ol>
        </div>
        <div class="alert alert-primary">
          <h2>Übung 20: Die dunkle Seite von JavaScript</h2>
          <p>
            Für Ihr Spiel ist else ebenfalls hilfreich. Zum Beispiel bei der Frage, ob der Spieler bereit zum Spielen
            ist. Statt hier ein zweites
            <code>if</code> einzubauen, können Sie <code>else</code> verwenden.
          </p>
          <p>Ersetzen Sie die <code>if</code>-Anweisungen an den richtigen Stellen durch ein <code>else</code>:</p>
        </div>
        <div class="alert alert-primary">
          <h2>Übung 23: Die dunkle Seite schlägt zurück…</h2>
          <p>
            Endlich setzen Sie Ihren Kampf gegen die dunkle Seite von JS fort (siehe Übung 20) und erstellen zwei neue
            »Kampf-Sequenzen«:
          </p>
          <ul class="list">
            <li>»What's the German word for if« (Mehrere Lösungsmöglichkeiten: wenn, falls).</li>
            <li>»Now, please enter a string with a length between 8 and 15 characters…«</li>
          </ul>
        </div>
      </div>
    </main>
    <script>
      'use strict';
      const QUESTION_1 = 'Which Operators has the higher priority: * or + ?';
      const SOLUTION_1 = '*';
      // 1.Als ersten Schritt fragen Sie den Spieler nach seinem Namen, speichern diesen in eine Variable und begrüßen ihn mittels einer Alert-Box.
      // 2.Stellen Sie dem Spieler die Frage, ob er sich fit genug fühlt, um gegen das dunkle JavaScript anzutreten. Es ist sinnvoll, bei der Frage die Antwortmöglichkeiten anzugeben.
      // 3.Nun kann es losgehen. Stellen Sie den Spieler vor seine erste Aufgabe.
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u21_schaltjahr.html
+++ b/01_grundlagen/uebungen/u21_schaltjahr.html
@@ -0,0 +1,44 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 21: Die Sache mit dem Schaltjahr</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">
          <h2>Übung 21: Die Sache mit dem Schaltjahr</h2>
          <p>
            Vielleicht gehören Sie zu den Menschen, die »die Sache mit dem Schaltjahr« spannend finden. Und falls Sie es
            nicht spannend finden, schreiben Sie einfach trotzdem ein Programm, das berechnet, ob es sich bei einem Jahr
            um ein Schaltjahr handelt.
          </p>
          <p>Fragen Sie den Anwender nach dem gewünschten Jahr und speichern Sie die Eingabe in einer Variable.</p>
          <p>
            Falls das betreffende Jahr ein Schaltjahr ist, soll die Konsole z.B. den Satz »0000 ist ein Schaltjahr!«
            ausgeben; ansonsten »0000 ist KEIN Schaltjahr« — mit dem eingegeben Jahr statt 0000.
          </p>
          <h4>Ein Jahr ist ein Schaltjahr, wenn das betreffende Jahr</h4>
          <ul>
            <li>ganzzahlig durch 400 teilbar ist.</li>
            <li>nicht ganzzahlig durch 100, aber ganzzahlig durch 4 teilbar ist.</li>
          </ul>
          <div class="alert alert-warning">
            Die Berechnung ist übrigens nicht zu 100 Prozent genau, aber für die nächsten 2000 Jahre passt es noch.
          </div>
          <div class="output alert alert-secondary my-3"></div>
        </div>
      </div>
    </main>
    <script>
      'use strict';
      const year = Number(prompt('please enter year:'));
      const outputEl = document.querySelector('.output');
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u22-if-else-quiz-2.html
+++ b/01_grundlagen/uebungen/u22-if-else-quiz-2.html
@@ -0,0 +1,43 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 22: Die dunkle Seite schlägt zurück …</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>Übung 22: Die dunkle Seite schlägt zurück …</h1>
        <p>
          Endlich setzt du deinen Kampf gegen die dunkle Seite von JS fort (siehe Übung 20) und erstellst zwei neue
          »Kampf-Sequenzen«:
        </p>
        <p>»What's the German word for if« (Mehrere Lösungsmöglichkeiten: wenn, falls).</p>
        <p>»Now, please enter a string with a length between 8 and 15 characters …«</p>
      </div>
      <div class="alert alert-primary">
        <h2>Übung 23: Die dunkle Seite schlägt zurück…</h2>
        <p>
          Endlich setzen Sie Ihren Kampf gegen die dunkle Seite von JS fort (siehe Übung 20) und erstellen zwei neue
          »Kampf-Sequenzen«:
        </p>
        <ul class="list">
          <li>»What's the German word for if« (Mehrere Lösungsmöglichkeiten: wenn, falls).</li>
          <li>»Now, please enter a string with a length between 8 and 15 characters…«</li>
        </ul>
      </div>
    </main>
    <script>
      'use strict';
      // const username = prompt('Wilkommen. Wie heißen Sie?');
      /* 
        TODO: Your Code
      */
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u23_validierung-prompt.html
+++ b/01_grundlagen/uebungen/u23_validierung-prompt.html
@@ -0,0 +1,63 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 23: Von guten und bösen Eingaben</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">
          <h2>Übung 23: Von guten und bösen Eingaben</h2>
          <ol class="list">
            <li>
              Nimm Angaben zu Vorname, Nachname, Alter und dem liebsten Heißgetränk eines Anwenders entgegen und
              speichere diese in Variablen.
            </li>
            <li>
              Diese Eingaben sollst du nun folgendermaßen validieren:
              <ul class="list">
                <li>Vorname und Nachname müssen zwischen 2 und 100 Zeichen lang sein.</li>
                <li>Das Alter muss eine Zahl unter 150 sein.</li>
                <li>Die Eingabe für das Getränk muss c (coffee) oder t (tea) sein.</li>
              </ul>
            </li>
          </ol>
        </div>
        <div class="output alert alert-secondary my-3"></div>
      </div>
    </main>
    <script>
      'use strict';
      const outputEl = document.querySelector('.output');
      // Aufgabe
      const firstName = prompt('Wilkommen. Wie heißen Sie mit Vornamen?');
      const lastName = prompt('Und mit Nachnamen??');
      const age = Number(prompt('Geben Sie ihr Alter an:'));
      const favoriteHotDrink = prompt('Und was ist ihr liebstes Heißgetränk??? (k (Kaffee) | t (Tee)').toLowerCase();
      let errorMsg = '';
      if (firstName.length < 2 || firstName.length > 100) {
        errorMsg += 'Der Vorname muss zwischen 2 und 100 Zeichen lang sein!\n';
      }
      if (lastName.length < 2 || lastName.length > 100) {
        errorMsg += 'Der Nachname muss zwischen 2 und 100 Zeichen lang sein!\n';
      }
      if (age >= 150 || age <= 0) {
        errorMsg += 'Das Alter muss unter 150 liegen und über 0 liegen\n';
      }
      if (favoriteHotDrink !== 'k' && favoriteHotDrink !== 't') {
        errorMsg += 'Bitte Kaffee mit k und Tee mit t eingeben!\n';
      }
      if (errorMsg === '') {
        outputEl.textContent = '<p>Alle Eingaben sind korrekt!</p>';
      } else {
        outputEl.innerHTML = errorMsg.replaceAll('\n', '<br />');
      }
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u24_leap-year-2.html
+++ b/01_grundlagen/uebungen/u24_leap-year-2.html
@@ -0,0 +1,76 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 24: Die Sache mit dem Schaltjahr — Teil 2</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">
          <h2>Übung 24: Die Sache mit dem Schaltjahr — Teil 2</h2>
          <p>
            Verschaffe deinem Schaltjahr-Tool aus Lektion 10 ein Facelifting. Mithilfe der logischen Operatoren kannst
            du einige <code>else</code> einsparen und den Code einfacher, kürzer und übersichtlicher gestalten.
          </p>
          <h4>Ein Jahr ist ein Schaltjahr, wenn das betreffende Jahr</h4>
          <ul>
            <li>ganzzahlig durch 400 teilbar ist.</li>
            <li>nicht ganzzahlig durch 100, aber ganzzahlig durch 4 teilbar ist.</li>
          </ul>
        </div>
        <div class="alert alert-warning">
          Die Berechnung ist übrigens nicht zu 100 Prozent genau, aber für die nächsten 2000 Jahre passt es noch.
        </div>
        <div class="mb-3">
          <label for="input-year" class="form-label">Jahr</label>
          <input
            type="number"
            min="0"
            step="1"
            name="year"
            class="form-control input-year"
            id="input-year"
            placeholder="insert year..." />
        </div>
        <div class="output alert alert-secondary my-3"></div>
      </div>
    </main>
    <script>
      'use strict';
      const inputEl = document.querySelector('.input-year');
      const outputEl = document.querySelector('.output');
      let isLeapYear = false;
      inputEl.addEventListener('input', (e) => {
        const year = e.currentTarget.value;
        if (isNaN(year) || year <= 0) {
          const errorMsg = 'Bitte geben Sie ein gültiges Jahr ein.';
          console.log(errorMsg);
          outputEl.textContent = errorMsg;
        } else {
          // wenn ganzzahlig durch 400 teilbar ist.
          // oder (nicht ganzzahlig durch 100, aber ganzzahlig durch 4 teilbar ist).
          if (year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0)) {
            isLeapYear = true;
          } else {
            isLeapYear = false;
          }
          // isLeapYear = year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0);
          const resultText = isLeapYear ? `${year} ist ein Schaltjahr!` : `${year} ist KEIN Schaltjahr`;
          console.log(resultText);
          outputEl.textContent = resultText;
        }
      });
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u25_suche-im-heuhaufen.html
+++ b/01_grundlagen/uebungen/u25_suche-im-heuhaufen.html
@@ -0,0 +1,49 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 25: Wenn sie doch endlich mal jemand finden könnte… die Nadel im Heuhaufen…</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
  </head>
  <body>
    <main>
      <div class="container py-5">
        <div class="alert alert-primary">
          <h1>Übung 25: Wenn sie doch endlich mal jemand finden könnte… die Nadel im Heuhaufen…</h1>
          <p>
            Die meisten Menschen verwenden die Redewendung nur symbolisch. Sie heute aber nicht, denn Sie erhalten von
            uns den Auftrag, die Nadel wirklich zu finden!
          </p>
          <img
            src="https://de.webmasters-europe.org/system/course_management/file/images/files/000/014/031/640-426/251d5925f63d895854646ece67dc3de4.jpg?1617534590"
            alt=""
            style="width: 300px"
            class="img-thumbnail" />
          <p>
            Natürlich wollen wir Sie nicht wirklich im Heu wühlen lassen. Stattdessen erhalten Sie von uns einen
            sauberen heulosen String. Das ist vermutlich auch angenehmer, falls Sie an Heuschnupfen leiden
          </p>
          <p>
            Finden Sie nun heraus, an welcher Position sich die Nadel befindet, und loggen Sie diese Position in die
            Konsole.
          </p>
          <blockquote class="blockquote">Übrigens: Zählen gilt nicht!</blockquote>
        </div>
        <div class="output alert alert-secondary"></div>
      </div>
    </main>
    <script>
      'use strict';
      const outputEl = document.querySelector('.output');
      const text =
        'Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen Nadel Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen';
      const position = text.indexOf('Nadel') + 1;
      console.log(position);
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u26_vornamen-auslesen.html
+++ b/01_grundlagen/uebungen/u26_vornamen-auslesen.html
@@ -0,0 +1,39 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 26: Wenn ein Vorname nicht reicht…</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 26: Wenn ein Vorname nicht reicht…</h1>
          <p>
            Vielleicht ist Ihnen aufgefallen, dass die Zerlegung nur richtig funktioniert, wenn der Name in der Form
            'Vorname Nachname' vorliegt.
          </p>
          <p>
            Sollte ein Nutzer einen zweiten Vornamen angeben, ordnet das Programm den zweiten Vorname dem Nachnamen zu.
            Sie würden für den Namen Ladislaus Coolio Jones fälschlicherweise Folgendes erhalten:
          </p>
          <p>Korrigieren Sie die Ausgabe des folgenden Codes mithilfe von lastIndexOf</p>
        </div>
      </div>
    </main>
    <script>
      'use strict';
      const name = '  Ladislaus Coolio Jones   '.trim();
      const spacePosition = name.lastIndexOf(' ');
      const firstNames = name.substring(0, spacePosition);
      const lastName = name.substring(spacePosition + 1);
      console.log('lastname: ', lastName);
      console.log('firstnames: ', firstNames);
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u27-zerlegter-heribert.html
+++ b/01_grundlagen/uebungen/u27-zerlegter-heribert.html
@@ -0,0 +1,37 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 27: Der zerlegte Heribert</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 my-3">
          <h1>Übung 27: Der zerlegte Heribert</h1>
          <ol>
            <li>Entfernen Sie die überflüssigen Leerzeichen.</li>
            <li>Zerlegen Sie den Namen in Vor- und Nachnamen.</li>
          </ol>
          <div class="alert alert-secondary my-3 output"></div>
        </div>
      </div>
    </main>
    <script>
      'use strict';
      const outputElement = document.querySelector('.output');
      const name = 'Heribert  Gold '.trim();
      const spacePosition = name.indexOf(' ');
      const firstName = name.substring(0, spacePosition);
      const lastName = name.substring(spacePosition + 1).trim();
      console.log(firstName);
      console.log(lastName);
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u28_transformierte-ladislaus.html
+++ b/01_grundlagen/uebungen/u28_transformierte-ladislaus.html
@@ -0,0 +1,42 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 28: Der transformierte Ladislaus</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 my-3">
          <h1>Übung 28: Der transformierte Ladislaus</h1>
          <p>Und weil es so viel Freude macht:</p>
          <p>
            Speichern Sie den Namen »Ladislaus Jones« in einer Variable und kreieren Sie eine Ausgabe nach dem Schema
            '<code>&lt;Nachname&gt;</code>, <code>&lt;Anfangsbuchstabe des Vornamens&gt;</code>.', also
            <code>'Jones, L.'</code>.
          </p>
        </div>
        <div class="alert alert-secondary output"></div>
      </div>
    </main>
    <script>
      'use strict';
      const outputEl = document.querySelector('.output');
      const name = 'Ladislaus Jones'.trim();
      const firstSpacePos = name.indexOf(' ');
      const lastSpacePos = name.lastIndexOf(' ');
      const firstName = name.substr(0, firstSpacePos);
      const secondName = name.substr(lastSpacePos);
      const firstNamefirstLetter = firstName.substr(0, 1).toUpperCase();
      outputEl.textContent = `${secondName}, ${firstNamefirstLetter}.`;
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u29_fuehrende-nullen.html
+++ b/01_grundlagen/uebungen/u29_fuehrende-nullen.html
@@ -0,0 +1,45 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 29: Führende Nullen, Teil 1</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 my-5">
          <h1>Übung 29: Führende Nullen, Teil 1</h1>
          <p>
            NerdWorld hat vor einiger Zeit sein Artikelnummer-Konzept geändert. Die neuen Artikelnummern beginnen stets
            mit einer 0 — z.B. 0123. Leider gibt es bei den alten Nummern viele, die nicht über eine führenden 0
            verfügen. Sie können aber auch nicht einfach pauschal eine 0 ergänzen, da manche der alten Nummern bereits
            mit einer 0 beginnen. In dem Fall soll keine weitere 0 vorangestellt werden. Ergänzen Sie das folgende
            Programmfragment, so dass es für jede Belegung der Variable itemNumber (Artikelnummer) die richtige Nummer
            im neuen Konzept ausgibt. Verwenden Sie dazu den ternären Operator!
          </p>
          <ul class="list">
            <li>123 =&gt; 0123</li>
            <li>7 =&gt; 07</li>
            <li>07 =&gt; 07</li>
            <li>007 =&gt; 007</li>
          </ul>
        </div>
        <div class="output alert alert-secondary my-3"></div>
      </div>
    </main>
    <script>
      'use strict';
      const outputEl = document.querySelector('.output');
      const itemNumber = '123';
      // const correctedItemNr = (itemNumber.charAt(0) !== '0' ? '0' : '') + itemNumber;
      const correctedItemNr = (itemNumber.startsWith('0') ? '' : '0') + itemNumber;
      outputEl.textContent = `ItemNr: ${itemNumber}, CorrectedItemNr: ${correctedItemNr}.`;
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u30_quiz-dark-side.html
+++ b/01_grundlagen/uebungen/u30_quiz-dark-side.html
@@ -0,0 +1,88 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 30: Die dunkle Seite von JavaScript — der Kampf geht weiter</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 30: Die dunkle Seite von JavaScript — der Kampf geht weiter</h1>
          <p>
            Es wird Zeit, das Spiel weiter zu optimieren. Nimm dir eine der Fragen vor, die schon implementiert ist:
          </p>
          <p>»Was heißt if auf Deutsch?« (Mehrere Lösungsmöglichkeiten: wenn, falls).</p>
          <p>
            Der Code deckt schon drei verschiedene Lösungsmöglichkeiten ab. Aber was ist, wenn jemand statt
            <code>wenn</code> <code>Wenn</code> oder <code>WENN</code> schreibt?
          </p>
          <p>
            Das Thema Groß- und Kleinschreibung wird dir bei Benutzereingaben öfter begegnen. Für das Spiel würde es zum
            Beispiel helfen, wenn der Spieler die Eingabe immer komplett kleinschreibt. Sicher ist der Spieler verwirrt,
            wenn das Spiel seine Antwort Wenn als falsch quittiert.
          </p>
          <p>
            Optimiere die betreffende Stelle im Spiel, indem du die Benutzereingabe in Kleinbuchstaben umwandelst — vor
            Prüfung der if-Bedingung.
          </p>
        </div>
      </div>
    </main>
    <script>
      'use strict';
      const QUESTION_1 = 'Welcher Operator hat eine höhere Priorität: * oder + ?';
      const SOLUTION_1 = '*';
      const QUESTION_2 = 'Was ist das deutsche Wort für if?';
      const SOLUTION_2_1 = 'wenn';
      const SOLUTION_2_2 = 'falls';
      const QUESTION_3 = 'Geben Sie bitte einen String mit einer Länge von 8 bis 15 Zeichen ein';
      const SOLUTION_3_1 = 8;
      const SOLUTION_3_2 = 15;
      const outputEl = document.querySelector('.output');
      const username = prompt('Bitte geben Sie ihren Vornamen ein: ');
      alert(`Willkommen beim Spiel, die dunkle Seite von JS, ${username}!`);
      const playerFitness = prompt(
        `${username}, fühlen Sie sich bereit gegen die dunkle Seite von JS anzutreten? Bitte antworten Sie mit ja oder nein (y/n)`,
      )
        .trim()
        .toLowerCase();
      if (playerFitness === 'ja' || playerFitness === 'y') {
        alert('Okay, mögen die Spiele beginnen');
        const answer1 = prompt(QUESTION_1).trim().toLowerCase();
        if (answer1 === SOLUTION_1) {
          alert(`Richtige Antwort, ${username}! Die helle Seite ist stark in dir!`);
        } else {
          alert(`${username}, leider lagst du falsch. Die dunkle Seite von JS hat gewonnen!`);
        }
        const answer2 = prompt(QUESTION_2).trim().toLowerCase();
        if (answer2 === SOLUTION_2_1 || answer2 === SOLUTION_2_2) {
          alert(`Richtige Antwort, ${username}! Die helle Seite ist weiterhin stark in dir!`);
        } else {
          alert(`${username}, leider lagst du falsch. Die dunkle Seite wächst in dir!`);
        }
        const answer3 = Number(prompt(`${username}! ${QUESTION_3}`));
        if (answer3.length >= SOLUTION_3_1 && answer3.length <= SOLUTION_3_2) {
          alert(`Richtige Antwort, ${username}! Die helle Seite ist stark in dir!`);
        } else {
          alert(`${username}, leider lagst du falsch. Die dunkle Seite ist stark in dir!`);
        }
      } else {
        alert(`${username}, die dunkle Seite ist stark in dir!`);
      }
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u31_function-console.html
+++ b/01_grundlagen/uebungen/u31_function-console.html
@@ -0,0 +1,40 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 31: In die Konsole geloggt, Teil 2</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>Übung 31: In die Konsole geloggt, Teil 2</h1>
        <p>Schreiben Sie eine Funktion, die Ihren Namen in der Konsole ausgibt.</p>
        <div class="output alert alert-secondary my-3"></div>
      </div>
    </main>
    <script>
      'use strict';
      const outputEl = document.querySelector('.output');
      const outputName = (name) => {
        console.log(name);
        alert(name);
      };
      outputName('Max Power');
      // =====
      const getName = (name) => {
        return name[0].toUpperCase() + name.substring(1).toLowerCase();
      };
      console.log(getName('philippe'));
      alert(getName('adel'));
      outputEl.textContent = getName('KaHlEeL');
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u32-tranformed-ladislaus.html
+++ b/01_grundlagen/uebungen/u32-tranformed-ladislaus.html
@@ -0,0 +1,39 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 32: Der transformierte Ladislaus, Teil 2</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 32: Der transformierte Ladislaus, Teil 2</h1>
          <p>
            Schreiben Sie eine Funktion <code>logTransformedName</code>, die Vor- und Nachname als Parameter
            entgegennimmt und einen String der Form
          </p>
          <p>
            <code>&lt;Nachname&gt;, &lt;Anfangsbuchstabe des Vornamens&gt;.</code>
          </p>
          <p>ausgibt.</p>
        </div>
      </div>
    </main>
    <script>
      'use strict';
      const logTransformedName = (firstName, secondName) => {
        const tName = `${secondName.charAt(0).toUpperCase() + secondName.substr(1).toLowerCase()}, ${firstName.charAt(0).toUpperCase()}.`;
        console.log(tName);
      };
      logTransformedName('Max', 'Power');
      logTransformedName('adEL', 'jabaRkHel');
      logTransformedName('kAHlEel', 'johNson');
      logTransformedName('andreAs', 'rohLedEr');
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u33_newsletter.html
+++ b/01_grundlagen/uebungen/u33_newsletter.html
@@ -0,0 +1,136 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 33: Hello, dear ${recipient}</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">
          <h2>Übung 33: Hello, dear ${recipient}</h2>
          <ol>
            <li>
              <p>
                Stell dir vor, du arbeitest für ein Unternehmen, das Veranstaltungen organisiert. Du sollst für diesen
                Auftraggeber Einladungen verschicken:
              </p>
              <code>
                <pre>
 Dear Heribert,
 Thank you for your registration.
 Event Details:
 - Event: Tech Conference
 - Date: July 24
 - Venue: Main Hall, Conference Center
 We look forward to seeing you at the event!
 Best regards,
 The Event Team
                </pre>
              </code>
              <p>
                Programmiere eine Funktion, die eine Einladung, simuliert durch eine Konsolenausgabe, für die Teilnehmer
                generiert. Dabei soll statt Heribert ein beliebiger Name verwendbar sein.
              </p>
              <p>Folgende Aufrufe erfolgen später aus der Datenbank:</p>
              <code>
                <pre>
 showInvitationFor('Heribert');
 showInvitationFor('Goldy');
 showInvitationFor('Ladislaus');
                </pre>
              </code>
            </li>
            <li>
              <p>
                Da unser Auftraggeber verschiedene Veranstaltungen zu verschiedenen Zeitpunkten organisiert, sollen im
                nächsten Schritt zwei weitere Parameter angegeben werden, in dem die Art der Veranstaltung, sowie ein
                Datum, jeweils als Text, übergeben wird.
              </p>
              <p>
                Einen zweiten Parameter kannst du bei der Funktionsdefinition innerhalb der Klammern durch Komma
                getrennt angeben.
              </p>
              <code>
                <pre>
 let showInvitationFor = (recipient, event, date) => {
  // ...
 }
                </pre>
              </code>
              <p>
                Es sind auch weitere Parameter möglich, aber hier benötigst du nur drei. Innerhalb des Rumpfes kannst du
                die neuen Parameter wie gewohnt wie eine Variable verwenden.
              </p>
              <p>Folgende Aufrufe erfolgen später aus der Datenbank:</p>
              <code>
                <pre>
 showInvitationFor('Heribert', 'Tech Conference', 'July 24');
 showInvitationFor('Goldy', 'Art Workshop', 'August 15');
 showInvitationFor('Ladislaus', 'Music Festival', 'September 10');
                </pre>
              </code>
            </li>
            <li>
              <p>
                Dein Auftraggeber bietet auch einen VIP-Status für Teilnehmer an. Fall ein Teilnehmer diesen Status
                gebucht hat, soll der einleitende Text der Einladung entsprechend angepasst werden:
              </p>
              <h3>Standard-Version</h3>
              <p><code>Thank you for your registration.</code></p>
              <h3>VIP-Version</h3>
              <p><code>You have registered as a VIP! Enjoy exclusive benefits and access to VIP areas.</code></p>
              <p>Folgende Aufrufe erfolgen später aus der Datenbank:</p>
              <code>
                <pre>
 showInvitationFor('Heribert', 'Tech Conference', 'July 24', true);
 showInvitationFor('Goldy', 'Art Workshop', 'August 15', false);
 showInvitationFor('Ladislaus', 'Music Festival', 'September 10', true);
                </pre>
              </code>
            </li>
          </ol>
        </div>
        <div class="output alert alert-secondary my-3"></div>
      </div>
    </main>
    <script>
      'use strict';
      const outputEl = document.querySelector('.output');
      const showInventationFor = (name, event, date, VIP) => {
        return `Dear ${name},
 ${VIP ? 'You have registered as a VIP! Enjoy exclusive benefits and access to VIP areas.' : 'Thank you for your registration.'}
 Event Details:
 - Event: ${event}
 - Date: ${date}
 - Venue: Main Hall, Conference Center
 We look forward to seeing you at the event!
 Best regards,
 The Event Team`;
      };
      console.log(showInventationFor('Heribert', 'Tech Conference', 'July 24', true));
      console.log('==============================');
      console.log(showInventationFor('Goldy', 'Art Workshop', 'August 15', false));
      console.log('==============================');
      showInventationFor('Ladislaus', 'Music Festival', 'September 10', true);
      console.log(console.log('=============================='));
      outputEl.innerHTML = showInventationFor('Andreas', 'JS Conference', 'June 24', true).replaceAll('\n', '<br />');
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u34-tranformed-ladislaus.html
+++ b/01_grundlagen/uebungen/u34-tranformed-ladislaus.html
@@ -0,0 +1,92 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 34: Der transformierte Ladislaus, 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 34: Der transformierte Ladislaus, Teil 3</h1>
          <p>
            Schreiben Sie eine Funktion <code>transformName</code>, die Vor- und Nachname als Parameter entgegennimmt
            und einen String der Form
          </p>
          <p>
            <code>&lt;Nachname&gt;, &lt;Anfangsbuchstabe des Vornamens&gt;.</code>
          </p>
        </div>
        <h3 class="mt-3">Formular:</h3>
        <form class="form-transform">
          <div class="row">
            <div class="col-12 col-sm-6">
              <div class="mb-3">
                <label class="form-label" for="input-firstname">Vorname:</label>
                <input
                  type="text"
                  class="form-control"
                  name="firstname"
                  id="input-firstname"
                  placeholder="Vorname eingeben..." />
              </div>
            </div>
            <div class="col-12 col-sm-6">
              <div class="mb-3">
                <label class="form-label" for="input-lastname">Nachname:</label>
                <input
                  type="text"
                  class="form-control"
                  name="lastname"
                  id="input-lastname"
                  placeholder="Nachname eingeben..." />
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="mb-3">
                <!-- <input type="submit" value="Transform name" class="btn btn-dark input-transform" /> -->
                <button type="submit" class="btn btn-dark button-transform button">Transform name</button>
                <button type="reset" class="btn btn-danger button-transform button">resetted</button>
              </div>
            </div>
          </div>
        </form>
        <h3 class="mt-3">Transformierter Name:</h3>
        <div class="output alert alert-secondary"></div>
      </div>
    </main>
    <script>
      'use strict';
      const formTransformEl = document.querySelector('.form-transform');
      const outputEl = document.querySelector('.output');
      const inputFirstnameEl = document.querySelector('input[name="firstname"]');
      const inputLastnameEl = document.querySelector('input[name="lastname"]');
      // Funktionsdefinition
      const transformName = (firstName, secondName) => {
        const tName = `${secondName.charAt(0).toUpperCase() + secondName.substr(1).toLowerCase()}, ${firstName.charAt(0).toUpperCase()}.`;
        return tName;
      };
      formTransformEl.addEventListener('submit', (e) => {
        e.preventDefault();
        const name = transformName(inputFirstnameEl.value, inputLastnameEl.value);
        outputEl.textContent = name;
      });
      // =====
      console.log(transformName('Max', 'Mustermann')); //=> 'Mustermann, M.'
      console.log(transformName('Max', 'Power'));
      console.log(transformName('adEL', 'jabaRkHel'));
      console.log(transformName('kAHlEel', 'johNson'));
      console.log(transformName('andreAs', 'rohLedEr'));
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u35_reichweite-verbrauch-1.html
+++ b/01_grundlagen/uebungen/u35_reichweite-verbrauch-1.html
@@ -0,0 +1,98 @@
 <!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 =========================
      const berechneBenzinVerbrauch = (benzinMenge, strecke) => {
        const verbrauch = (benzinMenge / strecke) * 100;
        return Number(verbrauch.toFixed(1));
      };
      // EventHandler =======
      const onSubmit = (e) => {
        e.preventDefault();
        console.log(berechneBenzinVerbrauch(benzinMengeEl.value, streckeEl.value));
        outputAEl.textContent = berechneBenzinVerbrauch(benzinMengeEl.value, streckeEl.value);
      };
      formCalculatorEl.addEventListener('submit', onSubmit); // onSumbit = funktionsreferenz
      // berechneBenzinVerbrauch(benzinMenge, strecke);
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u35_reichweite-verbrauch-2.html
+++ b/01_grundlagen/uebungen/u35_reichweite-verbrauch-2.html
@@ -0,0 +1,112 @@
 <!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 =========
      const askFuelConsumption = () => {
        return benzinMengeEl.value;
      };
      //
      const askDistance = () => {
        return streckeEl.value;
      };
      const askTankSize = () => {
        return tankGroesseEL.value;
      };
      const calcConsumptionKm = (fuelConsumption, distance) => (fuelConsumption / distance) * 100;
      const calcMaxDistance = (tankSize, distance, fuelConsumption) => (tankSize * distance) / fuelConsumption;
      // EventHandler =======
      const onSubmit = (e) => {
        e.preventDefault();
        const fuelConsumption = askFuelConsumption();
        const distance = askDistance();
        const tankSize = askTankSize();
        const resultConsumption = calcConsumptionKm(fuelConsumption, distance);
        const resultDistance = calcMaxDistance(tankSize, distance, fuelConsumption);
        outputAEl.textContent = `Ihr Verbrauch liegt bei ${resultConsumption.toFixed(2)} l/100km`;
        outputBEl.textContent = `Die maximale Reichweite beträgt ${Math.round(resultDistance)}km`;
      };
      formCalculatorEl.addEventListener('submit', onSubmit); // onSumbit = funktionsreferenz
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u36_kekse-array.html
+++ b/01_grundlagen/uebungen/u36_kekse-array.html
@@ -0,0 +1,106 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 36: Kekse backen mit Arrays</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">
          <h2>Übung 36: Kekse backen mit Arrays</h2>
          <img
            src="https://trainers.atp.wpicert.org/system/wpi_curriculum/file/images/files/000/006/526/800-534/53f6cb7feb9e9a7580d88ce5fa5a6d5c.jpg?1739200429"
            alt=""
            width="300"
            class="img-thumbnail" />
          <p>
            Du möchtest ein digitales Rezeptbuch schreiben. Die Zutaten für das jeweilige Rezept stellst du in einem
            Array zur Verfügung.
          </p>
          <ol>
            <li>
              Lege für das erste Rezept — Haferflocken-Kekse — ein Array mit den folgenden Zutaten an:
              <code>
                <pre>
 1/4 cup vegetable oil
 1 separated egg
 1/2 cup sugar
 1 tsp baking powder
                </pre>
              </code>
            </li>
            <li>Da in der Liste das Mehl fehlt, musst du 1 EL Mehl (1 tsp flour) noch nachträglich ergänzen.</li>
            <li>
              Beim Durchlesen der Liste fällt auf, dass die wohl wichtigste Zutat ebenfalls fehlt. Füge noch 100 g
              Haferflocken (1 cup rolled oats) an die erste Position in die Zutatenliste ein.
            </li>
            <li>
              Für Kekse ist es eigentlich besser, Butter statt Öl zu verwenden. Tausche das Öl in der Liste
              dementsprechend gegen 75 g Butter (1/3 cup butter) aus.
            </li>
            <li>
              Wandle das Array nun in einen String um und speichere diesen in einer Variablen. Dabei sollen die Zutaten
              als Liste ausgegeben werden.
            </li>
            <li>
              Und damit die Rezeptspielerei nicht total sinnlos war, bekommst du natürlich noch die Anleitung von uns
              dazu. Speichere auch diese in einer Variable und gib das komplette Rezept in der Konsole aus.
            </li>
          </ol>
          <p>Anleitung:</p>
          <blockquote>
            Melt the butter in a pan, add the rolled oats and mix everything well. Remove the mixture from heat and let
            it cool. Add the sugar to the egg white and beat until stiff. Mix in the yolk, baking powder and flour. Now
            mix in the cooled oat mixture. Shape small mounds of batter onto a baking sheet. These mounds should not be
            too large, since the batter will spread out a little as it is baked. Bake for 15 minutes at 350 °F in a
            pre-heated oven.
          </blockquote>
        </div>
        <div class="output alert alert-secondary my-3"></div>
      </div>
    </main>
    <script>
      'use strict';
      const outputEl = document.querySelector('.output');
      const introduction = `Melt the butter in a pan, add the rolled oats and mix everything well. Remove the mixture from heat and let it cool. Add the sugar to the egg white and beat until stiff. Mix in the yolk, baking powder and flour. Now mix in the cooled oat mixture. Shape small mounds of batter onto a baking sheet. These mounds should not be too large, since the batter will spread out a little as it is baked. Bake for 15 minutes at 350 °F in a pre-heated oven.`;
      const receipeAr = [
        '1/4 cup vegetable oil', //
        '1 separated egg',
        '1/2 cup sugar',
        '1 tsp baking powder',
      ];
      // 36.1
      receipeAr.push('1 tsp flour');
      // 36.2
      receipeAr.unshift('1 cup rolled oats');
      // 36.2
      receipeAr.splice(1, 1, '1/3 cup butter');
      receipeAr[1] = '1/3 cup butter';
      // 36.3
      const receipeStr = receipeAr.join('\n');
      console.log(`Oat-Cookie Receipe:\n\n${receipeStr}\n\n${introduction}`);
      outputEl.innerHTML = `<p>${introduction}</p>
      <h3>Oat-Cookie Receipe:</h3>
      <ol><li>${receipeAr.join('</li><li>')}</li></ol>`;
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u37-bus-stations.html
+++ b/01_grundlagen/uebungen/u37-bus-stations.html
@@ -0,0 +1,103 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 37: Die Kurzstreckenfahrt</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">
          <h2>Übung 37: Die Kurzstreckenfahrt</h2>
          <p>
            Nach dem Backen möchtest du ein bisschen Zug fahren. Du selbst befindest dich in New York in der Nähe der
            Haltestelle Astoria-Ditmars Blvd. Deine Freunde, die dich und deine Kekse schon freudig erwarten, wohnen bei
            der Haltestelle Queensboro Plaza. Da du aber nur ein Kurzstrecken-Ticket lösen möchtest, musst du den Rest
            der Strecke laufen. Deswegen benötigst du die Haltestellen-Liste (siehe Grafik) nur bis zur Haltestelle
            Broadway.
          </p>
          <p><strong>Hinweis:</strong> Für diese Übung bietet es sich an, mit `slice` und `indexOf` zu arbeiten.</p>
          <img
            src="https://trainers.atp.wpicert.org/system/wpi_curriculum/file/images/files/000/006/527/800-590/3b5ac28c38d961b21846b5adfe676dc1.png?1739200430"
            width="400"
            alt=""
            class="img-thumbnail" />
          <ol>
            <li>
              Erstelle ein Array mit den Haltestellen der Linie W:
              <code>
                <pre>
 'use strict';
 const LINE_W = [
  'Astoria-Ditmars Blvd',
  'Astoria Blvd',
  '30 Av',
  'Broadway',
  '36 Av',
  '39 Av',
  'Queensboro Plaza',
 ];
                </pre>
              </code>
            </li>
            <li>Finde die Position der gewünschten Zielhaltestelle Broadway heraus.</li>
            <li>Entferne alle Haltestellen nach Broadway aus dem Array.</li>
            <li>
              Schreibe eine Funktion, die dir nach Übergabe einer beliebigen Zielhaltestelle ein Array mit allen
              Haltestellen ab Astoria-Ditmars Blvd bis zur Zielhaltestelle zurückgibt.
            </li>
            <li>Erweitere die Funktion, sodass du auch die Starthaltestelle übergeben kannst.</li>
          </ol>
        </div>
        <div class="output alert alert-secondary my-3"></div>
      </div>
    </main>
    <script>
      'use strict';
      const outputEl = document.querySelector('.output');
      const LINE_W = [
        'Astoria-Ditmars Blvd',
        'Astoria Blvd',
        '30 Av',
        'Broadway',
        '36 Av',
        '39 Av',
        'Queensboro Plaza',
      ];
      // Finde die Position der gewünschten Zielhaltestelle Broadway heraus.
      console.log(LINE_W.indexOf('Broadway')); //=> 3
      // Entferne alle Haltestellen nach Broadway aus dem Array.
      const lineCopy = [...LINE_W];
      console.log(lineCopy.splice(lineCopy.indexOf('Broadway') + 1, lineCopy.length - lineCopy.indexOf('Broadway')));
      console.log(lineCopy);
      const calcStartStopPlan = (start, destination, withStart = false) => {
        const posStart = withStart ? LINE_W.indexOf(start) : LINE_W.indexOf(start) + 1;
        const posEnd = LINE_W.indexOf(destination);
        // Guard
        if (posStart === -1 || posEnd === -1) return [];
        return LINE_W.slice(posStart, posEnd + 1);
      };
      const schedule = calcStartStopPlan('Astoria-Ditmars Blvd', 'Broadway').join(' --- ');
      // const schedule = calcStartStopPlan('Astoria-Ditmars Blvd', 'Broadway', true).join(' --- ');
      outputEl.textContent = schedule;
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u38_alte-listen.html
+++ b/01_grundlagen/uebungen/u38_alte-listen.html
@@ -0,0 +1,46 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 38: Alte Listen</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">
          <h2>Übung 38: Alte Listen</h2>
          <p>
            NerdWorld stellt dir eine neue Aufgabe: Die Mitarbeiter haben Produkte früher in Excel-Listen verwaltet. Zu
            Migrationszwecken haben die Mitarbeiter sie nun als CSV-Dateien (comma separated values) exportiert. Damit
            sind dann alle Elemente in einer Liste durch Kommas getrennt.
          </p>
          <p>
            Schreibe eine Funktion handleCsv, die einen übergebenen CSV-String in ein Array splittet und alphabetisch
            sortiert. Logge das fertig verarbeitete Array als Liste (pro Produkt eine Zeile) in die Konsole.
          </p>
          <div class="output alert alert-secondary my-3"></div>
        </div>
      </div>
    </main>
    <script>
      'use strict';
      const outputEl = document.querySelector('.output');
      const productList =
        '3Doodler 3D Printing Pen, Game of Thrones Wax Seal Coasters, 10th Doctor Sonic Screwdriver Exclusive Programmable TV Remote, Electronic Butterfly in a Jar, Aquafarm: Aquaponics Fish Garden, Cassette Adapter Bluetooth, Marvel Comics Lightweight Infinity Scarf, Ollie - The App Controlled Robot, Sound Splash Bluetooth Waterproof Shower Speaker, PowerCube, Backpack of Holding, Retro Duo Portable NES/SNES Game System, Universal Gadget Wrist Charger, USB Squirming Tentacle, USB Fishquarium, Space Bar Keyboard Organizer & USB Hub Pop, USB Pet Rock, Powerstation 5- E. Maximus Chargus, Dual Heated Travel Mug, Crosley Collegiate Portable USB Turntable, Meh Hoodie, Magnetic Accelerator Cannon, 8-Bit Heat-Change Mug';
      const handleCsv = (csvStr) => {
        // return csvStr.split(',').sort();
        return csvStr.split(/\s*,\s*/).sort();
      };
      console.log(handleCsv(productList));
      outputEl.innerHTML = `<ul><li>${handleCsv(productList).join('</li><li>')}</li></ul>`;
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u39_sort-stadt-land-fluss.html
+++ b/01_grundlagen/uebungen/u39_sort-stadt-land-fluss.html
@@ -0,0 +1,66 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 39: Stadt, Land, Fluss</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>Übung 39: Stadt, Land, Fluss</h1>
        <p>
          Bei dem bekannten deutschen Quiz-Spiel »Stadt, Land, Fluss« müssen die Spieler zu bestimmten Kategorien Wörter
          finden, die mit einem bestimmten Buchstaben beginnen. Jeder schreibt die Wörter für sich alleine auf. Sobald
          einer der Spieler für jede Kategorie ein Wort gefunden hat, ruft er »Stop« und alle müssen das Aufschreiben
          einstellen. Dann wird verglichen. Mehrfach gefundene Wörter werden gestrichen, alle anderen erhalten je nach
          Spielregel und Variante Punkte.
        </p>
        <p>
          Bei einer Variante des Spiels ist zusätzlich die Wortlänge ausschlaggebend. Das längste Wort bringt dabei die
          meisten Punkte. Natürlich möchte niemand tatsächlich die Buchstaben der Wörter zählen. Dafür gibt es
          schließlich JS.
        </p>
        <p>
          Schreiben Sie eine Funktion, die Wörter einer Kategorie nach Länge sortiert. Das längste Wort soll dabei vorne
          stehen.
        </p>
        <div class="outputA alert alert-secondary"></div>
        <div class="outputB alert alert-secondary"></div>
        <div class="outputC alert alert-secondary"></div>
      </div>
    </main>
    <script>
      'use strict';
      // Variablen Ausgabe
      const outputElA = document.querySelector('.outputA');
      const outputElB = document.querySelector('.outputB');
      const outputElC = document.querySelector('.outputC');
      // Variablen
      const cities = ['Barcelona', 'Basel', 'Belgrade', 'Berlin', 'Budapest'];
      const countries = ['Belgium', 'Bulgaria', 'Brazil', 'Bolivia', 'Bosnia and Herzegovina'];
      const rivers = ['Bode', 'Brahmaputra', 'Beuvron', 'Black River', 'Belaja'];
      // Funktionen
      const sortByLength = (ar = []) => {
        return ar.sort((a, b) => b.length - a.length);
      };
      // Sortieren nach Länge
      const sortedCities = sortByLength(cities); //cities.sort((a, b) => b.length - a.length);
      const sortedCountries = sortByLength(countries); // countries.sort((a, b) => b.length - a.length);
      const sortedRivers = sortByLength(rivers); // rivers.sort((a, b) => b.length - a.length);
      console.log(sortByLength());
      console.log(sortedCities);
      console.log(sortedCountries);
      console.log(sortedRivers);
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u40_map-lueckentext.html
+++ b/01_grundlagen/uebungen/u40_map-lueckentext.html
@@ -0,0 +1,40 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 40: Lückentext zu map</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>Übung 40: Lückentext zu map</h1>
        <p>
          Wir wollen Sie bei der ersten Übung zu <strong>map</strong> nicht gleich ins kalte Wasser werfen. Stattdessen
          haben wir einen kleinen Lückentext vorbereitet, bei dem Sie nur wenig ergänzen müssen. Ersetzen Sie die
          Kommentare <code>/* ??? */</code> durch den richtigen Code, um das angegebene Ergebnis zu erzielen.
        </p>
      </div>
    </main>
    <script>
      'use strict';
      let results;
      let inputs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      //double
      results = inputs.map((num) => num * 2);
      console.log(results); // => [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
      //squares
      results = inputs.map((num) => num * num);
      results = inputs.map((num) => num ** 2);
      results = inputs.map((num) => Math.pos(num, 2));
      // => [1, 4, 9, 16, 25, 36, 49, 64, 81, 100]
      console.log(results);
      //
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u41_tranformierte-ladislaus.html
+++ b/01_grundlagen/uebungen/u41_tranformierte-ladislaus.html
@@ -0,0 +1,96 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 41: Der transformierte Ladislaus, Teil 4</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 41: Der transformierte Ladislaus, Teil 4</h1>
          <p>
            Passen Sie die Funktion transformName aus Übung 34 so an, dass sie beliebig viele Vornamen (als Array)
            verwerten kann.
          </p>
          <p>Zum Beispiel: <code>'L. C. B. Jones'</code></p>
        </div>
        <h3 class="mt-3">Formular</h3>
        <form class="form-transform">
          <div class="row">
            <div class="col-12 col-sm-6">
              <div class="mb-3">
                <label class="form-label" for="input-firstname">Vornamen</label>
                <div class="input-group">
                  <input
                    type="text"
                    class="form-control"
                    name="firstname"
                    id="input-firstname"
                    placeholder="Bitte mehrere Vornamen getrennt hinzufügen" />
                </div>
                <div class="tags mt-2"></div>
              </div>
            </div>
            <div class="col-12 col-sm-6">
              <div class="mb-3">
                <label class="form-label" for="input-lastname">Nachname</label>
                <input
                  type="text"
                  class="form-control"
                  name="lastname"
                  id="input-lastname"
                  placeholder="Nachname eingeben..." />
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="my-3">
                <!-- <input type="submit" value="Transform name" class="btn btn-dark input-transform" /> -->
                <button type="submit" class="btn btn-dark button-transform">Transform name</button>
              </div>
            </div>
          </div>
        </form>
        <div class="alert alert-secondary">
          <h5 class="mt-2">Transformierter Name:</h5>
          <div class="output"></div>
        </div>
      </div>
    </main>
    <script>
      'use strict';
      const formTransformEl = document.querySelector('.form-transform');
      const intputFirstname = formTransformEl.querySelector('input[name="firstname"]');
      const inputLastname = formTransformEl.querySelector('input[name="lastname"]');
      const outputEl = document.querySelector('.output');
      // Übung 03
      const transformName = (firstNames = [], lastName = '') => {
        const initials = firstNames.map((name) => `${name[0].toUpperCase()}.`);
        return `${initials.join(' ')} ${lastName}`;
      };
      formTransformEl.addEventListener('submit', (e) => {
        e.preventDefault();
        const firstNames = intputFirstname.value.trim().split(' ');
        const lastName = inputLastname.value.trim();
        outputEl.textContent = transformName(firstNames, lastName);
      });
      outputEl.textContent = transformName(['Ladislaus', 'Coolio', 'Barry'], 'Jones');
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u42_filter-boardgames.html
+++ b/01_grundlagen/uebungen/u42_filter-boardgames.html
@@ -0,0 +1,54 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 42: Friedemann Friese</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 42: Friedemann Friese</h1>
          <p>
            Ferdinand Füller mag Brettspiele von Friedemann Friese. Filtern Sie nur die Spiele aus der angegebenen Liste
            der Brettspiele heraus, die mit dem Buchstaben F beginnen.
          </p>
          <p>Ersetzen Sie dazu die Kommentare <code>/* ??? */</code> durch den richtigen Code.</p>
        </div>
        <div class="output alert alert-secondary"></div>
      </div>
    </main>
    <script>
      'use strict';
      const outputEl = document.querySelector('.output');
      const videogames = ['Far Cry', 'Among Us'];
      const boardgames = [
        'Caverna',
        'Puerto Rico', //
        'Agricola',
        'Black Friday',
        'Funny Friends',
        'Fauna',
        'Eclipse',
        'Codenames',
        'Dominion',
        'Fairy Tale',
        'few time',
        'Fast Flowing Forest Fellers',
        'Fearsome Floors',
      ];
      const getBoardgamesStartingWithF = () => {
        return boardgames.filter((name) => {
          return name.toLowerCase().startsWith('f');
        });
      };
      outputEl.textContent = getBoardgamesStartingWithF().join(' --- ');
      console.log(getBoardgamesStartingWithF()); //=> ['Funny Friends', 'Fauna', 'Fairy Tale', 'Fast Flowing Forest Fellers', 'Fearsome Floors']
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u43_filter-results.html
+++ b/01_grundlagen/uebungen/u43_filter-results.html
@@ -0,0 +1,60 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 43: Lückentext zu filter</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 43: Lückentext zu filter</h1>
          <p>
            Auch zu <code>filter</code> haben wir einen kleinen Lückentext vorbereitet. Ersetzen Sie wieder die
            Kommentare <code>/* ??? */</code> durch den richtigen Code, um das angegebene Ergebnis zu erzielen.
          </p>
        </div>
        <div class="output alert alert-secondary my-3"></div>
      </div>
    </main>
    <script>
      'use strict';
      const outputEl = document.querySelector('.output');
      const inputs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      const names = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
      const text = 'Hi this is a short text';
      let results;
      let result;
      //1. even numbers
      results = inputs.filter((input) => input % 2 === 0);
      console.log(results); // => [2, 4, 6, 8, 10]
      //2. names ending with letter 'e' or 'a'
      results = names.filter((name) => {
        return name.endsWith('a') || name.endsWith('e');
      });
      console.log(results); // => [ 'Friedlinde', 'Tusnelda',
      //3. words with at least three letters
      const wordAr = text.split(' '); // => ['Hi', 'this', 'is', 'a', 'short', 'text'];
      result = wordAr
        .filter((text) => {
          return text.length >= 3;
        })
        .join(' ');
      console.log(result); // => 'this short text'
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u44_quersumme.html
+++ b/01_grundlagen/uebungen/u44_quersumme.html
@@ -0,0 +1,53 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 44: Quersumme berechnen</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 44: Quersumme berechnen</h1>
          <p>
            Schreibe eine Funktion digitSum, die die Quersumme einer übergebenen Zahl zurückgibt.
            <strong>Hinweis:</strong> Die Quersumme ist die Summe aller Ziffern einer Zahl. <br /><strong>Tipp:</strong>
            Verwenden Sie split('').
          </p>
          <div class="output alert alert-secondary my-3"></div>
        </div>
      </div>
    </main>
    <script>
      'use strict';
      const outputEl = document.querySelector('.output');
      const number = 4566;
      const getDigitSum = (n) => {
        // n in ein array umwandeln
        const digitAr = String(n).split(''); // (n).toString().split('')
        // => z.B. ['4','2','4','2']
        // Die quersumme berechnen und zurückgeben
        return digitAr.reduce((digit1, digit2) => Number(digit1) + Number(digit2), 0);
      };
      const getDigitSum1 = (n) => {
        return String(n) // => '4242'
          .split('') // => ['4','2','4','2']
          .map((str) => Number(str)) // => .map(Number) [4,2,4,2]
          .reduce((sum, n) => sum + n, 0); //=> 12
      };
      console.log(getDigitSum(4242)); //=> 12
      console.log(getDigitSum('13')); //=> 4
      console.log(getDigitSum(134)); //=> 8
      outputEl.textContent = `Die Quersumme von ${number} ist: ${getDigitSum(number)}!`;
      //========
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u45_quersummen-sortiert.html
+++ b/01_grundlagen/uebungen/u45_quersummen-sortiert.html
@@ -0,0 +1,58 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 45: Quersumme berechnen und Ergebnisse sortieren</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 45: Quersumme berechnen und Ergebnisse sortieren</h1>
          <p>
            Na, haben wir den Mathematiker in dir geweckt? Verwende die Funktion <code>digitSum</code> aus der letzten
            Übung. Nutze die Funktion dieses Mal, um gleich ein ganzes Array von Zahlen nach ihrer Quersumme zu
            sortieren.
          </p>
        </div>
        <div class="output alert alert-secondary my-3"></div>
      </div>
    </main>
    <script>
      'use strict';
      const outputEl = document.querySelector('.output');
      const numbers = [99, 5, 8, 12, 111, 123];
      // const getDigitSum = (n) => {
      //   return String(n) // => '4242'
      //     .split('') // => ['4','2','4','2']
      //     .map((str) => Number(str)) // => .map(Number) [4,2,4,2]
      //     .reduce((sum, n) => sum + n, 0); //=> 12
      // };
      const getDigitSum = (n) => {
        // n in ein array umwandeln
        const digitAr = String(n).split('');
        // Die quersumme berechnen und zurückgeben
        const result = digitAr.reduce((digit1, digit2) => {
          return Number(digit1) + Number(digit2);
        }, 0);
        return result;
      };
      const getSortedArrayByDigitSum = (numbers = []) => {
        return [...numbers].sort((a, b) => getDigitSum(a) - getDigitSum(b));
      };
      outputEl.textContent = getSortedArrayByDigitSum(numbers);
      console.log(getSortedArrayByDigitSum([4, 12])); //=> [12, 4]
      console.log(getSortedArrayByDigitSum(numbers)); //=> [12, 111, 5, 123, 8, 99]
      console.log(numbers);
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u46_richtige-gewinner.html
+++ b/01_grundlagen/uebungen/u46_richtige-gewinner.html
@@ -0,0 +1,100 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 46: Richtige Gewinner</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 46: Richtige Gewinner</h1>
          <p>
            Die Ausgabe der Gewinner aus dem letzten Beispiel (Codebeispiel 324) ist immer noch nicht ideal. Am Besten
            wäre das folgende Ergebnis-Array:
          </p>
          <pre>
            <code>
  [
    '1st place: Heribert',
    '2nd place: Friedlinde',
    '3rd place: Tusnelda',
    'Oswine',
    'Ladislaus',
  ]
            </code>
          </pre>
        </div>
        <div class="output alert alert-secondary"></div>
      </div>
    </main>
    <script>
      'use strict';
      const outputEl = document.querySelector('.output');
      const winners = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
      // const PlaceWinner = () => {
      //   console.log(winners());
      // };
      // Beispiel
      const getWinners = (winners) => {
        const results = [];
        const restAr = [];
        for (let i = 0; i < winners.length; i++) {
          if (i === 0) {
            results.push(`1st Place: ${winners[i]}`);
          } else if (i === 1) {
            results.push(`2nd Place: ${winners[i]}`);
          } else if (i === 2) {
            results.push(`3rd Place: ${winners[i]}`);
          } else {
            restAr.push(winners[i]);
          }
        }
        //return [results, restAr];
        return results.concat(rest);
      };
      // Beispiel
      const getWinners2 = (names = []) => {
        const results = names.map((name, idx) => {
          if (idx === 0) {
            return `1st place: ${name}`;
          }
          if (idx === 1) {
            return `2nd place: ${name}`;
          }
          if (idx === 2) {
            return `3rd place: ${name}`;
          }
          return name;
        });
        return results;
      };
      const labels = ['1st', '2nd', '3rd'];
      // Beispiel
      const getWinners3 = (names = []) => {
        const results = names.map((name, idx) => {
          // if (idx < 3) {
          //   return `${labels[idx]} place: ${name}`;
          // } else {
          //   return name;
          // }
          return idx < labels.length ? `${labels[idx]} place: ${name}` : name;
        });
        return results;
      };
      console.log(getWinners3(winners));
      outputEl.innerHTML = `<ul><li>${getWinners3(winners).join('</li><li>')}</li></ul>`;
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u47_higher-order-fn-lueckentext.html
+++ b/01_grundlagen/uebungen/u47_higher-order-fn-lueckentext.html
@@ -0,0 +1,173 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 47: Lückentext zu Higher-Order-Funktionen</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>Übung 47: Lückentext zu Higher-Order-Funktionen</h1>
        <p>
          Das ist garantiert der letzte Lückentext für diese Lektion. Ersetzen Sie wieder die Kommentare
          <strong>/* ??? */</strong> durch den richtigen Code, um das angegebene Ergebnis zu erzielen.
        </p>
      </div>
    </main>
    <script>
      'use strict';
      let result;
      let results;
      let inputs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      let text = 'Hi this is a short text';
      let names = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
      //odd numbers
      //results = inputs
      //let inputs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      results = inputs.filter((n) => n % 2 !== 0);
      const ungeradeZahlen = [];
      for (let i = 0; i < inputs.length; i++) {
        if (inputs[i] % 2 !== 0) {
          ungeradeZahlen.push(inputs[i]);
        }
      }
      console.log(ungeradeZahlen); // => [ 1, 3, 5, 7, 9 ]
      console.log(results); // => [ 1, 3, 5, 7, 9 ]
      // ==================================================================
      // sum
      inputs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      // a und b wrd addiert (1+2 = 3) speichert in a und ( a + b ( 3 +3 = 6))
      const sum = inputs.reduce((a, b) => a + b, 0);
      console.log('sum: ', sum); // => 55
      // ======================================================================
      //product
      //result = inputs
      const gesamtsumme = inputs.reduce((a, b) => a * b, 1);
      console.log(gesamtsumme); // => 3628800
      // ========================================================================
      //longest word length
      //   let text = 'Hi this is a short text';
      const longestWordLength = text.split(' ').reduce((a, b) => {
        if (a.length > b.length) {
          return a;
        } else {
          return b;
        }
      }).length;
      console.log(longestWordLength); //=> 5
      // longest word length
      results = text.split(' '); //=> ['Hi', 'this', 'is', 'a', 'short', 'text'];
      const getWordLength = (word) => {
        return word.length;
      };
      const wordLength = results.map(getWordLength); // => [2,4,2,1,5,4]
      result = wordLength.sort((n1, n2) => {
        return n2 - n1;
      });
      result = result[0];
      console.log(result); // => 5
      result = text
        .split(' ') //=> ['Hi', 'this', 'is', 'a', 'short', 'text'];
        .map((a) => a.length) // => [2,4,2,1,5,4]
        .reduce((a, b) => Math.max(a, b)); // => 5
      // .reduce((a, b) => (a < b ? b : a)); // => 5
      console.log('Max word length: ', result);
      //longest word length
      result = text.split(' ').sort((a, b) => b.length - a.length)[0].length;
      //=> ['Hi', 'this', 'is', 'a', 'short', 'text'];
      console.log(`Länge des längsten Wortes: ${result}`); // => 5
      // ======================================================
      //longest word
      //result = text.split(' '); //=> ['Hi', 'this', 'is', 'a', 'short', 'text'];
      const longestword = text.split(' ').reduce((a, b) => {
        if (a.length > b.length) return a;
        else return b;
      });
      result = text.split(' ').sort((a, b) => b.length - a.length)[0];
      console.log('longestword: ', result); // =>'short'
      console.log(longestword); // =>'short'
      // =========================================================
      //avg word length =========================// => 3
      const avgword = text.split(' ');
      const AnzahlSum = avgword.length; // 6
      const AvgSum = AnzahlSum / 2;
      console.log(AvgSum); // 3
      result =
        text
          .split(' ') //=> ['Hi', 'this', 'is', 'a', 'short', 'text'];
          .map((a) => a.length) // => [2,4,2,1,5,4]
          .reduce((a, b) => a + b, 0) / text.split(' ').length;
      console.log(`Avg word length: ${result}`); // => 3
      result =
        text
          .split(' ')
          .map((text) => text.length)
          .reduce((n1, n2) => n1 + n2, 0) / text.split(' ').length;
      console.log(`Durchschnittliche Wortlänge: ${result}`); // => 3
      result = text.replaceAll(' ', '').length / text.split(' ').length;
      console.log(`Durchschnittliche Wortlänge: ${result}`); // => 3
      // ============================================================
      //sort by 3rd letter
      // ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
      const names2 = [...names];
      const sortedByThirdLetterAr = names2.sort((a, b) => a.charAt(2).localeCompare(b.charAt(2)));
      results = [...names].sort((a, b) => (a.charAt(2) < b.charAt(2) ? -1 : 1));
      console.log(`sort by 3rd letter: ${results}`); // => [ 'Ladislaus', 'Friedlinde', 'Heribert', 'Tusnelda', 'Oswine' ]
      console.log(sortedByThirdLetterAr); // => [ 'Ladislaus', 'Friedlinde', 'Heribert', 'Tusnelda', 'Oswine' ]
      // ========================================================================
      // Are there names with more than 8 letters?
      // ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
      const names3 = [...names];
      const moreThenEightLetters = names3.filter((name) => name.length > 8);
      result = names.some((name) => name.length > 8);
      console.log(moreThenEightLetters.length > 0); // => true
      console.log(result); // => true
      //===================================================================
      // Has every name at least 8 letters?
      result = [...names].every((name) => name.length <= 8);
      console.log('Has every name at least 8 letters?: ', result);
      //====================================================
      // What is the lowest value from the inputs?
      // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      // result = inputs
      result = Math.min(...inputs);
      console.log(result);
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/u48_froehliches-mixen.html
+++ b/01_grundlagen/uebungen/u48_froehliches-mixen.html
@@ -0,0 +1,74 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Übung 48: Fröhliches Mixen mit Arrays</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>Übung 48: Fröhliches Mixen mit Arrays</h1>
        <img
          src="https://de.webmasters-europe.org/system/course_management/file/images/files/000/020/558/800-533/241aa384e6005cdebbd01c4ba4e4fa69.jpg?1644493807"
          class="img-thumbnail my-3"
          width="400"
          alt="Cocktail Party" />
        <p>
          Nach so viel trockener Theorie hast du Durst. Du öffnest deinen Kühlschrank und siehst eine angebrochene
          Packung Maracujasaft, die dringend verbraucht werden muss. Mit Maracujasaft lassen sich tatsächlich tolle
          Cocktails zaubern, und gerade letztens hat dir ein Freund den Honolulu Flip empfohlen. Jetzt wäre es perfekt,
          wenn in dem besagten Cocktail Maracujasaft enthalten wäre …
        </p>
      </div>
    </main>
    <script>
      'use strict';
      const honoluluFlip = [
        'Maracuja Juice', //
        'Pineapple Juice',
        'Lemon Juice',
        'Grapefruit Juice',
        'Crushed Ice',
      ];
      const ingredientsFromMyBar = [
        'Pineapple',
        'Maracuja Juice',
        'Cream',
        'Lemon Juice',
        'Grapefruit Juice',
        'Crushed Ice',
        'Milk',
        'Apple Juice',
        'Aperol',
        'Pineapple Juice',
        'Limes',
        'Lemons',
      ];
      // Funktionen
      // 1. Schreibe eine Funktion, `hasIngredient`, die `true` zurückgibt, wenn eine angegebene Zutat in einer Rezeptliste vorhanden ist. Rufe deine Funktion mit Maracujsasaft und Honolulu Flip auf.
      const hasIngredient = (cocktailAr = [], searchStr) => {
        return cocktailAr.includes(searchStr);
      };
      //alert(hasIngredient(honoluluFlip, 'Maracuja Juice'));
      // 2. So richtig sinnvoll ist unsere Funktion noch nicht. Viel hilfreicher wäre es, wenn wir eine Funktion hätten, die anhand unserer vorhandenen Zutaten herausfindet, ob wir den Cocktail auch tatsächlich machen können. Dafür benötigst du die komplette Liste aller bei dir vorhandenen Zutaten (ingredientsFromMyBar). Du möchtest wissen, ob du alle Zutaten vorrätig hast, die du zum Mixen des Cocktails benötigst.
      const isMixableWith = (cocktailAr, allAr = []) => {
        return cocktailAr.every((str) => hasIngredient(allAr, str));
      };
      //honoluluFlip isMixableWith ingredientsFromMyBar?
      console.log(isMixableWith(honoluluFlip, ingredientsFromMyBar)); // => true
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/uebungen-14-18.zip
+++ b/01_grundlagen/uebungen/uebungen-14-18.zip
--- a/01_grundlagen/uebungen/uebungen-19-26.zip
+++ b/01_grundlagen/uebungen/uebungen-19-26.zip
--- a/01_grundlagen/uebungen/uebungen-27-35.zip
+++ b/01_grundlagen/uebungen/uebungen-27-35.zip
--- a/01_grundlagen/uebungen/uebungen-35-38-o1.zip
+++ b/01_grundlagen/uebungen/uebungen-35-38-o1.zip
--- a/01_grundlagen/uebungen/uebungen-39-45.zip
+++ b/01_grundlagen/uebungen/uebungen-39-45.zip
--- a/01_grundlagen/uebungen/uebungen-46-48.zip
+++ b/01_grundlagen/uebungen/uebungen-46-48.zip
--- a/01_grundlagen/unterricht/tag01/01_tools-fuer-die-webentwicklung.md
+++ b/01_grundlagen/unterricht/tag01/01_tools-fuer-die-webentwicklung.md
@@ -0,0 +1,28 @@
 # Tools für die Webentwicklung
 ### Markdown
 > **Definition:** Markdown ist eine einfache Syntax, um HTML-Code aus Textdokumenten zu generieren. Über die Markdown Syntax kann man das Schreiben von Dokumentationen und Notizen beschleunigen.
 **Links zum Lernen der Markdown-Syntax**
 - <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet">Markdown-Cheatsheet</a>
 - [Markdown-Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
 - [Markdown.de](http://markdown.de/)
 **Markdown Editoren:**
 - [Auflistung von Markdown Editoren](https://dev.to/awwsmm/state-of-markdown-editors-2019-2k49)
 - [Haroopad](http://pad.haroopress.com/) (Windows)
 - [Macdown](https://macdown.app/) (Mac OS)
 - [Typora](https://typora.io/) (Windows | Mac OS)
 - [Joplin](https://joplinapp.org/) (Windows | Mac OS)
 - [Obsidian](https://obsidian.md/) (Windows | Mac OS)
 - [Marp](https://marp.app/) (Windows | Mac OS)
 ### Emmet
 > **Definition:** Die Grundfunktion von Emmet ist es mit Abkürzungen rasch HTML und CSS Code schreiben zu können. Man gibt dabei im Editor die Abkürzungen ein, drückt auf die TAB Taste und schon erscheint statt der Abkürzung eine Menge HTML Code.
 - [Emmet Cheatsheet](https://docs.emmet.io/cheatsheet-a5.pdf)
 - [Emmet.io](https://emmet.io/)
--- a/01_grundlagen/unterricht/tag01/01_tools-fuer-die-webentwicklung.pdf
+++ b/01_grundlagen/unterricht/tag01/01_tools-fuer-die-webentwicklung.pdf
--- a/01_grundlagen/unterricht/tag01/02_markdown-syntax.md
+++ b/01_grundlagen/unterricht/tag01/02_markdown-syntax.md
@@ -0,0 +1,22 @@
 # Markdown Syntax
 | Bezeichnung | Text                         |
 | ----------- | ---------------------------- |
 | Macdown     | <https://macdown.app/>       |
 | Haroopad    | <http://pad.haroopress.com/> |
 ```js
 function test() {
  console.log('Hello World');
 }
 ```
 **Fetter Text**
 _kursiver Text_
 > Zitattext
 ## Todos
 - [ ] Markdown
 - [ ] HTML & CSS lernen
--- a/01_grundlagen/unterricht/tag01/03_emmet.html
+++ b/01_grundlagen/unterricht/tag01/03_emmet.html
@@ -0,0 +1,24 @@
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Emmet</title>
  </head>
  <body>
    <h1>Emmet Beispiele</h1>
    <!-- Emmet: p>lorem20 -->
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas, magnam.</p>
    <!-- Emmet: nav.menu-main#menu-main>ul.list>li.list-item*5>a[href="#"]{Link $} -->
    <nav class="menu-main" id="menu-main">
      <ul class="list">
        <li class="list-item"><a href="#">Link 1</a></li>
        <li class="list-item"><a href="#">Link 2</a></li>
        <li class="list-item"><a href="#">Link 3</a></li>
        <li class="list-item"><a href="#">Link 4</a></li>
        <li class="list-item"><a href="#">Link 5</a></li>
      </ul>
    </nav>
  </body>
 </html>
--- a/01_grundlagen/unterricht/tag01/04_html-grundgeruest.html
+++ b/01_grundlagen/unterricht/tag01/04_html-grundgeruest.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>HTML Grundgerüst</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>HTML Grundgerüst</h1>
      </div>
    </main>
    <script>
      'use strict';
    </script>
  </body>
 </html>
--- a/01_grundlagen/unterricht/tag02/01_console-log.html
+++ b/01_grundlagen/unterricht/tag02/01_console-log.html
@@ -0,0 +1,32 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>console.log()</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>console.log()</h1>
      </div>
    </main>
    <script>
      'use strict';
      console.log('Hello World!');
      console.log('....log message');
      console.log('Philippe', 'Torrel', 41);
      console.warn('Hinweis im Konsolenfenster');
      console.info('Information im Konsolenfenster');
      console.error('Fehler im Konsolenfenster');
      console.table(['Ersin', 'Kahleel', 'Andreas']);
      console.table({ firstName: 'John', lastName: 'Wick' });
      console.dir({ firstName: 'John', lastName: 'Wick' });
    </script>
  </body>
 </html>
--- a/01_grundlagen/unterricht/tag02/02_alert-prompt-confirm.html
+++ b/01_grundlagen/unterricht/tag02/02_alert-prompt-confirm.html
@@ -0,0 +1,59 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>alert(), prompt(), confirm()</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>alert(), prompt(), confirm()</h1>
        <!-- Emmet: .alert.alert-primary>h2{alert()}+p -->
        <div class="alert alert-primary">
          <h2>alert()</h2>
          <p>
            Die <a href="https://developer.mozilla.org/de/docs/Web/API/Window/alert">window.alert()</a> Methode zeigt
            einen Alert-Dialog mit optional spezifiziertem Inhalt und einem OK-Button an.
          </p>
        </div>
        <!-- .alert.alert-primary.my-3>h2{prompt()}+p -->
        <div class="alert alert-primary my-3">
          <h2>prompt()</h2>
          <p>
            Die <a href="https://developer.mozilla.org/de/docs/Web/API/Window/prompt">window.prompt()</a> zeigt ein
            Dialogfenster mit einem Text-Eingabefeld an, mit einer optionalen Nachricht an den Benutzer.
          </p>
        </div>
        <div class="alert alert-primary my-3">
          <h2>confirm()</h2>
          <p>
            Die <a href="https://developer.mozilla.org/de/docs/Web/API/Window/confirm">window.confirm()</a> Methode
            zeigt ein modales Dialogfenster mit einem optionalen Text und zwei Buttons an, OK und Abbrechen.
            Rückgabewert ist ein Boolean (true, false)
          </p>
        </div>
      </div>
    </main>
    <script>
      'use strict';
      // window.alert('Hello World!'); // window muss als äußerstes Objekt nicht extra angesprochen werden (Angabe ist optional)
      // alert('Hello World!');
      // window.prompt('Die Antwort auf alles?');
      let result = prompt('Die Antwort auf alles?');
      console.log(result); // => string | null
      // window.confirm('Lust auf Mittagspause?');
      let answer = confirm('Lust auf Mittagspause?');
      console.log(answer); // => boolean (true | false)
    </script>
  </body>
 </html>
--- a/01_grundlagen/unterricht/tag02/03_use-strict.html
+++ b/01_grundlagen/unterricht/tag02/03_use-strict.html
@@ -0,0 +1,38 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>use strict - JS in den strikten Modus setzen</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>use strict - JS in den strikten Modus setzen</h1>
        <p>Viele veraltete Sprachkonstrukte werden nicht mehr akzeptiert</p>
      </div>
    </main>
    <script>
      text = 'Ich bin ein Text.';
      console.log(text, window.text); // OHNE 'use strict' ->  Variable wird global (auf window) angelegt.
    </script>
    <script>
      'use strict'; // setzt JS in einen strikten Modus
      // vor ES6 (ECMAScript 2015)
      var text = 'Ich bin ein Text.';
      // seit ES6
      let text2 = 'Ich bin ein Text.';
      const text3 = 'Ich bin ein Text.';
      text4 = 'Ich bin ein Text.';
      // OHNE 'use strict' -> Variable wird global (auf window) angelegt.
      // MIT 'use strict' -> Uncaught ReferenceError: text4 is not defined
    </script>
  </body>
 </html>
--- a/01_grundlagen/unterricht/tag02/04_kommentare.html
+++ b/01_grundlagen/unterricht/tag02/04_kommentare.html
@@ -0,0 +1,45 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Kommentare in JS</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
    <style>
      *,
      html {
        box-sizing: border-box;
      }
      /* Mehrzeiliger Kommentar */
      .box {
        border: 1rem solid #f90;
        background-color: #333;
        width: 100px;
        height: 100px;
        padding: 2rem;
      }
    </style>
  </head>
  <body>
    <main>
      <div class="container py-5">
        <h1>Kommentare in JS</h1>
        <!-- Kommentar in HTML -->
        <div class="box"></div>
      </div>
    </main>
    <script>
      'use strict';
      // einzeiliger Kommentar (Tastenkürzel: STRG + # | CMD + SHIFT + 7)
      /*
        Mehrzeiliger Kommentar (SHIFT + ALT + A | OPTION + SHIFT + A)
      */
    </script>
  </body>
 </html>
--- a/01_grundlagen/unterricht/tag02/05_rechnen-in-js.html
+++ b/01_grundlagen/unterricht/tag02/05_rechnen-in-js.html
@@ -0,0 +1,44 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rechnen in JS</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>Rechnen in JS</h1>
        <h2>arithmetischen Operatoren</h2>
        <ul class="list list-group">
          <li class="list-group-item"><code>+</code> Addition</li>
          <li class="list-group-item"><code>-</code> Subtraktion</li>
          <li class="list-group-item"><code>*</code> Multiplikation</li>
          <li class="list-group-item"><code>/</code> Division</li>
          <li class="list-group-item"><code>%</code> Modulo - Rest einer ganzzahligen Division</li>
          <li class="list-group-item"><code>**</code> Potenz (erst ab ECMAScript 2016)</li>
        </ul>
      </div>
    </main>
    <script>
      'use strict';
      console.log(3 + 4 * 2); // => 11
      console.log(3 + 4 * 2); // => 11
      // prettier-ignore
      console.log(3 + (4 * 2)); // => 11
      console.log((3 + 4) * 2); // => 14
      console.log(5 + 4); // => 9
      console.log(5 - 4); // => 1
      console.log(5 * 4); // => 20
      console.log(5 / 4); // => 1.25
      console.log(10 % 3); // => 1 , da 10 - 3 * 3 = 1.
      console.log(5 ** 4); // => 625 , da 5 * 5 * 5 * 5 = 625.
      console.log(Math.pow(5, 4)); // => 625 , da 5 * 5 * 5 * 5 = 625.
    </script>
  </body>
 </html>
--- a/01_grundlagen/unterricht/tag02/06_strings.html
+++ b/01_grundlagen/unterricht/tag02/06_strings.html
@@ -0,0 +1,57 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Datentyp - String</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>Datentyp - String</h1>
        <p>
          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String">
            String Objekt
          </a>
          - Das globale String-Objekt ist ein Konstruktor für Strings, auch Zeichenketten genannt.
        </p>
        <!-- Emmet: .output.alert.alert-secondary.my-3 -->
        <div class="output alert alert-secondary my-3"></div>
      </div>
    </main>
    <script>
      'use strict';
      let outputEl = document.querySelector('.output');
      let firstName = 'John';
      let lastName = "Wick"; // prettier-ignore
      let fullName = firstName + ' ' + lastName;
      console.log(fullName); // => "John Wick";
      let name = 'Max' + ' ' + 'Mustermann'; // => + Verkettungsoperator
      console.log(name); // => 'Max Mustermann'
      let link = "<a href=\"https://www.gfn.de\">GFN</a>"; // prettier-ignore
      let link2 = '<a href="https://www.gfn.de">GFN</a>';
      let text = "Wie geht's?";
      let message = '"Chrome ist ein toller Browser" sagt ein Entwickler.';
      let welcomeMessage = "Hallo! Wie geht's " + fullName + '? Was macht der Hund?';
      // seit ES6 (ECMAScript 2015) Template String Substitution - Backtick Schreibweise
      let welcomeMessage2 = `Hallo! Wie geht's ${fullName}? Was macht der Hund?`;
      console.log(outputEl);
      console.log(welcomeMessage);
      console.log(welcomeMessage2);
      outputEl.textContent = welcomeMessage2;
    </script>
  </body>
 </html>
--- a/01_grundlagen/unterricht/tag02/07_strings-length.html
+++ b/01_grundlagen/unterricht/tag02/07_strings-length.html
@@ -0,0 +1,59 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Datentyp - String</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>Datentyp - String</h1>
        <p>
          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String">
            String Objekt
          </a>
          - Das globale String-Objekt ist ein Konstruktor für Strings, auch Zeichenketten genannt.
        </p>
        <!-- Emmet: .output.alert.alert-secondary.my-3 -->
        <div class="output alert alert-secondary my-3"></div>
      </div>
    </main>
    <script>
      'use strict';
      let outputEl = document.querySelector('.output');
      let firstName = 'John';
      let lastName = "Wick"; // prettier-ignore
      let fullName = firstName + ' ' + lastName;
      console.log(fullName); // => "John Wick";
      let name = 'Max' + ' ' + 'Mustermann'; // => + Verkettungsoperator
      console.log(name); // => 'Max Mustermann'
      let link = "<a href=\"https://www.gfn.de\">GFN</a>"; // prettier-ignore
      let link2 = '<a href="https://www.gfn.de">GFN</a>';
      let text = "Wie geht's?";
      let message = '"Chrome ist ein toller Browser" sagt ein Entwickler.';
      // String - Eigenschaft str.length
      console.log(firstName.length); //=> 4
      console.log(lastName.length); //=> 4
      console.log(fullName.length); //=> 9
      console.log('this string has a length of:'.length); //=> 28
      // String - Methoden - str.toUpperCase() | str.toLowerCase()
      console.log('Hallo'.toUpperCase()); // => 'HALLO'
      console.log(fullName.toLowerCase()); // => 'john wick';
      // outputEl.textContent = fullName.toLowerCase().toUpperCase().substring(0, 4);
    </script>
  </body>
 </html>
--- a/01_grundlagen/unterricht/tag02/08_literale.html
+++ b/01_grundlagen/unterricht/tag02/08_literale.html
@@ -0,0 +1,36 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Literale</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>Literale</h1>
        <p>
          Grundsätzlich gilt, dass jeder Wert — egal ob String oder Zahl — der direkt wörtlich (engl.: literally) im
          Code steht, als <strong>Literal</strong> bezeichnet wird. Literale haben immer einen festen Wert.
        </p>
        <h2>Beispiele für Literale</h2>
        <ul class="list">
          <li>42</li>
          <li>'Haus'</li>
          <li>'grün'</li>
          <li>5.47</li>
          <li>1998</li>
          <li>'Bitte geben Sie Ihren Namen ein'</li>
          <li>'use strict'</li>
          <li>true</li>
          <li>'1 + 4'</li>
        </ul>
      </div>
    </main>
    <script>
      'use strict';
    </script>
  </body>
 </html>
--- a/01_grundlagen/unterricht/tag02/09_typeof.html
+++ b/01_grundlagen/unterricht/tag02/09_typeof.html
@@ -0,0 +1,59 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Datentypen und der Befehl "typeof" in JS</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>Datentypen und der Befehl "typeof" in JS</h1>
        <div class="output alert alert-secondary my-3"></div>
      </div>
    </main>
    <script>
      'use strict';
      let outputEl = document.querySelector('.output');
      let zahl = 123 + 123;
      console.log(typeof 3764); // => 'number'
      console.log(typeof 'beautiful JS'); // => 'string'
      console.log(typeof 27.31); // => 'number'
      console.log(typeof zahl); // => 'number'
      console.log(typeof -3.14); // => 'number'
      console.log(typeof '-3.14'); // => 'string'
      console.log(typeof '3.14'); // => 'string'
      // prettier-ignore
      console.log(typeof "123"); // => 'string'
      // prettier-ignore
      console.log(typeof `123 + 1`); // => 'string'
      console.log(typeof true); // => 'boolean'
      console.log(typeof false); // => 'boolean'
      console.log(typeof function () {}); // => 'function'
      console.log(typeof 0b0110101); //=> 'number'
      console.log(typeof 123n); // => 'bigint' (2020)
      //=============
      console.log(typeof 4 + 4); // => 'number' + 'number4'
      console.log(typeof (4 + 4)); // => 'number'
      console.log(typeof undefined); // => 'undefined'
      console.log(typeof var2); // => 'undefined'
      console.log(typeof [1, 2, 3]); //=> 'object' vom Typ Array
      console.log(typeof null); //=> 'object' vom Typ null
      console.log(typeof { firstName: 'Jane', lastName: 'Doe' }); //=> 'object' vom Typ Object
      console.log(typeof outputEl); //=> 'object' vom Tys
      console.log('b' + 'a' + +'a' + 'a'); //=> 'baNaNa'
    </script>
  </body>
 </html>
--- a/01_grundlagen/unterricht/tag02/10_prioritaeten.html
+++ b/01_grundlagen/unterricht/tag02/10_prioritaeten.html
@@ -0,0 +1,59 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Prioritäten-Tabelle</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>Prioritäten-Tabelle</h1>
        <!-- Emmet: table.table.table-striped>(thead.table-dark>tr>th*3)+tbody>tr*5>(td{$}+td+td) -->
        <table class="table table-striped">
          <thead class="table-dark">
            <tr>
              <th>Priorität / Präzedenz</th>
              <th>Name</th>
              <th>Operator</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Gruppierungsoperator</td>
              <td>Klammern <code>()</code></td>
            </tr>
            <tr>
              <td>2</td>
              <td>typeof-Operator</td>
              <td><code>typeof</code></td>
            </tr>
            <tr>
              <td>3</td>
              <td>Multiplikation, Division, Modulo</td>
              <td><code>* / %</code></td>
            </tr>
            <tr>
              <td>4</td>
              <td>Addition, Subtraktion</td>
              <td><code>+ -</code></td>
            </tr>
            <tr>
              <td>5</td>
              <td>Zuweisungsoperator</td>
              <td><code>=</code></td>
            </tr>
          </tbody>
        </table>
      </div>
    </main>
    <script>
      'use strict';
      console.log(typeof 4 + 4); // => 'number' + 4 -> 'number4'
    </script>
  </body>
 </html>
--- a/01_grundlagen/unterricht/tag03/01_numbers.html
+++ b/01_grundlagen/unterricht/tag03/01_numbers.html
@@ -0,0 +1,56 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Numbers</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
    <style>
      h1 {
        color: #ff9900; /* rgb(255, 153, 0) */
      }
    </style>
  </head>
  <body>
    <main>
      <div class="container py-5">
        <h1>Numbers</h1>
        <video src="https://i.imgur.com/FKwTYak.mp4" controls></video>
      </div>
    </main>
    <script>
      'use strict';
      // Binär (0b = Binary)
      let binaryExample = 0b1101; //=> 13
      // Oktal (0o = Octal)
      let octalExample = 0o17; //=> 15,  7 * (8^0) + 1 * (8^1)  = 15
      let octalExample2 = 0o223; // = 147, da (3 * 1) + (2 * 8) + (2 * 64)
      // Hexadezimal (0x = Hex)
      let hexExample = 0xff; //=> 255, da 15 * (16^0) + 15 * (16^1)
      // 15 + 240
      // 0 - 9 A - F
      // Exponential (z.B. 123e5 = 12300000)
      let exponentialExample = 123e5; // 12300000
      console.log(exponentialExample);
      console.log('Binär:', binaryExample, typeof binaryExample); // 13 , 'number'
      console.log('Oktal:', octalExample, typeof octalExample); // 15 , 'number'
      console.log('Hexadezimal:', hexExample, typeof hexExample); // 255 , 'number'
      console.log('Exponential:', exponentialExample, typeof exponentialExample); // 123000 , 'number'
      // BigInt (2020) vs. Number
      let bigNumber = 1234567890123456n;
      let normalNumber = Number.MAX_SAFE_INTEGER; // => 9007199254740991 - Maximale sichere Zahl (Number): 2^53
      console.log('Max Number: ', normalNumber);
      console.log(typeof bigNumber); // 'bigint'
      // Gleitkommazahlen-Präzision
      console.log('0.1 + 0.2 =', 0.1 + 0.2); // 0.30000000000000004
    </script>
  </body>
 </html>
--- a/01_grundlagen/unterricht/tag03/02_variablendeklaration.html
+++ b/01_grundlagen/unterricht/tag03/02_variablendeklaration.html
@@ -0,0 +1,72 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Variablen in JS</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>Variablen in JS</h1>
      </div>
    </main>
    <script>
      'use strict';
      // Variablendeklaration
      let username;
      console.log('username:', username); // => undefined
      username = 'Oswine';
      console.log('username:', username); // => 'Oswine'
      // Variablendefinition
      let firstName = 'Max';
      console.log('firstName:', firstName); // => 'Max'
      // let firstName = 'Jane'; // Deklaration mit identischem Bezeichner ist nicht möglich
      let firstname = 'Max2';
      console.log('firstname:', firstname); // => 'Max2'
      // Variablendefinitionen
      let age = 40;
      let toggle = true;
      // lowerCamelCase - Schreibweise
      let myAddress = 'Entenhausenstr. 1';
      let myCounter = 1;
      let questionOne = 'Wie alt bist Du?';
      let question2 = 'Wie groß bist Du?';
      myCounter = myCounter + 1;
      console.log('myCounter: ', myCounter); // => 2;
      toggle = !toggle; // => !(true) => false
      console.log('toggle: ', toggle); // => false;
      myCounter = 'Guter Counter';
      console.log('myCounter:', myCounter); // => 'Guter Counter' <- eigentlich wird eine Zahl (number) erwartet.
      // prefer-const
      // https://github.com/airbnb/javascript#references
      const myRole = 'admin';
      //  myRole = 'guest'; // Uncaught TypeError: Assignment to constant variable.
      const myUrl = 'https://gfn.de';
      const html = '<strong>HTML</strong>';
      // Konfigurationsvariable (SCREAMING_SNAKE_CASE)
      const HOST = '127.0.0.1';
      const PORT = 3000;
      const DEFAULT_LANG = 'EN-en';
    </script>
  </body>
 </html>
--- a/01_grundlagen/unterricht/tag03/03_prompt.html
+++ b/01_grundlagen/unterricht/tag03/03_prompt.html
@@ -0,0 +1,30 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Prompt - Dialogfenster mit Eingabetextfeld in JS</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>Prompt - Dialogfenster mit Eingabetextfeld in JS</h1>
        <div class="output alert alert-secondary my-3"></div>
      </div>
    </main>
    <script>
      'use strict';
      const outputEl = document.querySelector('.output');
      // prefer-const
      const username = prompt('Please let me know your name!');
      console.log(username);
      // username = 'changedName'; // Uncaught TypeError: Assignment to constant variable.
      outputEl.textContent = `Your username is ${username}`;
    </script>
  </body>
 </html>
--- a/01_grundlagen/unterricht/tag03/04_konstante-magic-number.html
+++ b/01_grundlagen/unterricht/tag03/04_konstante-magic-number.html
@@ -0,0 +1,37 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Konstante als Konfigurationsvariable (const)</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>Konstante als Konfigurationsvariable (const)</h1>
        <div class="output alert alert-secondary my-3"></div>
      </div>
    </main>
    <script>
      'use strict';
      // Konfigurationsvariable - SCREAMING_SNAKE_CASE - Schreibweise
      const TAX_RATE = 1.19;
      // const BASE_URL = 'http://localhost:8080';
      // const DEBUG_MODE = false;
      const outputEl = document.querySelector('.output');
      const netPrice = prompt('Net price for the shocking pen?');
      // let totalPrice = netPrice * 1.19; // Vermeidung von "Magic Values" - Werte, die nur aus dem Kontext verstanden werden, sollen vermieden werden.
      const totalPrice = netPrice * TAX_RATE;
      const resultText = `total price: ${totalPrice}`;
      console.log(resultText);
      outputEl.textContent = resultText;
    </script>
  </body>
 </html>
--- a/01_grundlagen/unterricht/tag03/05_zusammengesetzte-zuweisungsoperatoren.html
+++ b/01_grundlagen/unterricht/tag03/05_zusammengesetzte-zuweisungsoperatoren.html
@@ -0,0 +1,77 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Zusammengesetzte Zuweisungsoperatoren</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>Zusammengesetzte Zuweisungsoperatoren</h1>
        <!-- ul.list-group>li.list-group-item*6 -->
        <ul class="list-group">
          <li class="list-group-item">+=</li>
          <li class="list-group-item">-=</li>
          <li class="list-group-item">*=</li>
          <li class="list-group-item">/=</li>
          <li class="list-group-item">%=</li>
          <li class="list-group-item">**=</li>
        </ul>
      </div>
    </main>
    <script>
      'use strict';
      // Variablendefinition
      let zahl = 5;
      let zahl2 = 2;
      let zahl3 = 1;
      let html = '';
      let counter = 0;
      let speed = 10;
      zahl = zahl + 5; //=> 10
      zahl += 5; //=> 15
      speed += 2; //=> 12
      zahl2 = zahl2 * 4; //=> 8
      zahl2 *= 4; //=> 32
      zahl3 = zahl3 - 1; // => 0
      zahl3 -= 1; // => -1
      html += '<h2>'; // => '' + '<h2>'
      html += 'Hello'; //=> '<h2>' + 'Hello'
      html += '</h2>'; //=> '<h2>Hello' + '</h2>'
      html += '<hr />';
      html += '<p>lorem ipsum</p>';
      // ===========================
      // increment
      counter++; //=> 1
      counter++; //=> 2
      console.log('counter: ', counter++); // => 2 <- Erhöhung um Faktor 1 findet erst nach der Befehlzeile statt.
      console.log('counter: ', counter); //=> 3
      // pre-increment
      console.log(++counter); //=> 4
      console.log(++counter); //=> 5
      // ===========================
      // decrement
      counter--; //=> 4
      counter--; //=> 3
      console.log('counter: ', counter--); // => 3 <- Reduzierung um Faktor 1 findet erst nach der Befehlzeile statt.
      console.log('counter: ', counter); //=> 2
      // pre-decrement
      console.log(--counter); //=> 1
      console.log(--counter); //=> 0
    </script>
  </body>
 </html>
--- a/01_grundlagen/unterricht/tag03/06_variablenbezeichner.html
+++ b/01_grundlagen/unterricht/tag03/06_variablenbezeichner.html
@@ -0,0 +1,63 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Variablenbezeichner</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>Variablenbezeichner</h1>
      </div>
    </main>
    <script>
      'use strict';
      // gültige Variablennamen nach Programmierrichtlinien (nach Airbnb, Google)
      // lowerCamelCase - Schreibweise ohne Sonderzeichen (^[a-zA-Z][0-9]$)
      const myUrl = 'https://www.gfn.de'; // myURL <- auch in Ordnung
      const firstName = 'John';
      const lastName = 'Wick';
      const parsedUrl = 'gfn.de'; // parsedURL <- auch in Ordnung
      const question2 = 'Ist das eine korrekte Syntax?';
      // SCREAMING_SNAKE_CASE - Schreibweise bei Konfigurationsvariablen bzw. -konstanten
      const TAX_RATE = 1.19;
      const TAX_PERCENTAGE = 19;
      const API_URL = 'https://api.gfn.de';
      const SECRET_TOKEN = '123secret';
      // gültige Variablennamen, aber NICHT nach Programmierrichtlinien (Airbnb, Google, MDN)
      let $zahl = 2;
      let _myVar = 'Wert';
      let __self = this;
      let counter_rounds = 100;
      // syntaktisch korrekte Schreibweise, aber unschön (BITTE VERMEIDEN)
      let zähler = 12;
      let éviter = 'vermeiden';
      let straße = 'Musterstr. 1';
      let ᓚᘏᗢ = 'cat';
      let 串 = 'test';
      let المعرف = 'ja geht';
      console.log(Math.PI); //=> 3.14159....
      console.log(Math.pow(2, 3));
      // let Math = 'test';
      // ungültige Variablen
      // let let = 'nope'; // statements bzw. Schlüsselwörter können nicht überschrieben werden.
      // let for = 'nope';
      // let typeof = 'nope';
      // let 🚀 = 'rocket'; // emojis können nicht verwendet werden.
      // let 2ndCounter = 2; // Zahlen nicht am Anfang
      // let prozent% = 100; // keine arithmetischen Operatoren
      // let counter-values = [1,20,30]
    </script>
  </body>
 </html>
--- a/01_grundlagen/unterricht/tag03/07_verkettungsoperator.html
+++ b/01_grundlagen/unterricht/tag03/07_verkettungsoperator.html
@@ -0,0 +1,60 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Verkettungsoperator oder Konkatenationsoperator (+)</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>Verkettungsoperator oder Konkatenationsoperator (+)</h1>
        <div class="output alert alert-secondary my-3"></div>
      </div>
    </main>
    <script>
      'use strict';
      const outputEl = document.querySelector('.output');
      const username = 'Ladislaus';
      const firstName = 'John';
      const lastName = 'Wick';
      const currentAge = 38;
      console.log('Hi ' + username + '. Welcome to Nerdworld!');
      // => Hi Ladislaus. Welcome to Nerdworld!
      // ES6 (2015) - Template Literal (EMPFEHLUNG)
      console.log(`Hi ${username}. Welcome to Nerdworld!`);
      // => Hi Ladislaus. Welcome to Nerdworld!
      console.log(
        'Hi ' +
          firstName +
          ' ' +
          lastName +
          ".\nHow\'s your dog? In 10 years from now you will be " +
          (currentAge + 10) +
          ' years old.',
      );
      const text = `Hi ${firstName} ${lastName}.\nHow's your dog? In 10 years from now you will be ${currentAge + 10} years old.`;
      console.log(text);
      outputEl.textContent = text; // textContent entschärft HTML - HTML Syntax wird in HTMLEntitäten umgewandelt (aus < wird z.B. &lt;)
      outputEl.innerHTML = text.replaceAll('\n', '<br />'); // nl2br() in php
      // Verkettung
      console.log('Hello' + ' ' + 'World!');
      console.log('3' + 5); // => '35' <- string
      console.log(5 + '3'); // => '53' <- string
      // Addition
      console.log(3 + 5); //=> 8 <- number
    </script>
  </body>
 </html>
--- a/01_grundlagen/unterricht/tag04/01_escape-notation.html
+++ b/01_grundlagen/unterricht/tag04/01_escape-notation.html
@@ -0,0 +1,54 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>All Escape Characters</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
    <style>
      .list-check {
        list-style: none;
        padding: 0 0 0 20px;
        margin: 0;
      }
      .list-check li::before {
        content: '\f058';
        font-family: 'Font Awesome 7 Free';
        font-weight: 900;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <main>
      <div class="container py-5">
        <h1><i class="fa-solid fa-book-bookmark"></i> All Escape Characters</h1>
        <!-- ul.list.list-check>li*2>a[href="#"]{Link} -->
        <ul class="list list-check">
          <li>
            <a
              href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Regular_expressions/Character_escape">
              All Escape Characters
            </a>
          </li>
          <li><a href="../../docs/escape-notation.pdf">Escape Notation PDF</a></li>
        </ul>
        <div class="output alert alert-secondary my-3"></div>
      </div>
    </main>
    <script>
      'use strict';
      const outputEl = document.querySelector('.output');
      const text =
        'Please enter the number of files for the following directory:\nC:\\important_folder\\next_important_folder';
      console.log(text);
      outputEl.innerHTML = text.replaceAll('\n', '<br/>');
    </script>
  </body>
 </html>
--- a/01_grundlagen/unterricht/tag04/02_implizite-typkonvertierung.html
+++ b/01_grundlagen/unterricht/tag04/02_implizite-typkonvertierung.html
@@ -0,0 +1,53 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Implizite Typkonvertierung</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>Implizite Typkonvertierung</h1>
      </div>
    </main>
    <script>
      'use strict';
      console.log('5' * '4'); // => 20 <- 'number'
      console.log('5' * 4); // => 20 <- 'number'
      console.log(5 * '4'); // => 20 <- 'number'
      console.log('5' - '4'); // =>  1 (Typ: number)
      console.log('5' - 4); // =>  1 (Typ: number)
      console.log(5 - '4'); // =>  1 (Typ: number)
      console.log('5' / '4'); // =>  1.25 (Typ: number)
      console.log('5' / 4); // =>  1.25 (Typ: number)
      console.log(5 / '4'); // =>  1.25 (Typ: number)
      console.log(5 % '4'); // =>  1 (Typ: number)
      console.log('5' ** '2'); // => 25 (Typ: number)
      // Aufpassen bei + (Verkettung oder Addition)
      console.log(3 + 4); // => 7 <- 'number'
      console.log('3' + '4'); // => '34' <- 'string'
      console.log('3' + 4); // => '34' <- 'string'
      console.log(3 + '4'); // => '34' <- 'string'
      console.log('5€' - 4); //=> NaN - Not a Number <- (Typ: number)
      console.log('16px' * 2); //=> NaN - Not a Number <- (Typ: number)
      console.log('16 weitere Zeichen außer Ziffern' * 2); //=> NaN - Not a Number <- (Typ: number)
      console.log('   45   ' * 2); //=> 90 <- (Typ: number)
      console.log(typeof NaN); //=> 'number'
      // =======
      console.log(typeof 'hello' * 4); // => 'string' * 4 -> NaN <- (Typ: Number)
      console.log(typeof 'hello' + 4); // => 'string' + 4 -> 'string4' <- (Typ: string)
      console.log('b' + 'a' + +'a' + 'a'); // => 'baNaNa'
    </script>
  </body>
 </html>
--- a/01_grundlagen/unterricht/tag04/03_explizite-typkonvertierung.html
+++ b/01_grundlagen/unterricht/tag04/03_explizite-typkonvertierung.html
@@ -0,0 +1,53 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Explizite Typkonvertierung</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>Explizite Typkonvertierung</h1>
        <div class="output alert alert-secondary my-3"></div>
      </div>
    </main>
    <script>
      'use strict';
      const outputEl = document.querySelector('.output');
      // explizite Typkonvertierung Number('string');
      const price1 = Number(prompt('Price of article 1?'));
      const price2 = Number(prompt('Price of article 2?'));
      const price3 = Number(prompt('Price of article 3?'));
      const result = `total: $${price1 + price2 + price3}`;
      console.log(result);
      outputEl.textContent = result;
      // ======
      console.log(Number('     300  ')); //=> 300 <- number
      console.log(Number('hello')); //=> NaN <- number
      console.log(Number('3px')); //=> NaN <- number
      console.log(parseInt('3px')); //=> 3 <- number
      console.log(parseFloat('3.5rem')); //=> 3.5 <- number
      console.log(String(1)); //=> '1' <- string
      console.log((1).toString()); //=> '1' <- string
      console.log(String(3.5)); //=> '3.5' <- string
      console.log(Boolean(1)); //=> true <- boolean
      console.log(Boolean(0)); //=> false <- boolean
      console.log(Boolean(undefined)); //=> false <- boolean
      console.log(Boolean('')); //=> false <- boolean
      console.log(Boolean('Befüllter String')); //=> true <- boolean
    </script>
  </body>
 </html>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Philippe Torrel	6292cabfee		2026-07-10 09:33:29 +02:00
Philippe Torrel	0eb2262295		2026-07-10 09:09:52 +02:00
Philippe Torrel	7f12902b23		2026-07-09 14:33:21 +02:00
Philippe Torrel	fb85aad1ae		2026-07-09 13:54:36 +02:00
Philippe Torrel	d57dbdb801	weather-box	2026-07-09 12:09:07 +02:00
Philippe Torrel	046f3d6a0d		2026-07-09 08:43:52 +02:00
Philippe Torrel	ca1fc24268		2026-07-08 16:02:08 +02:00
Philippe Torrel	199d580016		2026-07-08 11:55:05 +02:00
Philippe Torrel	cc3dc382ed		2026-07-07 14:35:23 +02:00
Philippe Torrel	6f382f30ec		2026-07-07 14:29:00 +02:00
Philippe Torrel	f583bf92a3		2026-07-07 10:29:34 +02:00
Philippe Torrel	f3ca79e09b		2026-07-06 16:18:31 +02:00
Philippe Torrel	ee4d6f0d41		2026-07-06 14:25:41 +02:00
Philippe Torrel	549233f42a		2026-07-06 10:36:25 +02:00
Philippe Torrel	3578c15a45		2026-07-06 09:11:46 +02:00
Philippe Torrel	1b7f884cc6		2026-07-03 15:30:26 +02:00
Philippe Torrel	f0e8aaa79c		2026-07-03 14:04:45 +02:00
Philippe Torrel	ddaae120a7	feat: webseite-js	2026-07-03 13:07:49 +02:00
Philippe Torrel	9a1be89bd8		2026-07-03 10:22:02 +02:00
Philippe Torrel	f0dd230fe9		2026-07-02 13:11:49 +02:00
Philippe Torrel	253411f3c9		2026-07-01 16:14:16 +02:00
Philippe Torrel	19226bfae7		2026-07-01 15:45:57 +02:00
Philippe Torrel	894ec73605		2026-07-01 14:45:54 +02:00
Philippe Torrel	faccb4ef34		2026-07-01 11:14:39 +02:00
Philippe Torrel	2dbadb9c4f		2026-07-01 09:40:35 +02:00
Philippe Torrel	f642829cb1	added uebungen 1 - 10	2026-06-30 15:02:55 +02:00
Philippe Torrel	41efb8a5ab		2026-06-30 14:56:20 +02:00
Philippe Torrel	a83ec66c07	Update agenda	2026-06-30 08:26:40 +02:00
Philippe Torrel	c8a1f2d7f1		2026-06-29 15:04:39 +02:00
Philippe Torrel	7d567b5069		2026-06-29 12:06:46 +02:00
Philippe Torrel	31c13250b0	new class js -advanced	2026-06-29 11:35:03 +02:00
Philippe Torrel	ee8a87bf2a		2026-06-26 15:33:18 +02:00
Philippe Torrel	8b439649b5		2026-06-26 15:05:09 +02:00
Philippe Torrel	d24e33bfd2		2026-06-26 15:01:56 +02:00
Philippe Torrel	0e70223ff6		2026-06-26 10:32:59 +02:00
Philippe Torrel	878c0f7c6b		2026-06-25 15:15:51 +02:00
Philippe Torrel	70794eab31		2026-06-25 13:11:36 +02:00
Philippe Torrel	db2ec6838a		2026-06-25 10:35:17 +02:00
Philippe Torrel	ccff1b73d6		2026-06-24 18:59:34 +02:00
Philippe Torrel	3d73f1617b		2026-06-24 15:06:38 +02:00
Philippe Torrel	3da605979d		2026-06-23 15:00:23 +02:00
Philippe Torrel	ae62a154b3		2026-06-23 14:26:45 +02:00
Philippe Torrel	7c76b37a32		2026-06-23 12:07:27 +02:00
Philippe Torrel	51db0e14da		2026-06-23 09:54:56 +02:00
Philippe Torrel	9e7d4cc4ca		2026-06-22 14:48:45 +02:00
Philippe Torrel	a7461f3573		2026-06-22 14:40:35 +02:00
Philippe Torrel	781b2c357b		2026-06-22 10:34:57 +02:00
Philippe Torrel	eefc30fa85		2026-06-22 09:48:04 +02:00
Philippe Torrel	6bbdbae77d		2026-06-19 23:06:26 +02:00
Philippe Torrel	0274fe9e1d		2026-06-19 14:46:36 +02:00
Philippe Torrel	fd77df4e3b		2026-06-19 12:55:46 +02:00
Philippe Torrel	7cbd3bef3b		2026-06-19 10:33:44 +02:00
Philippe Torrel	91406bd7f1		2026-06-19 08:16:21 +02:00
Philippe Torrel	fa05e2f2d4		2026-06-18 14:34:01 +02:00
Philippe Torrel	99c26159ea		2026-06-18 14:12:13 +02:00
Philippe Torrel	28c0a44ead		2026-06-18 10:49:04 +02:00
Philippe Torrel	a1b0051a0b		2026-06-18 10:46:31 +02:00
Philippe Torrel	86e9bcea64	Added: Exercises	2026-06-17 14:45:58 +02:00
Philippe Torrel	3c618cf1e0		2026-06-17 12:09:33 +02:00
Philippe Torrel	31dbf03808		2026-06-17 11:44:52 +02:00
Philippe Torrel	1903c9fcf7		2026-06-17 11:00:40 +02:00
Philippe Torrel	f39de9f3b4		2026-06-17 10:03:52 +02:00
Philippe Torrel	bc36251c36		2026-06-16 16:15:03 +02:00
Philippe Torrel	1647e6cac7		2026-06-16 15:42:48 +02:00
Philippe Torrel	cc1fabab3e		2026-06-16 12:55:18 +02:00
Philippe Torrel	922ce17e30	update: day2	2026-06-16 11:51:14 +02:00
Philippe Torrel	efb2bf5f94	Update	2026-06-16 11:11:33 +02:00
Philippe Torrel	2c0c63aa75	Update: Docs and day1	2026-06-15 16:08:09 +02:00
Philippe Torrel	e8fd37cce0	Added linksammlung	2026-06-15 15:06:21 +02:00
Philippe Torrel	86b34462e4	init files	2026-06-15 13:26:07 +02:00
Philippe Torrel	8acb4d571b	Update: Readme	2026-06-15 08:08:49 +02:00
Philippe Torrel	1475a24716	Update Agenda	2026-06-14 23:43:45 +02:00