01_grundlagen/agenda.md

@@ -144,7 +144,7 @@ Lektion 10 erarbeiten
 
 **Übungen:**
 
-Übung 39 - 48
+Übung 39 - 45 + optionale Übung 
 
 ---
 

01_grundlagen/index.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></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>

01_grundlagen/uebungen/o02_palindrom.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>

01_grundlagen/uebungen/u39_sort-stadt-land-fluss.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>

01_grundlagen/uebungen/u40_map-lueckentext.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]
       //

01_grundlagen/uebungen/u41_tranformierte-ladislaus.html

@@ -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
+      // Vornamen in Initialen umwandeln und mit dem Nachnamen verbinden.
-      const transformName = (firstNames = [], lastName) => {
+      const transformName = (firstNames = [], lastName = '') => {
-        /* TODO: do it */
+        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) => {
+      formTransformEl.addEventListener('submit', (event) => {
-        e.preventDefault();
+        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>

01_grundlagen/uebungen/u42_filter-boardgames.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>

01_grundlagen/uebungen/u43_filter-results.html

@@ -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((n) => n % 2 === 0);
-      results = inputs.filter();
 
       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>

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>
-
-        <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 lottoNumbers = [16, 10, 2, 12, 1, 33];
+  console.log('lotto', lottoNumbers);
 
-      // Array Methode - ar.sort(compareFn)
+  // Array Methode - arr.sort(compareFn)
+  const numericSorted = [...lottoNumbers].sort((a, b) => {
+    console.log(`${a} - ${b} = ${a - b}`);
+    return a - b;
+  });
+
+  console.log(numericSorted); // => [ 1, 2, 10, 12, 16, 33 ]
+
+  outputEl.textContent = numericSorted.join(' - '); // => 1 - 2 - 10 - 12 - 16 - 33
 </script>
-  </body>
-</html>

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