2026-06-24 15:06:38 +02:00
parent 3da605979d
commit 3d73f1617b
33 changed files with 1359 additions and 69 deletions
--- a/01_grundlagen/uebungen/u34-tranformed-ladislaus.html
+++ b/01_grundlagen/uebungen/u34-tranformed-ladislaus.html
@@ -0,0 +1,92 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Übung 34: Der transformierte Ladislaus, Teil 3</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">
+          <h1>Übung 34: Der transformierte Ladislaus, Teil 3</h1>
+          <p>
+            Schreiben Sie eine Funktion <code>transformName</code>, die Vor- und Nachname als Parameter entgegennimmt
+            und einen String der Form
+          </p>
+          <p>
+            <code>&lt;Nachname&gt;, &lt;Anfangsbuchstabe des Vornamens&gt;.</code>
+          </p>
+        </div>
+        <h3 class="mt-3">Formular:</h3>
+        <form class="form-transform">
+          <div class="row">
+            <div class="col-12 col-sm-6">
+              <div class="mb-3">
+                <label class="form-label" for="input-firstname">Vorname:</label>
+                <input
+                  type="text"
+                  class="form-control"
+                  name="firstname"
+                  id="input-firstname"
+                  placeholder="Vorname eingeben..." />
+              </div>
+            </div>
+            <div class="col-12 col-sm-6">
+              <div class="mb-3">
+                <label class="form-label" for="input-lastname">Nachname:</label>
+                <input
+                  type="text"
+                  class="form-control"
+                  name="lastname"
+                  id="input-lastname"
+                  placeholder="Nachname eingeben..." />
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col">
+              <div class="mb-3">
+                <!-- <input type="submit" value="Transform name" class="btn btn-dark input-transform" /> -->
+
+                <button type="submit" class="btn btn-dark button-transform button">Transform name</button>
+                <button type="reset" class="btn btn-danger button-transform button">resetted</button>
+              </div>
+            </div>
+          </div>
+        </form>
+        <h3 class="mt-3">Transformierter Name:</h3>
+        <div class="output alert alert-secondary"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const formTransformEl = document.querySelector('.form-transform');
+      const outputEl = document.querySelector('.output');
+      const inputFirstnameEl = document.querySelector('input[name="firstname"]');
+      const inputLastnameEl = document.querySelector('input[name="lastname"]');
+
+      // Funktionsdefinition
+      const transformName = (firstName, secondName) => {
+        const tName = `${secondName.charAt(0).toUpperCase() + secondName.substr(1).toLowerCase()}, ${firstName.charAt(0).toUpperCase()}.`;
+        return tName;
+      };
+
+      formTransformEl.addEventListener('submit', (e) => {
+        e.preventDefault();
+
+        const name = transformName(inputFirstnameEl.value, inputLastnameEl.value);
+        outputEl.textContent = name;
+      });
+
+      // =====
+      console.log(transformName('Max', 'Mustermann')); //=> 'Mustermann, M.'
+      console.log(transformName('Max', 'Power'));
+      console.log(transformName('adEL', 'jabaRkHel'));
+      console.log(transformName('kAHlEel', 'johNson'));
+      console.log(transformName('andreAs', 'rohLedEr'));
+    </script>
+  </body>
+</html>