2026-09-18 09:47:31 +02:00
parent 67d5a1dc16
commit 968ebe05bd
10 changed files with 170 additions and 72 deletions
@@ -144,7 +144,7 @@ Lektion 10 erarbeiten

 **Übungen:**

-Übung 39 - 48
+Übung 39 - 45 + optionale Übung 

 ---

@@ -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></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></h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+      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',
+      ];
+
+      outputEl.innerHTML = ''; // output Element leeren
+
+      letters.forEach((letter) => {
+        // Guard
+        if (getItemsByLetter(letter, products).length === 0) return;
+
+        console.log(`======= ${letter} ========`);
+        console.log(getItemsByLetter(letter, products).join('\n'));
+        console.log('==========================');
+
+        outputEl.innerHTML += `<h3 class="text-center">${letter}</h3>`;
+        outputEl.innerHTML += `<ul class="list-group"><li class="list-group-item">${getItemsByLetter(letter, products).join('</li><li class="list-group-item">')}</li></ul>`;
+        outputEl.innerHTML += '<hr />';
+      });
+    </script>
+  </body>
+</html>
@@ -36,10 +36,53 @@
            <li>Leerzeichen und Satzzeichen sollen ignoriert werden.</li>
          </ul>
        </div>
+
+        <form name="palindrom">
+          <div class="row align-items-center">
+            <div class="col-auto">
+              <label for="input-text">String</label>
+            </div>
+            <div class="col">
+              <input type="text" name="input-text" id="input-text" class="form-control" />
+            </div>
+
+            <div class="col">
+              <button type="submit" class="btn btn-primary">Check</button>
+            </div>
+          </div>
+        </form>
+
+        <div class="output alert alert-secondary my-3"></div>
      </div>
    </main>
    <script>
      'use strict';
+
+      const outputEl = document.querySelector('.output');
+      const form = document.forms['palindrom'];
+      const textEl = form['input-text'];
+      const letters = 'abcdefghijklmnopqrstuvwxyz';
+
+      const isPalindrom = (text) => {
+        // alle nicht buchstaben aussortieren
+        const textArray = text
+          .toLowerCase()
+          .split('')
+          .filter((string) => letters.includes(string));
+
+        return textArray.join('') === [...textArray].reverse().join('');
+      };
+
+      form.addEventListener('submit', (e) => {
+        e.preventDefault();
+
+        if (textEl.value.length < 2) {
+          outputEl.innerText = 'Text muss mindestens 2 Zeichen lang sein';
+          return;
+        }
+
+        outputEl.innerText = `"${textEl.value}" ist ${isPalindrom(textEl.value) ? '' : 'k'}ein Palindrom`;
+      });
    </script>
  </body>
 </html>
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
@@ -46,8 +46,12 @@
      const rivers = ['Bode', 'Brahmaputra', 'Beuvron', 'Black River', 'Belaja'];

      // Sortieren nach Länge
+      const sortByLength = (category) => category.sort((a, b) => b.length - a.length);
+      //console.log(category);

-      // TODO: do it
+      outputElA.textContent = sortByLength(cities).join(', ');
+      outputElB.textContent = sortByLength(countries).join(', ');
+      outputElC.textContent = sortByLength(rivers).join(', ');
    </script>
  </body>
 </html>
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
@@ -24,11 +24,11 @@
      let inputs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

      //double
-      results = inputs.map();
+      results = inputs.map((n) => n * 2);
      console.log(results); // => [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]

      //squares
-      results = inputs.map();
+      results = inputs.map((n) => n * n);

      console.log(results); // => [1, 4, 9, 16, 25, 36, 49, 64, 81, 100]
      //
@@ -70,26 +70,31 @@
      'use strict';

      const formTransformEl = document.querySelector('.form-transform');
-      const intputFirstname = formTransformEl.querySelector('input[name="firstname"]');
-
+      const inputFirstNames = 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 */
+      // Vornamen in Initialen umwandeln und mit dem Nachnamen verbinden.
+      const transformName = (firstNames = [], lastName = '') => {
+        const initials = firstNames
+          .filter((str) => str.trim() !== '')
+          .map((str) => `${str.trim()[0].toUpperCase()}.`)
+          .join(' ');
+
+        const formattedLastName = lastName.charAt(0).toUpperCase() + lastName.substring(1).toLowerCase();
+        return `${initials} ${formattedLastName}`.trim();
      };

-      formTransformEl.addEventListener('submit', (e) => {
-        e.preventDefault();
+      formTransformEl.addEventListener('submit', (event) => {
+        event.preventDefault();

-        const firstNames = intputFirstname.value.trim().split(' ');
+        const firstNames = inputFirstNames.value.trim().split(/\s+/);
        const lastName = inputLastname.value.trim();

        outputEl.textContent = transformName(firstNames, lastName);
      });

-      outputEl.textContent = transformName(['Ladislaus', 'Coolio', 'Barry'], 'Jones');
+      outputEl.textContent = transformName(['Ladislaus', 'Coolio', 'Barry', ''], 'Jones');
    </script>
  </body>
 </html>
@@ -22,8 +22,8 @@
    </main>
    <script>
      'use strict';
-      const outputEl = document.querySelector('.output');

+      const outputEl = document.querySelector('.output');
      const videogames = ['Far Cry', 'Among Us'];

      const boardgames = [
@@ -43,9 +43,20 @@
      ];

      const boardgamesStartingWithF = boardgames.filter((name) => {
-        /* TODO: do it */
+        return name.charAt(0).toUpperCase().startsWith('F');
      });

+      const getListByLetter = (letter, list = [], caseSensitive = true) => {
+        const listFiltered = list.filter((name) => {
+          const firstLetter = name.charAt(0);
+
+          return caseSensitive ? firstLetter.startsWith(letter) : firstLetter.toUpperCase().startsWith(letter);
+        });
+        return listFiltered;
+      };
+
+      console.log(getListByLetter('F', boardgames, true));
+      console.log(getListByLetter('F', videogames));
      console.log(boardgamesStartingWithF); //=> ['Funny Friends', 'Fauna', 'Fairy Tale', 'Fast Flowing Forest Fellers', 'Fearsome Floors']
    </script>
  </body>
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
@@ -31,14 +31,13 @@
      let result;

      //1. even numbers
-
-      results = inputs.filter();
+      results = inputs.filter((n) => n % 2 === 0);

      console.log(results); // => [2, 4, 6, 8, 10]

      //2. names ending with letter 'e' or 'a'

-      results = names.filter();
+      results = names.filter((name) => name.endsWith('a') || name.endsWith('e'));

      console.log(results); // => [ 'Friedlinde', 'Tusnelda',

@@ -46,9 +45,13 @@

      const wordAr = text.split(' ');

-      result = wordAr.filter();
+      result = wordAr.filter((word) => word.length >= 3);
+      // result = text
+      //   .split(' ')
+      //   .filter((word) => word.length >= 3)
+      //   .join(' ');

-      console.log(result); // => 'this short text'
+      console.log(result.join(' ')); // => 'this short text'
    </script>
  </body>
 </html>
@@ -1,51 +1,18 @@
-<!doctype html>
-<html lang="de">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Array - ar.sort(compareFn)</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.sort(compareFn)</h1>
-        <hr />
-        <img
-          src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Bubble-sort-example-300px.gif"
-          alt="Bubble sort"
-          class="img-thumbnail" />
-        <hr />
-        <p>
-          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">
-            ar.sort(compareFn)
-          </a>
-          - Die <strong>sort()</strong> Methode sortiert die Elemente eines Arrays <code>in-place</code> und gibt das
-          Array zurück. Standardmäßig werden alle Elemente in Strings umgewandelt und dann anhand ihrer UTF-16
-          Codepoints miteinander verglichen.
-        </p>
-        <div class="alert alert-warning">
-          Das angesprochene Array wird durch <code>in-place-mutation</code> ebenfalls sortiert.
-        </div>
+<script>
+  'use strict';

-        <hr />
-        <h3>Rückgabewerte der Vergleichfunktion:</h3>
-        <ul class="list">
-          <li>Rückgabewert 0: Positionen bleiben stehen</li>
-          <li>Rückgabewert &lt; 0: Positionen bleiben stehen</li>
-          <li>Rückgabewert &gt; 0: Positionen vertauscht</li>
-        </ul>
-        <div class="output alert alert-secondary my-3"></div>
-      </div>
-    </main>
-    <script>
-      'use strict';
+  const outputEl = document.querySelector('.output');

-      const outputEl = document.querySelector('.output');
+  const lottoNumbers = [16, 10, 2, 12, 1, 33];
+  console.log('lotto', lottoNumbers);

-      const lottoNumbers = [16, 10, 2, 12, 1, 33];
+  // Array Methode - arr.sort(compareFn)
+  const numericSorted = [...lottoNumbers].sort((a, b) => {
+    console.log(`${a} - ${b} = ${a - b}`);
+    return a - b;
+  });

-      // Array Methode - ar.sort(compareFn)
-    </script>
-  </body>
-</html>
+  console.log(numericSorted); // => [ 1, 2, 10, 12, 16, 33 ]
+
+  outputEl.textContent = numericSorted.join(' - '); // => 1 - 2 - 10 - 12 - 16 - 33
+</script>
@@ -78,14 +78,23 @@
        // console.log(getItemsByLetter('d', products));

        const letters = 'abcdefghijklmnopqrstuvwxyz'.toUpperCase().split('');
+        let htmlBuffer = '';

        letters.forEach((letter) => {
-          if (getItemsByLetter(letter, products).length === 0) return;
+          const productsByLetter = getItemsByLetter(letter, products);
+
+          if (productsByLetter.length === 0) return;

          console.log(`== ${letter} ==`);
-          console.log(getItemsByLetter(letter, products).join(', '));
+          console.log(productsByLetter.join(', '));
+
+          htmlBuffer += `<h2>${letter}</h2>`;
+          htmlBuffer += `<ul><li>${productsByLetter.join('</li><li>')}</li></ul>`;
+          htmlBuffer += `<hr/>`;
        });

+        outputEl.innerHTML = htmlBuffer;
+
        console.log('-------');
        // Optionale Parameter von forEach ========================