2026-06-23 09:54:56 +02:00
parent 9e7d4cc4ca
commit 51db0e14da
7 changed files with 155 additions and 9 deletions
--- a/01_grundlagen/uebungen/u19-20-22-darkside-quiz.html
+++ b/01_grundlagen/uebungen/u19-20-22-darkside-quiz.html
@@ -0,0 +1,88 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Übung 22: Die dunkle Seite schlägt zurück …</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">
+        <div class="alert alert-primary my-5">
+          <h2>Übung 22: Die dunkle Seite schlägt zurück …</h2>
+
+          <p>
+            Endlich setzt du deinen Kampf gegen die dunkle Seite von JS fort (siehe Übung 20) und erstellst zwei neue
+            »Kampf-Sequenzen«:
+          </p>
+          <p>»What's the German word for if« (Mehrere Lösungsmöglichkeiten: wenn, falls).</p>
+          <p>»Now, please enter a string with a length between 8 and 15 characters …«</p>
+        </div>
+        <div class="alert alert-primary">
+          <h2>Übung 23: Die dunkle Seite schlägt zurück…</h2>
+          <p>
+            Endlich setzen Sie Ihren Kampf gegen die dunkle Seite von JS fort (siehe Übung 20) und erstellen zwei neue
+            »Kampf-Sequenzen«:
+          </p>
+          <ul class="list">
+            <li>»What's the German word for if« (Mehrere Lösungsmöglichkeiten: wenn, falls).</li>
+            <li>»Now, please enter a string with a length between 8 and 15 characters…«</li>
+          </ul>
+        </div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const QUESTION_1 = 'Welcher Operator hat eine höhere Priorität: * oder + ?';
+      const SOLUTION_1 = '*';
+
+      const QUESTION_2 = 'Was ist das deutsche Wort für if?';
+      const SOLUTION_2_1 = 'wenn';
+      const SOLUTION_2_2 = 'falls';
+
+      const QUESTION_3 = 'Geben Sie bitte einen String mit einer Länge von 8 bis 15 Zeichen ein';
+      const SOLUTION_3_1 = 8;
+      const SOLUTION_3_2 = 15;
+
+      const outputEl = document.querySelector('.output');
+
+      const username = prompt('Bitte geben Sie ihren Vornamen ein: ');
+      alert(`Willkommen beim Spiel, die dunkle Seite von JS, ${username}!`);
+
+      const playerFitness = prompt(
+        `${username}, fühlen Sie sich bereit gegen die dunkle Seite von JS anzutreten? Bitte antworten Sie mit ja oder nein (y/n)`,
+      )
+        .trim()
+        .toLowerCase();
+
+      if (playerFitness === 'ja' || playerFitness === 'y') {
+        alert('Okay, mögen die Spiele beginnen');
+
+        const answer1 = prompt(QUESTION_1).trim().toLowerCase();
+        if (answer1 === SOLUTION_1) {
+          alert(`Richtige Antwort, ${username}! Die helle Seite ist stark in dir!`);
+        } else {
+          alert(`${username}, leider lagst du falsch. Die dunkle Seite von JS hat gewonnen!`);
+        }
+
+        const answer2 = prompt(QUESTION_2).trim().toLowerCase();
+        if (answer2 === SOLUTION_2_1 || answer2 === SOLUTION_2_2) {
+          alert(`Richtige Antwort, ${username}! Die helle Seite ist weiterhin stark in dir!`);
+        } else {
+          alert(`${username}, leider lagst du falsch. Die dunkle Seite wächst in dir!`);
+        }
+
+        const answer3 = Number(prompt(`${username}! ${QUESTION_3}`));
+        if (answer3.length >= SOLUTION_3_1 && answer3.length <= SOLUTION_3_2) {
+          alert(`Richtige Antwort, ${username}! Die helle Seite ist stark in dir!`);
+        } else {
+          alert(`${username}, leider lagst du falsch. Die dunkle Seite ist stark in dir!`);
+        }
+      } else {
+        alert(`${username}, die dunkle Seite ist stark in dir!`);
+      }
+    </script>
+  </body>
+</html>
--- a/01_grundlagen/uebungen/#u23_validierung-prompt.html
+++ b/01_grundlagen/uebungen/#u23_validierung-prompt.html
@@ -26,15 +26,38 @@
            </li>
          </ol>
        </div>
+        <div class="output alert alert-secondary my-3"></div>
      </div>
    </main>
    <script>
      'use strict';
-
+      const outputEl = document.querySelector('.output');
      // Aufgabe
      const firstName = prompt('Wilkommen. Wie heißen Sie mit Vornamen?');
      const lastName = prompt('Und mit Nachnamen??');
-      const favoriteHotDrink = prompt('Und was ist ihr liebstes Heißgetränk??? (tee | kaffee)');
+      const age = Number(prompt('Geben Sie ihr Alter an:'));
+      const favoriteHotDrink = prompt('Und was ist ihr liebstes Heißgetränk??? (k (Kaffee) | t (Tee)').toLowerCase();
+
+      let errorMsg = '';
+
+      if (firstName.length < 2 || firstName.length > 100) {
+        errorMsg += 'Der Vorname muss zwischen 2 und 100 Zeichen lang sein!\n';
+      }
+      if (lastName.length < 2 || lastName.length > 100) {
+        errorMsg += 'Der Nachname muss zwischen 2 und 100 Zeichen lang sein!\n';
+      }
+      if (age >= 150 || age <= 0) {
+        errorMsg += 'Das Alter muss unter 150 liegen und über 0 liegen\n';
+      }
+      if (favoriteHotDrink !== 'k' && favoriteHotDrink !== 't') {
+        errorMsg += 'Bitte Kaffee mit k und Tee mit t eingeben!\n';
+      }
+
+      if (errorMsg === '') {
+        outputEl.textContent = '<p>Alle Eingaben sind korrekt!</p>';
+      } else {
+        outputEl.innerHTML = errorMsg.replaceAll('\n', '<br />');
+      }
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/#u24_leap-year-2.html
+++ b/01_grundlagen/uebungen/#u24_leap-year-2.html
@@ -44,11 +44,32 @@

      const inputEl = document.querySelector('.input-year');
      const outputEl = document.querySelector('.output');
+      let isLeapYear = false;

      inputEl.addEventListener('input', (e) => {
-        const val = e.currentTarget.value;
+        const year = e.currentTarget.value;

-        // TODO: check if it is a leap year or not.
+        if (isNaN(year) || year <= 0) {
+          const errorMsg = 'Bitte geben Sie ein gültiges Jahr ein.';
+          console.log(errorMsg);
+          outputEl.textContent = errorMsg;
+        } else {
+          // wenn ganzzahlig durch 400 teilbar ist.
+          // oder (nicht ganzzahlig durch 100, aber ganzzahlig durch 4 teilbar ist).
+          if (year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0)) {
+            isLeapYear = true;
+          } else {
+            isLeapYear = false;
+          }
+
+          // isLeapYear = year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0);
+
+          const resultText = isLeapYear ? `${year} ist ein Schaltjahr!` : `${year} ist KEIN Schaltjahr`;
+
+          console.log(resultText);
+
+          outputEl.textContent = resultText;
+        }
      });
    </script>
  </body>
--- a/01_grundlagen/uebungen/#u25_suche-im-heuhaufen.html
+++ b/01_grundlagen/uebungen/#u25_suche-im-heuhaufen.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
@@ -41,6 +41,9 @@

      const text =
        'Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen Nadel Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen';
+
+      const position = text.indexOf('Nadel') + 1;
+      console.log(position);
    </script>
  </body>
 </html>
--- a/01_grundlagen/uebungen/#u26_vornamen-auslesen.html
+++ b/01_grundlagen/uebungen/#u26_vornamen-auslesen.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
@@ -27,6 +27,13 @@
      'use strict';

      const name = '  Ladislaus Coolio Jones   '.trim();
+      const spacePosition = name.lastIndexOf(' ');
+
+      const firstNames = name.substring(0, spacePosition);
+      const lastName = name.substring(spacePosition + 1);
+
+      console.log('lastname: ', lastName);
+      console.log('firstnames: ', firstNames);
    </script>
  </body>
 </html>