2026-09-10 09:05:08 +02:00
parent 94333161a4
commit 74f6ed1720
5 changed files with 113 additions and 3 deletions
--- a/01_grundlagen/uebungen/u12b_prompt-lieblingsessen.html
+++ b/01_grundlagen/uebungen/u12b_prompt-lieblingsessen.html
@@ -0,0 +1,103 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Übung 12: Mit prompt das Lieblingsessen erfragen</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-3">
+          <h1>Übung 12: Mit prompt das Lieblingsessen erfragen</h1>
+
+          <ol>
+            <li>
+              Fragen Sie den Benutzer nach seinem Lieblingsessen und seinem Lieblingsgetränk und speichern Sie beides in
+              passend benannte Variablen.
+            </li>
+            <li>
+              Verwenden Sie beide Variablen in einem Satz, den Sie über die Konsole ausgeben. Verketten Sie dabei die
+              Variablen mithilfe des Verkettungsoperators mit den restlichen Satzteilen .
+            </li>
+            <li>
+              Führen Sie die letzte Übung noch einmal durch, aber verwenden Sie dieses Mal Template String
+              Substitutions.
+            </li>
+            <li>
+              Wenn Sie ganz fleißig sind, können Sie als dritte Variante noch austesten, wie sich beide Varianten in der
+              gleichen Ausgabe verwenden lassen.
+            </li>
+          </ol>
+        </div>
+
+        <form name="userFavs">
+          <div class="row mb-3">
+            <div class="col-6">
+              <div class="form-floating">
+                <input type="text" class="form-control" name="userMeal" id="userMeal" />
+                <label for="userMeal">Lieblingsessen</label>
+              </div>
+            </div>
+
+            <div class="col-6">
+              <div class="form-floating">
+                <input type="text" class="form-control" name="userDrink" id="userDrink" />
+                <label for="userDrink">Lieblingsgetränk</label>
+              </div>
+            </div>
+          </div>
+
+          <div class="row justify-content-center">
+            <div class="col-4 text-center">
+              <button type="submit" class="btn btn-primary">Bestellen</button>
+            </div>
+          </div>
+        </form>
+
+        <div class="alert alert-success my-3 output-a invisible"></div>
+        <div class="alert alert-danger my-3 output-b invisible"></div>
+        <div class="alert alert-warning my-3 output-c invisible"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const outputAEl = document.querySelector('.output-a');
+      const outputBEl = document.querySelector('.output-b');
+      const outputCEl = document.querySelector('.output-c');
+
+      const userForm = document.forms.userFavs;
+
+      userForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+
+        const favMeal = userForm.userMeal.value;
+        const favDrink = userForm.userDrink.value;
+
+        if (favMeal === '' || favDrink === '') {
+          return;
+        }
+
+        outputAEl.classList.remove('invisible');
+        outputBEl.classList.remove('invisible');
+        outputCEl.classList.remove('invisible');
+
+        outputAEl.innerText =
+          'Salut User. Dein Lieblingsmahl ist also ' +
+          favMeal +
+          '? Und ' +
+          favDrink +
+          ' dein Lieblingsgetränk? ... Hm, naja, jedem das Seine...';
+
+        outputBEl.innerText = `User 1234 wurde mit Lieblingsspeise ${favMeal} und Lieblingsgedränk ${favDrink} registiert. Sie werden jetzt zum Bezahlungsprozess weitergeführt. Die Ausgabe der gewünschten Speisen ist optional und nicht garantiert. Einen schönen Tag noch! Beep`;
+
+        outputCEl.innerText =
+          `Mein Lieblingsmahl ist ${favMeal} und mein Lieblingsgetränk ist ` +
+          favDrink +
+          ` und es ist mir scheißegal was ihr darüber denkt!!!111`;
+      });
+    </script>
+  </body>
+</html>