02_advanced/unterricht/tag12/06_rekursion.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 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)}`;
+
+      outputEl.textContent = text;
+    </script>
+  </body>
+</html>

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 = typeof rndN === 'undefined' ? Math.floor(Math.random() * 10) + 1 : rndN;
+        const userGuess = Number(prompt(`Round: ${round}\nGuess a number between 1 - 10.\nYour guess?`));
+
+        console.log(rndNumber);
+        // Basisfall
+        if (userGuess > rndNumber) {
+          alert('Your guess was too high.\n Guess again.');
+          return guessNumber(rndNumber, ++round); // Rekursion
+        } else if (userGuess < rndNumber) {
+          alert('Your guess was too low.\n Guess again.');
+          return guessNumber(rndNumber, ++round); // Rekursion
+        }
+
+        return `Your guess: ${userGuess} is correct in round ${round}`;
+      };
+
+      outputEl.textContent = guessNumber();
+    </script>
+  </body>
+</html>

02_advanced/unterricht/tag12/08_rekursion-rate-zahl-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 mit "closure" Function</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 mit "closure" Function</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;
+        let round = 1;
+
+        const guessNumber = () => {
+          const userGuess = Number(prompt(`Round: ${round}\nGuess a number between 1 - 10.\nYour guess?`));
+
+          console.log(rndNumber);
+          // Basisfall
+          if (userGuess > rndNumber) {
+            alert('Your guess was too high.\n Guess again.');
+            round++;
+            return guessNumber(); // Rekursion
+          } else if (userGuess < rndNumber) {
+            round++;
+            alert('Your guess was too low.\n Guess again.');
+            return guessNumber(); // Rekursion
+          }
+
+          return `Your guess: ${userGuess} is correct in round ${round}`;
+        };
+
+        return guessNumber();
+      };
+      outputEl.textContent = startGuessGame();
+    </script>
+  </body>
+</html>