From 41efb8a5ab99e33dd089afd9c9470cd454855da2 Mon Sep 17 00:00:00 2001
From: Philippe Torrel <webmaster@gkontra.de>
Date: Tue, 30 Jun 2026 14:56:20 +0200
Subject: [PATCH]

---
 02_advanced/unterricht/tag11/01_objekte.html  |   4 +-
 .../unterricht/tag11/03_objekte-mit-this.html |  15 ++-
 .../unterricht/tag12/01_csv-to-obj.html       |  69 +++++++++++
 .../unterricht/tag12/02_destructuring.html    | 110 ++++++++++++++++++
 .../tag12/03_destructuring-with-object.html   |  64 ++++++++++
 .../04_destructuring-with-rest-operator.html  |  61 ++++++++++
 .../05_destructuring-in-paramerterliste.html  |  33 ++++++
 .../unterricht/tag12/06_rekursion.html        |  42 +++++++
 .../tag12/07_rekursion-rate-zahl.html         |  41 +++++++
 .../tag12/08_rekursion-mit-closure.html       |  49 ++++++++
 .../tag12/09_rekursion-fakultaet.html         |  37 ++++++
 .../tag12/10_rekursion-fibonacci.html         |  64 ++++++++++
 .../tag12/11_rekursion-sum-ohne-reduce.html   |  46 ++++++++
 .../unterricht/tag12/data/products.csv        |   4 +
 14 files changed, 635 insertions(+), 4 deletions(-)
 create mode 100644 02_advanced/unterricht/tag12/01_csv-to-obj.html
 create mode 100644 02_advanced/unterricht/tag12/02_destructuring.html
 create mode 100644 02_advanced/unterricht/tag12/03_destructuring-with-object.html
 create mode 100644 02_advanced/unterricht/tag12/04_destructuring-with-rest-operator.html
 create mode 100644 02_advanced/unterricht/tag12/05_destructuring-in-paramerterliste.html
 create mode 100644 02_advanced/unterricht/tag12/06_rekursion.html
 create mode 100644 02_advanced/unterricht/tag12/07_rekursion-rate-zahl.html
 create mode 100644 02_advanced/unterricht/tag12/08_rekursion-mit-closure.html
 create mode 100644 02_advanced/unterricht/tag12/09_rekursion-fakultaet.html
 create mode 100644 02_advanced/unterricht/tag12/10_rekursion-fibonacci.html
 create mode 100644 02_advanced/unterricht/tag12/11_rekursion-sum-ohne-reduce.html
 create mode 100644 02_advanced/unterricht/tag12/data/products.csv

diff --git a/02_advanced/unterricht/tag11/01_objekte.html b/02_advanced/unterricht/tag11/01_objekte.html
index 32b8409..14282ca 100644
--- a/02_advanced/unterricht/tag11/01_objekte.html
+++ b/02_advanced/unterricht/tag11/01_objekte.html
@@ -29,7 +29,7 @@
       const ar = [];
       const ar2 = new Array(); // oder Array()
 
-      const str = ''; // "" | ```
+      const str = ''; // "" | ``
       const str2 = new String(); // oder String();
 
       const zahl = 123;
@@ -49,6 +49,7 @@
       console.log(typeof str); // 'string' - Objekt vom Typ String
       console.log(typeof false); // 'boolean' - Objekt vom Typ Boolean
       console.log(typeof zahl); // 'number' - Objekt vom Typ Number
+      console.log(typeof Infinity); // 'number' - Objekt vom Typ Number
       console.log(typeof NaN); // 'number' - Objekt vom Typ Number
       console.log(typeof (() => {})); // 'function' - Objekt vom Typ Function
       console.log(typeof undefined); // undefined
@@ -81,6 +82,7 @@
       };
 
       // Object.freeze(personObj);
+      // personObj.lastname = 'Wock';
 
       personObj.hairColor = 'Braun';
 
diff --git a/02_advanced/unterricht/tag11/03_objekte-mit-this.html b/02_advanced/unterricht/tag11/03_objekte-mit-this.html
index c568a58..39e33e6 100644
--- a/02_advanced/unterricht/tag11/03_objekte-mit-this.html
+++ b/02_advanced/unterricht/tag11/03_objekte-mit-this.html
@@ -75,6 +75,14 @@
         lauf: () => {
           return 'Person läuft';
         },
+        // sayHello: function () {
+        //   console.log(`${this.firstName} ${this.lastName} says "Hi"`);
+        // },
+        // Kurzschreibweise von  "sayHello: function () {"
+        sayHello() {
+          console.log(`${this.firstName} ${this.lastName} says "Hi"`);
+        },
+
         schiess: () => {
           console.log('pew pew');
         },
@@ -87,6 +95,7 @@
       console.log(personObj);
       console.log(personObj.lauf()); // => 'Person läuft'
       console.log(personObj.schiess());
+      console.log(personObj.sayHello());
 
       console.log(personObj.age); // => 45
 
@@ -120,13 +129,13 @@
         },
 
         // run: () => {
-        //   console.log(this); // window
-        //   console.log(`${this.fullName} is running!`);
+        //   console.log(this); // window - keine neue Referenz
+        //   console.log(`${this.fullName} is running!`); // undefined is running
         // },
 
         // run: function () {
         //   console.log(this); // person - Object
-        //   console.log(`${this.fullName} is running!`);
+        //   console.log(`${this.fullName} is running!`); // 'Ben Stiller' is running
         // },
 
         run() {
diff --git a/02_advanced/unterricht/tag12/01_csv-to-obj.html b/02_advanced/unterricht/tag12/01_csv-to-obj.html
new file mode 100644
index 0000000..2c20df4
--- /dev/null
+++ b/02_advanced/unterricht/tag12/01_csv-to-obj.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CSV to Obj mit destructuring</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>CSV to Obj mit destructuring</h1>
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const outputEl = document.querySelector('.output');
+
+      const productsCsv = `name, category, price
+      Klingon Letter Opener, Office Warfare, 19.99
+      Backpack of Holding, Travel, 29.99
+      Tardis Alarmclock, Merchandise, 15.99
+      `;
+
+      // Funktionen
+      const convertCsvToObj = (csv = '') => {
+        const rows = csv
+          .split('\n') // => ['name, category, price', 'Klingon Letter...']
+          .slice(1) // => ['  Klingon Letter Opener, Office Warfare, 19.99', ...]
+          .map((row) => row.trim()) // "white spaces" des Strings werden entfernt
+          .filter((row) => row !== ''); // leere Einträge werden rausgefiltert
+
+        const ar = rows.map((row) => {
+          const fields = row.split(/\s*,\s*/); // => ['Klingon Letter Opener', 'Office Warfare', '19.99', ...]
+
+          // const name = fields[0];
+          // const category = fields[1];
+          // const price = fields[2];
+
+          // Destructuring von einem Array
+          const [name, category, price] = fields;
+
+          return {
+            // name: name,
+            // category: category,
+            name,
+            category,
+            price: Number(price),
+          };
+        });
+
+        // console.log(rows);
+        return ar;
+      };
+
+      const products = convertCsvToObj(productsCsv);
+
+      console.log(products);
+
+      outputEl.innerHTML = `<ol>${products
+        .map((product) => {
+          return `<li>Name: ${product.name} Price: <strong>${product.price.toFixed(2)}</strong></li>`;
+        })
+        .join('')}</ol>`;
+    </script>
+  </body>
+</html>
diff --git a/02_advanced/unterricht/tag12/02_destructuring.html b/02_advanced/unterricht/tag12/02_destructuring.html
new file mode 100644
index 0000000..5f0cd12
--- /dev/null
+++ b/02_advanced/unterricht/tag12/02_destructuring.html
@@ -0,0 +1,110 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Destructuring von Objekten und Arrays in JS</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>Destructuring von Objekten und Arrays in JS</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // Destructuring von Arrays =============
+      const mixedArray = ['Max', 'Mustermann', 33, true, 5, 22, 17, 45, 32, 2];
+
+      // const vorname = mixedArray[0];
+      // const nachname = mixedArray[1];
+      // const alter = mixedArray[2];
+      // const istRaucher = mixedArray[3];
+      // const lottoZahlen = mixedArray.slice(4);
+
+      const [vorname, nachname, alter, istRaucher, ...lottoZahlen] = mixedArray;
+
+      console.log(vorname); // => 'Max'
+
+      // Destructuring von Objekten =============
+
+      const personObj = {
+        firstName: 'John',
+        lastName: 'Wick',
+        age: 52,
+        hobbies: ['Gassi gehen', 'Ballern'],
+      };
+
+      // const firstName = personObj.firstName;
+      // const lastName = personObj.lastName;
+      // const age = personObj.age;
+      // const hobbies = personObj.hobbies;
+
+      // Existierende Eigenschaften können bei der Definition mit ":" direkt umbenannt werden
+      const { firstName, age, lastName, hobbies: sports, isGamer = true } = personObj;
+
+      console.log(firstName); // => 'John'
+      console.log(sports); // => ['Gassi gehen', 'Ballern']
+      console.log(isGamer); // => true
+      console.log(age); // => 52
+
+      // const Slider = (options) => {
+      //   if (options.controls) {
+      //     const nav = document.querySelector('nav');
+      //     nav.classList.add('controls');
+      //   }
+      //   // code logic
+      //   if (options.showDots) {
+      //     document.querySelector('.dots').classList.remove('show');
+      //   }
+
+      //   if (options.mode === 'gallery') {
+      //     // ...logic
+      //   } else if (options.mode === 'fade') {
+      //     // ...logic
+      //   } else if (options.mode === 'carousel') {
+      //     // ...logic
+      //   }
+      // };
+
+      const Slider = (options) => {
+        // Destructuring eines Objektes mit Defaultparametern und Umbenennung
+        const { controls = true, showDots: dots, mode = 'gallery', container: el } = options;
+
+        const slider = el; // options.container
+
+        if (controls) {
+          const nav = document.querySelector('nav');
+          nav.classList.add('controls');
+        }
+        // code logic
+        if (dots) {
+          document.querySelector('.dots').classList.remove('show');
+        }
+
+        if (mode === 'gallery') {
+          // ...logic
+        } else if (mode === 'fade') {
+          // ...logic
+        } else if (mode === 'carousel') {
+          // ...logic
+        }
+      };
+
+      Slider({
+        container: '.slider',
+        mode: 'gallery', // carousel | fade
+        controls: true,
+        showDots: false,
+      });
+
+      Slider({
+        container: '.slider',
+
+        showDots: false,
+      });
+    </script>
+  </body>
+</html>
diff --git a/02_advanced/unterricht/tag12/03_destructuring-with-object.html b/02_advanced/unterricht/tag12/03_destructuring-with-object.html
new file mode 100644
index 0000000..027c2ac
--- /dev/null
+++ b/02_advanced/unterricht/tag12/03_destructuring-with-object.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JS - Destructuring mit Objekten</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>JS - Destructuring mit Objekten</h1>
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // Deklaration
+      const outputEl = document.querySelector('.output');
+
+      const product = {
+        name: 'Klingon Letter Opener',
+        category: 'Office Warfare',
+        price: 19.99,
+      };
+
+      // Funktionen
+      // const formatProduct = (product) => {
+      //   return `- ${product.name} - buy now for only $${product.price.toFixed(2)}.`;
+      // };
+
+      // Destructuring eines Objektes
+      const formatProduct = (product) => {
+        const { name, price } = product;
+
+        return `- ${name} - buy now for only $${price.toFixed(2)}.`;
+      };
+
+      // Destructuring eines Objektes in der Parameterliste
+      const formatProduct2 = ({ name, price }) => {
+        return `- ${name} - buy now for only $${price.toFixed(2)}.`;
+      };
+
+      // Destructuring eines Objektes mit Umbennung
+      const formatProduct3 = (product) => {
+        const { name: productName, price: productPrice } = product; // zeigt Umbenennung. Umbennung in längere Bezeichnung ist jedoch unnötig
+
+        return `- ${productName} - buy now for only $${productPrice.toFixed(2)}.`;
+      };
+
+      // Destructuring eines Objektes mit Umbennung und Defaultparameter
+      const formatProduct4 = (product) => {
+        const { name: productName = 'no name', price: productPrice = 0 } = product; // zeigt Umbenennung. Umbennung in längere Bezeichnung ist jedoch unnötig
+
+        return `- ${productName} - buy now for only $${productPrice.toFixed(2)}.`;
+      };
+
+      // Ausgabe
+      console.log(formatProduct2(product));
+      outputEl.textContent = formatProduct4();
+    </script>
+  </body>
+</html>
diff --git a/02_advanced/unterricht/tag12/04_destructuring-with-rest-operator.html b/02_advanced/unterricht/tag12/04_destructuring-with-rest-operator.html
new file mode 100644
index 0000000..63bd3fa
--- /dev/null
+++ b/02_advanced/unterricht/tag12/04_destructuring-with-rest-operator.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JS - Destructuring mir Rest-Parameter (...)</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>JS - Destructuring mir Rest-Parameter (...)</h1>
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const outputEl = document.querySelector('.output');
+
+      const productAr = ['Klingon Letter Opener', 'Office Warfare', '19.99'];
+      const product = {
+        name: 'Klingon Letter Opener',
+        category: 'Office Warfare',
+        price: '19.99',
+      };
+
+      // Destructuring eines Array mit rest-operator
+      const [name, ...everythingElse] = productAr;
+
+      console.log('name: ', name);
+      console.log('everythingElse: ', everythingElse.join(' - '));
+
+      // Destructuring eines Objektes mit rest-operator
+      const { name: productName, ...restObj } = product;
+
+      console.log('productName: ', productName);
+      console.log('restObj', restObj); // => {category: 'Office Warfare', price: '19.99'}
+
+      // Destructuring eines Objektes mit rest-operator
+      const user = {
+        _id: 123,
+        firstName: 'Adel',
+        lastName: 'Jabarkhel',
+        username: 'Megaman',
+        password: 'topsecret',
+        data: [{ avatar: '', profilePic: '' }],
+      };
+
+      console.log(user);
+
+      const { password, ...newUser } = user;
+
+      console.log(newUser); // User Object ohne sensbile Daten (password)
+
+      for (const prop in newUser) {
+        outputEl.innerHTML += `${prop} : ${newUser[prop]} <br />`;
+      }
+    </script>
+  </body>
+</html>
diff --git a/02_advanced/unterricht/tag12/05_destructuring-in-paramerterliste.html b/02_advanced/unterricht/tag12/05_destructuring-in-paramerterliste.html
new file mode 100644
index 0000000..2a6c8be
--- /dev/null
+++ b/02_advanced/unterricht/tag12/05_destructuring-in-paramerterliste.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JS - Destructuring in der Parameterliste mit Defaultwerten</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>JS - Destructuring in der Parameterliste mit Defaultwerten</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // Destructuring in der Parameterliste mit Defaultwert (Object)
+      const foo = ({ a = 1, b = 2 } = { a: 3, b: 4 }) => `a: ${a}, b: ${b}`;
+
+      const foo2 = (obj = {}) => {
+        const { prop1 = 'wert', prop2 = 'wert2' } = obj;
+      };
+
+      console.log(foo({ a: 7 })); // => 'a: 7, b: 2'
+      console.log(foo({ b: 7 })); // => 'a: 1, b: 7'
+      console.log(foo({ a: 7, b: 8 })); // => 'a: 7, b: 8'
+
+      console.log(foo({})); // => 'a: 1, b: 2'
+      console.log(foo()); // => 'a: 3, b: 4'
+    </script>
+  </body>
+</html>
diff --git a/02_advanced/unterricht/tag12/06_rekursion.html b/02_advanced/unterricht/tag12/06_rekursion.html
new file mode 100644
index 0000000..04a05ff
--- /dev/null
+++ b/02_advanced/unterricht/tag12/06_rekursion.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Rekursion in JS</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>Rekursion in JS</h1>
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const outputEl = document.querySelector('.output');
+
+      // Funktionen
+      const getProductPrice = () => {
+        const price = Number(prompt('Please insert the product price.'));
+
+        // Basisfall
+        if (isNaN(price) || price < 0) {
+          console.warn('It is not a valid price.');
+          return getProductPrice(); // Rekursion
+        }
+
+        return price;
+      };
+
+      const price = getProductPrice();
+      const text = `Price: $${price.toFixed(2)}`;
+
+      // Ausgabe
+      console.log(text);
+      outputEl.textContent = text;
+    </script>
+  </body>
+</html>
diff --git a/02_advanced/unterricht/tag12/07_rekursion-rate-zahl.html b/02_advanced/unterricht/tag12/07_rekursion-rate-zahl.html
new file mode 100644
index 0000000..71c56dc
--- /dev/null
+++ b/02_advanced/unterricht/tag12/07_rekursion-rate-zahl.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Rekursion - Beispiel Zahl raten</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>Rekursion - Beispiel Zahl raten</h1>
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const outputEl = document.querySelector('.output');
+
+      const guessNumber = (rndN, round = 1) => {
+        const rndNumber = (!rndN) ? Math.floor(Math.random() * 10) + 1 : rndN; // prettier-ignore
+        console.log(rndNumber);
+        const userGuess = Number(prompt(`Round ${round}:Guess a number between 1 - 10.\nYour guess?`));
+
+        // Basisfall
+        if (userGuess > rndNumber) {
+          alert('Your guess was too high.\nGuess again.');
+          return guessNumber(rndNumber, ++round); // Rekursion
+        } else if (userGuess < rndNumber) {
+          alert('Your guess was too low.\nGuess again.');
+          return guessNumber(rndNumber, ++round); // Rekursion
+        }
+
+        return `Your guess: ${userGuess} is correct in round: ${round}`;
+      };
+
+      outputEl.textContent = guessNumber();
+    </script>
+  </body>
+</html>
diff --git a/02_advanced/unterricht/tag12/08_rekursion-mit-closure.html b/02_advanced/unterricht/tag12/08_rekursion-mit-closure.html
new file mode 100644
index 0000000..5b1cad7
--- /dev/null
+++ b/02_advanced/unterricht/tag12/08_rekursion-mit-closure.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Rekursion - Beispiel Zahl raten</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>Rekursion - Beispiel Zahl raten</h1>
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const outputEl = document.querySelector('.output');
+
+      // closure Function
+      const startGuessGame = () => {
+        const rndNumber =  Math.floor(Math.random() * 10) + 1; // prettier-ignore
+        let round = 1;
+
+        const guessNumber = () => {
+          console.log(rndNumber);
+          const userGuess = Number(prompt(`Round ${round}:Guess a number between 1 - 10.\nYour guess?`));
+
+          // Basisfall
+          if (userGuess > rndNumber) {
+            alert('Your guess was too high.\nGuess again.');
+            round++;
+            return guessNumber(); // Rekursion
+          } else if (userGuess < rndNumber) {
+            alert('Your guess was too low.\nGuess again.');
+            round++;
+            return guessNumber(); // Rekursion
+          }
+
+          return `Your guess: ${userGuess} is correct in round: ${round}`;
+        };
+
+        return guessNumber();
+      };
+      outputEl.textContent = startGuessGame();
+    </script>
+  </body>
+</html>
diff --git a/02_advanced/unterricht/tag12/09_rekursion-fakultaet.html b/02_advanced/unterricht/tag12/09_rekursion-fakultaet.html
new file mode 100644
index 0000000..93e2d83
--- /dev/null
+++ b/02_advanced/unterricht/tag12/09_rekursion-fakultaet.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>Rekursion Beispiel: Fakultät errechnen</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>Rekursion Beispiel: Fakultät errechnen</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const calcFactorial = (n) => {
+        // Base case
+        if (n === 0) {
+          return 1;
+        }
+
+        // Recursive case
+        return n * calcFactorial(n - 1); // =>  3 * (calcFactorial(2) ->) 2 *  (calcFactorial(1) ->) 1 * (calcFactorial(0)))  1 )
+      };
+
+      // TODO: mit while Schleife
+      const calcFactorialWithWhile = (n) => {};
+
+      // Test Cases:
+      console.log(calcFactorial(5)); //=> 120;
+      console.log(calcFactorial(3)); //=> 6
+      console.log(calcFactorial(0)); // => 1
+    </script>
+  </body>
+</html>
diff --git a/02_advanced/unterricht/tag12/10_rekursion-fibonacci.html b/02_advanced/unterricht/tag12/10_rekursion-fibonacci.html
new file mode 100644
index 0000000..c64c93f
--- /dev/null
+++ b/02_advanced/unterricht/tag12/10_rekursion-fibonacci.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Rekursion Beispiel: Fibonacci-Reihenfolge errechnen</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>Rekursion Beispiel: Fibonacci-Reihenfolge errechnen</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const fibonacci = (n) => {
+        // Base cases
+        if (n === 0) {
+          return 0;
+        }
+
+        if (n === 1) {
+          return 1;
+        }
+
+        // Recursive case
+        return fibonacci(n - 1) + fibonacci(n - 2);
+      };
+
+      // 0 + 1 = 1
+      // 1 + 1 = 2
+      // 2 + 1 = 3
+      // 3 + 2 = 5
+      // 3 + 5 = 8
+
+      // Test cases
+      console.log(fibonacci(0)); // => 0
+      console.log(fibonacci(1)); // => 1
+
+      console.log(fibonacci(2)); // => 1
+      console.log(fibonacci(3)); // => 2
+      console.log(fibonacci(4)); // => 3
+      console.log(fibonacci(5)); // => 5
+      console.log(fibonacci(6)); // => 8
+      console.log(fibonacci(7)); // => 13
+      console.log(fibonacci(8)); // => 21
+      console.log(fibonacci(10)); // => 55
+
+      // drawLine - mit char
+
+      const drawLine = (width, char = '*') => {
+        // Basisfall
+        if (width === 0) return '';
+
+        return char + drawLine(width - 1, char); // '🤡' + '🤡' + '🤡' + '🤡' + '🤡' + ''
+      };
+
+      console.log(drawLine(5, '🤡')); // => '🤡🤡🤡🤡🤡🤡'
+      console.log(drawLine(20, '🐣')); // => '🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣'
+    </script>
+  </body>
+</html>
diff --git a/02_advanced/unterricht/tag12/11_rekursion-sum-ohne-reduce.html b/02_advanced/unterricht/tag12/11_rekursion-sum-ohne-reduce.html
new file mode 100644
index 0000000..b45542f
--- /dev/null
+++ b/02_advanced/unterricht/tag12/11_rekursion-sum-ohne-reduce.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Rekursion Beispiel: Summe eine Arrays errechnen</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>Rekursion Beispiel: Summe eine Arrays errechnen</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const sumArray = (arr) => {
+        // Base case: when the array is empty, return 0
+        if (arr.length === 0) {
+          return 0;
+        }
+        // Recursive case: add the first element to the sum of the rest of the array
+        return arr[0] + sumArray(arr.slice(1)); // =>  1 +  [2, 3, 4, 5] -> 2 +  [3, 4, 5] -> 3 + [4, 5] -> 4 + [5] -> 5 + [] -> 0
+      };
+
+      const sumArrayReduce = (arr) => {
+        return arr.reduce((a, b) => a + b, 0);
+      };
+
+      const sumArrayWhile = (arr) => {
+        // TODO: while
+      };
+
+      // Test cases
+      console.time('rekursion');
+      console.log(sumArray([1, 2, 3, 4, 5])); // => 15
+      console.timeEnd('rekursion');
+
+      // Test cases
+      console.time('reduce');
+      console.log(sumArrayReduce([1, 2, 3, 4, 5])); // => 15
+      console.timeEnd('reduce');
+    </script>
+  </body>
+</html>
diff --git a/02_advanced/unterricht/tag12/data/products.csv b/02_advanced/unterricht/tag12/data/products.csv
new file mode 100644
index 0000000..88b1ce0
--- /dev/null
+++ b/02_advanced/unterricht/tag12/data/products.csv
@@ -0,0 +1,4 @@
+name, category, price
+Klingon Letter Opener, Office Warfare, 19.99
+Backpack of Holding, Travel, 29.99
+Tardis Alarmclock, Merchandise, 15.99