new class js -advanced

2026-06-29 11:35:03 +02:00
parent ee8a87bf2a
commit 31c13250b0
104 changed files with 2632 additions and 138 deletions
--- a/01_grundlagen/uebungen/u46_richtige-gewinner.html
+++ b/01_grundlagen/uebungen/u46_richtige-gewinner.html
@@ -0,0 +1,100 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Übung 46: Richtige Gewinner</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 46: Richtige Gewinner</h1>
+          <p>
+            Die Ausgabe der Gewinner aus dem letzten Beispiel (Codebeispiel 324) ist immer noch nicht ideal. Am Besten
+            wäre das folgende Ergebnis-Array:
+          </p>
+          <pre>
+            <code>
+  [
+    '1st place: Heribert',
+    '2nd place: Friedlinde',
+    '3rd place: Tusnelda',
+    'Oswine',
+    'Ladislaus',
+  ]
+            </code>
+          </pre>
+        </div>
+        <div class="output alert alert-secondary"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const outputEl = document.querySelector('.output');
+
+      const winners = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
+
+      // const PlaceWinner = () => {
+      //   console.log(winners());
+      // };
+
+      // Beispiel
+      const getWinners = (winners) => {
+        const results = [];
+        const restAr = [];
+        for (let i = 0; i < winners.length; i++) {
+          if (i === 0) {
+            results.push(`1st Place: ${winners[i]}`);
+          } else if (i === 1) {
+            results.push(`2nd Place: ${winners[i]}`);
+          } else if (i === 2) {
+            results.push(`3rd Place: ${winners[i]}`);
+          } else {
+            restAr.push(winners[i]);
+          }
+        }
+        //return [results, restAr];
+        return results.concat(rest);
+      };
+
+      // Beispiel
+      const getWinners2 = (names = []) => {
+        const results = names.map((name, idx) => {
+          if (idx === 0) {
+            return `1st place: ${name}`;
+          }
+          if (idx === 1) {
+            return `2nd place: ${name}`;
+          }
+          if (idx === 2) {
+            return `3rd place: ${name}`;
+          }
+          return name;
+        });
+        return results;
+      };
+
+      const labels = ['1st', '2nd', '3rd'];
+
+      // Beispiel
+      const getWinners3 = (names = []) => {
+        const results = names.map((name, idx) => {
+          // if (idx < 3) {
+          //   return `${labels[idx]} place: ${name}`;
+          // } else {
+          //   return name;
+          // }
+
+          return idx < labels.length ? `${labels[idx]} place: ${name}` : name;
+        });
+        return results;
+      };
+
+      console.log(getWinners3(winners));
+      outputEl.innerHTML = `<ul><li>${getWinners3(winners).join('</li><li>')}</li></ul>`;
+    </script>
+  </body>
+</html>