01_grundlagen/unterricht/tag09/04_ar-sort-compare-fn.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>

01_grundlagen/unterricht/tag09/08_ar-for-each.html

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