01_grundlagen/uebungen/u19-u20-quiz-1.html

@@ -96,9 +96,38 @@
       const QUESTION_1 = 'Which Operators has the higher priority: * or + ?';
       const SOLUTION_1 = '*';
 
-      // 1.Als ersten Schritt fragen Sie den Spieler nach seinem Namen, speichern diesen in eine Variable und begrüßen ihn mittels einer Alert-Box.
+      const QUESTION_2 = "What's the German word for if";
+      const SOLUTION_2A = 'wenn';
+      const SOLUTION_2B = 'falls';
 
+      // 1.Als ersten Schritt fragen Sie den Spieler nach seinem Namen, speichern diesen in eine Variable und begrüßen ihn mittels einer Alert-Box.
+      const name = prompt('Wie heißen Sie?');
+      alert(`Hallo ${name}`);
       // 2.Stellen Sie dem Spieler die Frage, ob er sich fit genug fühlt, um gegen das dunkle JavaScript anzutreten. Es ist sinnvoll, bei der Frage die Antwortmöglichkeiten anzugeben.
+      const fitness = prompt('Fühlen Sie sich fit genug, um gegen das dunkle JavaScript anzutreten. ja oder nein?');
+      if (fitness === 'ja') {
+        alert('Das Spiel startet! Gib alles !');
+        let answer = prompt(QUESTION_1);
+        if (answer === SOLUTION_1) {
+          alert('Gratulation');
+          let answer = prompt(QUESTION_2);
+          if (answer === SOLUTION_2A || answer === SOLUTION_2B) {
+            alert('Gratulation');
+            let answer = prompt('Now, please enter a string with a length between 8 and 15 characters…');
+            if (answer.length >= 8 && answer.length <= 15) {
+              alert('Gratulation');
+            } else {
+              alert('Das war falsch!');
+            }
+          } else {
+            alert('Das war falsch!');
+          }
+        } else {
+          alert('Das war falsch!');
+        }
+      } else if (fitness === 'nein') {
+        alert('Go Home');
+      }
 
       // 3.Nun kann es losgehen. Stellen Sie den Spieler vor seine erste Aufgabe.
     </script>

01_grundlagen/uebungen/u21_schaltjahr.html

@@ -37,8 +37,42 @@
     <script>
       'use strict';
 
-      const year = Number(prompt('please enter year:'));
+      const year = Number(prompt('Gib ein Jahr ein:'));
       const outputEl = document.querySelector('.output');
+
+      if (year % 400 === 0) {
+        console.log(`${year} ist ein Schaltjahr.`);
+      } else if (year % 100 === 0) {
+        console.log(`${year} ist KEIN Schaltjahr.`);
+      } else if (year % 4 === 0) {
+        console.log(`${year} ist ein Schaltjahr.`);
+      } else {
+        console.log(`${year} ist KEIN Schaltjahr.`);
+      }
+
+      // if (year % 400 === 0) {
+      //   outputEl.innerHTML = `${year} ist ein Schaltjahr.`;
+      // } else if (year % 100 === 0) {
+      //   outputEl.innerHTML = `${year} ist KEIN Schaltjahr.`;
+      // } else if (year % 4 === 0) {
+      //   outputEl.innerHTML = `${year} ist ein Schaltjahr.`;
+      // } else {
+      //   outputEl.innerHTML = `${year} ist KEIN Schaltjahr.`;
+      // }
+
+      const checkOne = year % 400 === 0;
+      const checkTwo = year % 100 !== 0 && year % 4 === 0;
+      let output = '';
+
+      // if (checkOne || checkTwo) {
+      //   output = `${year} ist ein Schaltjahr!`;
+      // } else {
+      //   output = `${year} ist kein Schaltjahr`;
+      // }
+
+      // outputEl.innerText = output;
+
+      outputEl.textContent = checkOne || checkTwo ? `${year} ist ein Schaltjahr!` : `${year} ist kein Schaltjahr`;
     </script>
   </body>
 </html>

01_grundlagen/unterricht/tag07/01_logischer-operator-oder.html

@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Logischer Operator - oder (||)</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>Logischer Operator - oder (||)</h1>
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const outputEl = document.querySelector('.output');
+
+      const productAgeInDays = Number(prompt('Product age in days?'));
+      const quantityOfCartItem = Number(prompt('Quantity of the item?'));
+
+      // let discountPercentage = 0;
+
+      // if (quantityOfCartItem >= 3 || productAgeInDays <= 30) {
+      //   discountPercentage = 5;
+      // }
+
+      // prettier-ignore
+      const discountPercentage = (quantityOfCartItem >= 3 || productAgeInDays <= 30) ? 5 : 0;
+
+      const text = `Current discount: ${discountPercentage}%`;
+
+      console.log(text);
+      outputEl.textContent = text;
+    </script>
+  </body>
+</html>

01_grundlagen/unterricht/tag07/02_logischer-operator-oder-short-breakout.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Logischer Operator - oder (||) - short circuit breakout</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>Logischer Operator - oder (||) - short circuit breakout</h1>
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const zahl = 4 || 2; // JS interpretiert nicht die "rechte" Seite, da die Gleichung bereits mit "4" erfüllt ist. Interpreter bricht nach dem "oder" (||) die Befehlzeile ab. (short circuit breakout)
+
+      console.log(zahl); // => 4
+
+      const zahl2 = false || 2;
+
+      console.log(zahl2); // => 2
+
+      const zahl3 = '' || 4;
+
+      console.log(zahl3); // => 4
+
+      const zahl4 = '10.5' || null;
+
+      console.log(zahl4); // => '10.5'
+
+      const outputEl = document.querySelector('.output') || console.warn('Element existiert nicht');
+    </script>
+  </body>
+</html>

01_grundlagen/unterricht/tag07/03_logischer-operator-und.html

@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Logischer Operator - und (&&)</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>Logischer Operator - und (&&)</h1>
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const outputEl = document.querySelector('.output');
+
+      const numberOfOrders = Number(prompt('How many orders has the customer placed so far?'));
+      const cartTotal = Number(prompt("What is the cart's total?"));
+
+      // let discountPercentage = 0;
+
+      // if (cartTotal >= 100 && numberOfOrders === 0) {
+      //   discountPercentage = 7;
+      // }
+
+      // prettier-ignore
+      const discountPercentage = (cartTotal >= 100 && numberOfOrders === 0) ? 7 : 0;
+
+      const text = `Current discount: ${discountPercentage}%`;
+
+      console.log(text);
+      outputEl.textContent = text;
+    </script>
+  </body>
+</html>

01_grundlagen/unterricht/tag07/04_logischer-operator-und-short-breakout.html

@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Logischer Operator - und (&&) - short circuit breakout</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>Logischer Operator - und (&&) - short circuit breakout</h1>
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const zahl = 4 && 2;
+
+      console.log(zahl); // => 2
+
+      const zahl2 = false && 2; // JS interpretiert nicht die "rechte" Seite, da die Gleichung bereits mit false nicht erfüllt ist. Interpreter bricht nach dem "und" (&&) die Befehlzeile ab. (short circuit breakout)
+
+      console.log(zahl2); // => false
+
+      const zahl3 = '' && 4;
+
+      console.log(zahl3); // => ''
+
+      const zahl4 = '10.5' && null;
+
+      console.log(zahl4); // => null
+
+      const outputEl =
+        document.querySelector('.output') && (document.querySelector('.output').style.border = '2px solid tomato');
+    </script>
+  </body>
+</html>

01_grundlagen/unterricht/tag07/05_unaerer-operator.html

@@ -0,0 +1,79 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Unärer Operator - not (!)</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>Unärer Operator - not (!)</h1>
+        <p>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Logical_NOT">
+            The logical NOT
+          </a>
+          Der logische NICHT (!) (logische Komplementierung, Negation) Operator wandelt Wahrheit in Falschheit und
+          umgekehrt. Er wird typischerweise mit booleschen (logischen) Werten verwendet. Wenn er mit nicht-booleschen
+          Werten verwendet wird, gibt er <code>false</code> zurück, wenn sein einzelner Operand in
+          <code>true</code> umgewandelt werden kann; andernfalls wird <code>true</code> zurückgegeben.
+        </p>
+        <!-- button.btn.btn-dark.button-click{Schalter status: }>span -->
+        <button class="btn btn-dark button-click mb-3">Schalter status: <span></span></button>
+
+        <div class="mb-3">
+          <input
+            type="text"
+            name="number"
+            id="input-number"
+            class="form-control input-number"
+            placeholder="Insert a number... " />
+        </div>
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const outputEl = document.querySelector('.output');
+      const btnClickEl = document.querySelector('.button-click');
+      const statusEl = btnClickEl.querySelector('span');
+      const inputNumberEl = document.querySelector('.input-number');
+
+      let toggle = false;
+
+      btnClickEl.addEventListener('click', (e) => {
+        console.log(e);
+
+        // wenn toggle nicht erfüllt ist (false)
+        // if (!toggle) {
+        //   toggle = true;
+        // } else {
+        //   // ansonsten
+        //   toggle = false;
+        // }
+
+        // toggle = !toggle ? true : false;
+
+        toggle = !toggle; // => !(false) -> true | !(true) -> false
+
+        statusEl.textContent = toggle ? 'on' : 'off';
+      });
+
+      inputNumberEl.addEventListener('input', (e) => {
+        const val = inputNumberEl.value; // e.target.value
+
+        console.log('val:', val, typeof val);
+
+        // if (!isNaN(val)) {
+        //   outputEl.textContent = `${val} is a number`;
+        // } else {
+        //   outputEl.textContent = `${val} is NOT a number`;
+        // }
+
+        outputEl.textContent = !isNaN(val) ? `${val} is a number` : `${val} is NOT a number`;
+      });
+    </script>
+  </body>
+</html>

01_grundlagen/unterricht/tag07/06_str-index-of.html

@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>String.indexOf() | String.lastIndexOf()</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>String.indexOf() | String.lastIndexOf()</h1>
+        <hr />
+        <h2>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf"
+            >String.indexOf()</a
+          >
+        </h2>
+        <p>
+          Die <strong>indexOf()</strong> Methode gibt den Index der Zeichenkette innerhalb des aufrufenden String
+          Objekts des ersten Vorkommnis des angegebenen Wertes beginnend bei fromIndex zurück. Gibt
+          <strong>-1</strong> zurück, wenn der Wert nicht gefunden wurde.
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const name = 'Ladislaus Jones';
+
+      // String - Eigenschaft str.length
+
+      console.log(name.length); // => 15
+
+      // String - Methode - str.indexOf('searchValue')
+
+      console.log(name.indexOf(' ')); // => 9
+
+      console.log(name.indexOf('L')); // => 0
+      console.log(name.indexOf('laus')); // => 5
+
+      console.log(name.indexOf('a')); // => 1
+      console.log(name.indexOf('A')); // => -1 <- Zeichenkettenabfolge wurde nicht gefunden
+      console.log(name.indexOf('Y')); // => -1 <- Zeichenkettenabfolge wurde nicht gefunden
+
+      //=====================
+      // String - Methode str.indexOf('searchValue' [, position]) - optionaler Parameter
+
+      console.log('name.indexOf("a", 2): ', name.indexOf('a', 2)); // => 6
+
+      // Strign - Methode str.lastIndexOf('searchValue')
+
+      console.log(name.lastIndexOf('a')); // => 6
+      console.log(name.lastIndexOf('s')); // => 14
+    </script>
+  </body>
+</html>

01_grundlagen/unterricht/tag07/07_str-substring.html

@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>String.substring(startIndex, endIndex)</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>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/substring">
+            String.substring(startIndex, endIndex)
+          </a>
+        </h1>
+        <p>
+          Die <strong>substring()</strong> Methode gibt einen Teilstring eines Strings zwischen einem Index und einem
+          anderen (EndIndex), oder dem Ende der Zeichenkette zurück...
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const name = 'Ladislaus Jones';
+      const spacePosition = name.indexOf(' '); // => 9
+      const firstName = name.substring(0, spacePosition); // => 'Ladislaus'
+      const lastName = name.substring(spacePosition + 1);
+
+      console.log(firstName); // => 'Ladislaus'
+      console.log(lastName); // => 'Jones'
+
+      // String - Methode str.substring(startIndex, endIndex)
+
+      const str = 'Mozilla';
+
+      console.log(str.substring(1, 2)); // => 'o'
+      console.log(str.substring(3)); // => 'illa'
+
+      console.log(str.substring(2, 5)); // => 'zil'
+
+      console.log('lorem ipsum'.substring(2, 5)); // => 'rem'
+
+      console.log('lorem ipsum'.substring(5, 2)); // => 'rem'
+
+      // Bei negativer Zahl wird mit 0 gerechnet
+      console.log('lorem ipsum'.substring(-4)); // => 'lorem ipsum'
+
+      console.log('lorem ipsum'.substring(999)); // => ''
+      console.log('lorem ipsum'.substring(-999)); // => 'lorem ipsum'
+    </script>
+  </body>
+</html>

01_grundlagen/unterricht/tag07/08_str-substr.html

@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>String.substr(startIndex, length) DEPRECATED</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>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/substr"
+            >String.substr(startIndex, length) DEPREACATED</a
+          >
+        </h1>
+        <p>
+          Die <code>substr()</code>-Methode von String-Werten gibt einen Teil dieses Strings zurück, beginnend am
+          angegebenen Index und wird um eine bestimmte Anzahl von Zeichen verlängert.
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const name = 'Ladislaus Jones';
+      const spacePosition = name.indexOf(' '); // => 9
+      const firstName = name.substr(0, spacePosition); // => 'Ladislaus'
+      const lastName = name.substr(spacePosition + 1);
+
+      console.log(firstName); // => 'Ladislaus'
+      console.log(lastName); // => 'Jones'
+
+      // String - Methode str.substr(startIndex, length)
+
+      const str = 'Mozilla';
+
+      console.log(str.substr(1, 2)); // => 'oz'
+      console.log(str.substr(3)); // => 'illa'
+
+      console.log(str.substr(2, 5)); // => 'zilla'
+
+      console.log('lorem ipsum'.substring(2, 5)); // => 'rem'
+      console.log('lorem ipsum'.substr(2, 5)); // => 'rem i'
+
+      console.log('lorem ipsum'.substring(5, 2)); // => 'rem'
+      console.log('lorem ipsum'.substr(5, 2)); // => ' i'
+
+      // Bei negativer Zahl wird (str.length - WERT) gerechnet
+      console.log('lorem ipsum'.substr(-4)); // => 'psum'
+
+      console.log('https://dummyimage.com/200x300/000/fff.jpg'.substr(-4)); // => '.jpg'
+
+      console.log('lorem ipsum'.substr(999)); // => ''
+      console.log('lorem ipsum'.substr(-999)); // => 'lorem ipsum'
+    </script>
+  </body>
+</html>