02_advanced/uebungen/u01_transform-name/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
   <head>
     <meta charset="UTF-8" />
@@ -24,12 +24,14 @@
     <script>
       'use strict';
 
-      let logTransformedName = (firstName, lastName) => {
+      const logTransformedName = ({ firstName, lastName }) => {
         console.log(`${lastName}, ${firstName.charAt(0)}.`);
       };
-      logTransformedName('Ladislaus', 'Jones');
 
-      // TODO: Übergabe von einem Objekt
+      logTransformedName({
+        firstName: 'Ladislaus',
+        lastName: 'Jones',
+      });
     </script>
   </body>
 </html>

02_advanced/uebungen/u02_distance/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
   <head>
     <meta charset="UTF-8" />
@@ -24,6 +24,17 @@
     </main>
     <script>
       'use strict';
+
+      const distance = ({ x: xOrigin, y: yOrigin }, { x: xDestination, y: yDestination }) => {
+        return Math.sqrt((yDestination - yOrigin) ** 2 + (xDestination - xOrigin) ** 2);
+      };
+
+      const getDistance = (origin, target) => {
+        return Math.sqrt((target.y - origin.y) ** 2 + (target.x - origin.x) ** 2);
+      };
+
+      console.log(distance({ x: 1, y: 1 }, { x: 5, y: 1 })); // => 4
+      console.log(getDistance({ x: 1, y: 1 }, { x: 5, y: 1 })); // => 4
     </script>
   </body>
 </html>

02_advanced/uebungen/u03_profile-card/index.html

@@ -34,16 +34,84 @@
           </div>
           <!-- ▲ /card ▲ -->
         </div>
+
+        <div class="output alert alert-secondary my-3">
+          <div class="row"></div>
+        </div>
       </div>
     </main>
     <script>
       'use strict';
 
+      const outputEl = document.querySelector('.output');
+
       const person1 = { firstName: 'John', lastName: 'Wick', age: 51, hobbies: ['guns', 'dogs', 'cars'] };
       const person2 = { firstName: 'Jane', lastName: 'Doe', age: 23 };
       const person3 = { firstName: 'Joe', lastName: 'Doe' };
 
-      // your code
+      const generatePersonData = ({ firstName = '[FIRSTNAME]', lastName = '[LASTNAME]', hobbies = [], age }) => {
+        let html = '<div class="card mb-3">';
+        html += '<div class="card-body">';
+        html += `<h5 class="card-title">${firstName} ${lastName}</h5>`;
+
+        if (!!age) {
+          html += `<p class="card-text">Person is ${age} years old.</p>`;
+        }
+
+        if (hobbies.length > 0) {
+          html += `<p class="card-text">Person has the following hobbies:</p>`;
+          html += '</div>';
+          html += '<ul class="list-group list-group-flush">';
+
+          hobbies.forEach((hobby) => {
+            html += `<li class="list-group-item">${hobby}</li>`;
+          });
+
+          html += '</ul>';
+        } else {
+          html += '</div>';
+        }
+
+        html += '</div>';
+
+        return html;
+      };
+
+      // const generatePersonData2 = ({ firstName = '[FIRSTNAME]', lastName = '[LASTNAME]', hobbies = [], age }) => {
+      //   let html = `<div class="card mb-3">
+      //   <div class="card-body">
+      //   <h5 class="card-title">${firstName} ${lastName}</h5>
+      //   ${!!age ? `<p class="card-text">Person is ${age} years old.</p>`: ''}
+      //   ${(hobbies.length > 0) ? `<p class="card-text">Person has the following hobbies:</p></div>`
+      //     html += '<ul class="list-group list-group-flush">';
+
+      //     hobbies.forEach((hobby) => {
+      //       html += `<li class="list-group-item">${hobby}</li>`;
+      //     });
+
+      //     html += '</ul>';
+      //   } else {
+      //     html += '</div>';
+      //   }
+
+      //   html += '</div>';
+
+      //   return html;
+      // };
+
+      const createProfileCard = (personObj) => {
+        const cardHtml = generatePersonData(personObj);
+
+        const cardContainer = document.createElement('div');
+        cardContainer.classList.add('col-12', 'col-md-4');
+
+        cardContainer.insertAdjacentHTML('beforeend', cardHtml);
+        outputEl.querySelector('.row').appendChild(cardContainer);
+      };
+
+      createProfileCard(person1);
+      createProfileCard(person2);
+      createProfileCard(person3);
     </script>
   </body>
 </html>

02_advanced/uebungen/u04_countdown-btn/index.html

@@ -72,6 +72,31 @@
     </main>
     <script>
       'use strict';
+
+      const SETTINGS = {
+        countdown: 5, // Countdown in Sekunden
+      };
+
+      const button = document.querySelector('.button-send');
+      const buttonText = button.textContent;
+
+      const buttonCountdown = (countdown) => {
+        if (countdown === 0) {
+          button.textContent = buttonText;
+          button.disabled = false;
+        } else {
+          button.textContent = `${countdown}...`;
+
+          setTimeout(() => buttonCountdown(--countdown), 1000);
+          //
+        }
+      };
+
+      button.addEventListener('click', () => {
+        button.disabled = true;
+
+        buttonCountdown(SETTINGS.countdown);
+      });
     </script>
   </body>
 </html>

02_advanced/uebungen/u05_sum-rekursiv/index.html

@@ -1,10 +1,11 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Übung 5: Summe einer Zahlenreihe rekursiv berechnen</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/lodash@4.18.1/lodash.min.js"></script>
   </head>
   <body>
     <main>
@@ -28,12 +29,33 @@
     <script>
       'use strict';
 
-      const sumRecursive = (n) => {};
+      const sumRecursive = (n) => {
+        // Basisfall
+        if (n === 0) {
+          return 0;
+        }
+
+        return n + sumRecursive(n - 1); // Rekursion
+      };
+
+      const sumReduce = (n) => {
+        const numbers = _.range(1, n + 1); // => [1,2,3,4,5]
+        return numbers.reduce((sum, n) => sum + n, 0);
+      };
 
       // Test Cases
+
+      console.log(_.range(5)); // => [0,1,2,3,4]
+      console.log(_.range(2, 5)); // => [2,3,4]
+      console.log(_.range(2, 10, 2)); // => [2,4,6,8]
+
       console.log(sumRecursive(5)); // => 15 (5 + 4 + 3 + 2 + 1)
       console.log(sumRecursive(10)); // => 55 (10 + 9 + 8 + 7 + 6 + 5 + 4 + 3 + 2 + 1)
       console.log(sumRecursive(0)); // => 0
+
+      console.log(sumReduce(5)); // => 15
+      console.log(sumReduce(10)); // => 55
+      console.log(sumReduce(0)); // => 0
     </script>
   </body>
 </html>

02_advanced/uebungen/u06_binomialkoeffizienten/index.html

@@ -40,7 +40,13 @@
       'use strict';
 
       const combinations = (n, k) => {
-        //  combinations(n - 1, k - 1) + combinations(n - 1, k);
+        if (k === 0 || k === n) {
+          return 1;
+        }
+        if (k > n) {
+          return 0;
+        }
+        return combinations(n - 1, k - 1) + combinations(n - 1, k);
       };
 
       // Test Cases

02_advanced/uebungen/u07_string-rekursiv/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
   <head>
     <meta charset="UTF-8" />
@@ -18,7 +18,26 @@
     <script>
       'use strict';
 
-      const reverseString = (str) => {};
+      // const recurse = (str, nr) => {
+      //   if (nr < 0) {
+      //     return '';
+      //   }
+
+      //   return str.charAt(nr) + recurse(str, nr - 1);
+      // };
+
+      // const reverseString = (str) => {
+      //   return recurse(str, str.length - 1);
+      // };
+
+      function reverseString(str) {
+        // Base case: if the string has only one character, return it
+        if (str.length <= 1) {
+          return str;
+        }
+        // Recursive case: return the last character of the string and call the function with the rest of the string
+        return reverseString(str.slice(1)) + str[0];
+      }
 
       // Test cases
       console.log(reverseString('hello')); // => "olleh"

02_advanced/uebungen/u08_max-rekursiv/index.html

@@ -22,7 +22,26 @@
     <script>
       'use strict';
 
-      const findMax = (arr) => {};
+      const findMax2 = (arr) => {
+        if (arr.length === 0) return null;
+
+        return Math.max(...arr);
+      };
+
+      const findMax = (arr) => {
+        if (arr.length === 1) {
+          return arr[0];
+        }
+        if (arr.length === 0) {
+          return null;
+        }
+        if (arr[arr.length - 1] > arr[0]) {
+          arr.unshift(arr[arr.length - 1]);
+        }
+
+        arr.pop();
+        return findMax(arr);
+      };
 
       // Test cases
       console.log(findMax([1, 5, 3, 9, 2])); // => 9

02_advanced/uebungen/u09_level-rekursiv/index.html

@@ -21,10 +21,28 @@
     <script>
       'use strict';
 
-      const findDeepestLevel = (arr, currentLevel = 1) => {};
+      const findDeepestLevel = (arr, currentLevel = 1) => {
+        return arr.reduce((max, element) => {
+          const level = Array.isArray(element) ? findDeepestLevel(element, currentLevel + 1) : currentLevel;
+
+          return max > level ? max : level;
+        }, currentLevel);
+      };
 
       // Test cases
-      console.log(findDeepestLevel([1, [2, [3, [4]], 5]])); // => 4
+      console.log(
+        findDeepestLevel([
+          1, //
+          [
+            2, //
+            [
+              3, //
+              [4],
+            ],
+            5,
+          ],
+        ]),
+      ); // => 4
       console.log(findDeepestLevel([1, 2, 3, 4, 5])); // => 1
       console.log(findDeepestLevel([])); // => 1
       console.log(findDeepestLevel([1, [2], [3, [4, [5]]]])); // => 4

02_advanced/unterricht/tag12/02_csv-to-obj.html

@@ -27,9 +27,9 @@
       const convertCsvToObj = (csv = '') => {
         const rows = csv.split('\n'); // => ['name, category, price', 'Klingon Letter Opener, Office Warfare, 19.99',...]
 
-        const headerRow = rows.shift().split(/\s*,\s*/);
+        const headerFields = rows.shift().split(/\s*,\s*/);
 
-        console.log(headerRow); // => ['name', 'category', 'price']
+        console.log(headerFields); // => ['name', 'category', 'price']
 
         const productRows = rows
           .map((row) => row.trim()) // "white spaces" der Strings werden entfernt
@@ -60,7 +60,8 @@
       const products = convertCsvToObj(productsCsv);
 
       // output
-      console.log(products);
+      console.log(JSON.stringify(products, null, 2)); // JSON String
+      console.log(products); // Produkte Array
 
       outputEl.innerHTML = `<ol>${products
         .map((product) => {

02_advanced/unterricht/tag12/09_rekursion-fakultaet.html

@@ -30,7 +30,7 @@
       const calcFactorialWithWhile = () => {};
 
       // Test cases
-      console.log(calcFactorial(5)); // => 120
+      console.log(calcFactorial(5)); // => 5! = 5 * 4 * 3 * 2 * 1 = 120
       console.log(calcFactorial(3)); // => 6
       console.log(calcFactorial(0)); // => 1