2026-09-17 14:38:37 +02:00
parent 1e045985be
commit 67d5a1dc16
10 changed files with 506 additions and 0 deletions
@@ -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 optional 02: 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>Übung 02 optional: 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';
    </script>
  </body>
 </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 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'];
      // Sortieren nach Länge
      // TODO: do it
    </script>
  </body>
 </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 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();
      console.log(results); // => [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
      //squares
      results = inputs.map();
      console.log(results); // => [1, 4, 9, 16, 25, 36, 49, 64, 81, 100]
      //
    </script>
  </body>
 </html>
@@ -0,0 +1,95 @@
 <!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">
          <h3 class="mt-2">Transformierter Name:</h3>
          <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) => {
        /* TODO: do it */
      };
      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>
@@ -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 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 boardgamesStartingWithF = boardgames.filter((name) => {
        /* TODO: do it */
      });
      console.log(boardgamesStartingWithF); //=> ['Funny Friends', 'Fauna', 'Fairy Tale', 'Fast Flowing Forest Fellers', 'Fearsome Floors']
    </script>
  </body>
 </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 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();
      console.log(results); // => [2, 4, 6, 8, 10]
      //2. names ending with letter 'e' or 'a'
      results = names.filter();
      console.log(results); // => [ 'Friedlinde', 'Tusnelda',
      //3. words with at least three letters
      const wordAr = text.split(' ');
      result = wordAr.filter();
      console.log(result); // => 'this short text'
    </script>
  </body>
 </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 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 <code>getDigitSum</code>, 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>
      </div>
    </main>
    <script>
      'use strict';
      const number = 4566;
      const getDigitSum = (n) => {};
      console.log(getDigitSum(4242)); //=> 12
      console.log(getDigitSum('13')); //=> 4
      //========
    </script>
  </body>
 </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>Ü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>getDigitSum</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>
    </main>
    <script>
      'use strict';
      const numbers = [99, 5, 8, 12, 111, 123];
      const getDigitSum = (n) => {};
      const 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>
@@ -0,0 +1,97 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Array - ar.reduce()</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>Array - ar.reduce()</h1>
        <p>
          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce">
            ar.reduce()
          </a>
          - Die <strong>reduce()</strong>-Methode reduziert ein Array auf einen einzigen Wert, indem es jeweils zwei
          Elemente (von links nach rechts) durch eine gegebene Funktion reduziert.
        </p>
        <div class="alert alert-warning">side-effect-free</div>
        <div class="alert alert-secondary output"></div>
      </div>
    </main>
    <script>
      'use strict';
      (() => {
        const outputEl = document.querySelector('.output');
        const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
        const names = [
          'Florian', //
          'Benjamin',
          'Christian',
          'Stefan',
          'Philippe',
          'Kaumon',
        ];
        const products = [
          'Game of Thrones Wax Seal Coasters',
          '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',
        ];
        const cartItemPrices = [9.99, 19.99, 5.99];
        // Array Methode - ar.reduce((value1, value2 [, index] [, array]) => {...}, initialValue)
        const totalPrice = cartItemPrices.reduce((a, b) => {
          return a + b;
        }); // => 35.7
        console.log([1, 2, 3, 4, 5].reduce((n1, n2) => n1 + n2)); // => 15
        console.log([5].reduce((n1, n2) => n1 + n2)); // => 5
        // console.log([].reduce((n1, n2) => n1 + n2)); // => Uncaught TypeError: Reduce of empty array with no initial value
        // reduce mit Initialwert (RECOMMENDED)
        console.log([].reduce((n1, n2) => n1 + n2, 0)); // => 0
        // =======
        console.log([1, 5, 10].reduce((n1, n2) => Number(n1) + Number(n2), 10)); // => 26
        console.log([1, 5, 10].reduce((sum, n) => sum + Number(n), 0)); // => 16
        console.log('-------');
        // Optionale Parameter von forEach ========================
        // Array Methode - ar.names((value1, value2 [, index [, array] ]) => {}, initialValue)
        names.reduce((str, name, idx, ar) => {
          console.log(`String: ${str}, Name: ${name}, Index: ${idx}, Array: ${ar.join(', ')}`);
          return str + ' - ' + name;
        }, '');
      })();
    </script>
  </body>
 </html>