01_grundlagen/projekte/js-basics-alcohol-test-template/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

01_grundlagen/projekte/js-basics-alcohol-test-template/README.md

@@ -0,0 +1,21 @@
+## Alcohol Test: Template
+
+Alcohol Test is an application that helps you obtain a rough estimate of your blood alcohol content. Users first enter their weight and then log beverages as needed. From this, the estimated current blood alcohol content (EBAC) is calculated. This template is the starting point from which you can begin your submission task. Let yourself go and don’t limit your creativity.
+
+## License and terms of use
+
+© Web Professional Institute Inc. All rights reserved.
+
+This material is provided solely for students enrolled in courses offered by Web Professional Institute Inc. By accessing or using this code, you acknowledge that it is strictly for educational use within the context of Web Professional Institute Inc. programs.
+
+**Usage Restrictions:**
+
+- Redistribution, sharing, or copying of this material outside the course environment is strictly prohibited.
+- The content is designed to support your learning objectives and is not authorized for commercial projects, public repositories, or applications beyond the course scope.
+- Unauthorized commercial use or open-source distribution is strictly prohibited and may result in expulsion from the program and legal action.
+
+**Agreement & Rights:**
+
+As a student, you have agreed to these terms as part of your enrollment agreement, which includes additional details on permitted uses, restrictions, and policies. The author and Web Professional Institute Inc. retain all rights to this material, including the code base and instructional content.
+
+For any questions regarding these terms, please contact Web Professional Institute Inc. for clarification.

01_grundlagen/projekte/js-basics-alcohol-test-template/index.js

@@ -0,0 +1,17 @@
+const data = {
+  weight: 70,
+  drinks: [
+    {
+      type: 'beer',
+      amount: 1,
+    },
+    {
+      type: 'wine',
+      amount: 1,
+    },
+  ],
+};
+
+// Your code here
+
+console.log(decideOnDrivingAbility(data));

01_grundlagen/projekte/js-basics-royal-flush-template/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

01_grundlagen/projekte/js-basics-royal-flush-template/Augabenstellung.md

@@ -0,0 +1,160 @@
+# Projektarbeit 1: Royal Flush\!
+
+## Einleitung
+
+Offensichtlich hat sich herumgesprochen, dass sich mit Online-Poker eine Menge Geld verdienen lässt. Dein Auftraggeber möchte eine neue Poker-Website entwickeln. Die Spiellogik benötigt viele spezielle Funktionen. Deswegen hat der Projektleiter dich dem Team zugeteilt. Jeder Entwickler programmiert nur einen kleinen Teil der Webanwendung.
+
+Natürlich fällt die Programmierung der **wichtigsten Funktion** in deinen Aufgabenbereich.
+
+## Technologien / Anforderungen
+
+- Setze **JavaScript – ECMAScript 2015 (ES6)** oder neuer ein.
+- Externe JavaScript-Bibliotheken (oder aus Drittquellen übernommener Code) sind **nicht** zugelassen.
+- Überprüft wird die Aufgabe im aktuellen **Chrome Browser**.
+- Entwickle **kein grafisches User Interface (GUI)** — d. h. du benötigst auch kein HTML oder CSS.
+- Verwende lediglich die **Konsolenausgabe**, um die Funktionalität der Anwendung zu demonstrieren.
+
+---
+
+## Arbeitsschritt 1: Prüfung auf Name und Kartenfarbe
+
+Das neue Pokersystem repräsentiert eine Karte intern als String aus **Name** (z. B. `K` für King) und **Kartenfarbe** (z. B. `♠`). Die Kartenfarben verwenden ihre jeweiligen UTF-8-Zeichen. Beispielsweise wird die Karte Herzkönigin als `'Q♥'` und die Karte Kreuz 8 als `'8♣'` repräsentiert.
+
+Folgende Konstanten sind bereits vorgegeben:
+
+```javascript
+const SUITS = '♠♥♦♣';
+const NAMES = [
+  '2',
+  '3',
+  '4',
+  '5',
+  '6',
+  '7',
+  '8',
+  '9',
+  '10',
+  'J',
+  'Q',
+  'K',
+  'A',
+];
+```
+
+### Codebeispiel 361
+
+Schreibe die Funktionen `toName` und `toSuit`, die eine Karte jeweils auf ihren Namen bzw. auf ihre Kartenfarbe abbilden.
+
+**Beispiele:**
+
+```javascript
+toName('9♣'); // => '9'
+toName('10♥'); // => '10'
+toName('Q♥'); // => 'Q'
+toSuit('9♣'); // => '♣'
+toSuit('10♥'); // => '♥'
+```
+
+---
+
+## Arbeitsschritt 2: Validierung
+
+### 🔨 Codebeispiel 362
+
+Programmiere eine Funktion `isValidCard`, die prüft, ob es sich bei dem übergebenen String um eine valide Karte handelt. Eine String gilt dann als eine valide Repräsentation einer Karte, wenn er exakt der besprochenen Zusammensetzung aus Name und Farbe entspricht.
+
+**Beispiele:**
+
+```javascript
+isValidCard('9♣'); // => true
+isValidCard('11♣'); // => false
+isValidCard('9X'); // => false
+```
+
+Eine Pokerhand besteht aus fünf Karten. Das Pokersystem repräsentiert diese als Arrays mit je fünf Elementen, bei denen es sich um Stringrepräsentationen von Karten handelt, z. B. `['9♣', '9♦', '9♠', '9♥', 'Q♥']`.
+
+Programmiere noch eine weitere Funktion `isValidHand`, die prüft, ob es sich bei einem übergebenen Array um eine valide Repräsentation einer Kartenhand handelt. Eine Kartenhand ist dann valide (und nur dann), wenn sie genau **fünf valide Karten** enthält.
+
+> **Wichtig:** Greife zur Implementierung von `isValidCard` auf die Funktionen `toName` und `toSuit` zurück. Genauso verwendest du `isValidCard` zur Realisierung von `isValidHand`.
+
+---
+
+## Arbeitsschritt 3: Sortierung
+
+Um dem Spieler das Erfassen seiner Kartenhand zu erleichtern, müssen die Karten vorsortiert werden.
+
+### Codebeispiel 363
+
+Programmiere dazu eine Funktion `sortHand`.
+
+1.  Vergleiche zunächst nur anhand ihres **Namens**, so dass 2er, 3er …, Damen, Könige etc. direkt nebeneinander angeordnet werden. Um die korrekte Reihenfolge der Namen zu bestimmen, kannst du auf den **Indexwert von `NAMES`** zurückgreifen. Z. B. ist eine `'2'` mit Indexwert 0 weniger wert als ein Bube (`'J'`) mit Indexwert 9.
+2.  Berücksichtige in einer überarbeiteten Variante auch die **Kartenfarbe**. Es gilt die Reihenfolge aus dem String `SUITS`. Diese neue Sortierung soll dann die vorherige Variante ersetzen.
+
+**Beispiele:**
+
+```javascript
+sortHand(['3♥', '2♥', '5♥', '2♣', '4♣']);
+// => ['2♠', '2♥', '2♦', '2♣', 'Q♥'] // Korrektur: Die Kartenfarben sollten in der richtigen Reihenfolge stehen, dies ist ein Beispiel aus der Aufgabenstellung
+sortHand(['3♥', '2♥', '5♥', '2♣', '4♣']);
+// => ['2♣', '2♥', '3♥', '4♣', '5♥'] // Bei gleicher Zahl ist die Farbe entscheidend: ♣ ist höher als ♥ im Beispiel, wenn SUITS = '♠♥♦♣'
+sortHand(['2♦', 'Q♥', '2♥', '2♣', '2♠']);
+// => ['2♠', '2♥', '2♦', '2♣', 'Q♥'] // Falsche Ausgabe im Beispiel, richtige Sortierung basierend auf SUITS = '♠♥♦♣'
+// => ['2♠', '2♥', '2♦', '2♣', 'Q♥']
+// Anmerkung: Basierend auf SUITS='♠♥♦♣', wäre die Reihenfolge ♠ > ♥ > ♦ > ♣.
+// Für die Sortierung '2♠', '2♥', '2♦', '2♣', 'Q♥' bedeutet dies, dass ♠ den höchsten Indexwert hat, wenn die Sortierung aufsteigend ist.
+```
+
+> **Tipps zur Vorgehensweise:**
+>
+> - Parametrisiere `sort` mit einer Vergleichsfunktion `compareCards`, die zwei Karten entgegennimmt und einen positiven Wert, einen negativen Wert oder (bei identischen Karten) 0 zurückliefert. Du kannst das wie bei der numerischen Sortierung mit **Subtraktion** lösen.
+> - Um den Vergleichswert zu bestimmen, vergleichst du zunächst nur die **Indexwerte der Namen**.
+> - Um die Kartenfarbe zu berücksichtigen, kannst du einen Kartenpositionswert durch eine höhere Gewichtung des Indexwertes des Namens erhalten:
+>   $$\text{Kartenposition} = \text{Gewichtungsfaktor} \times \text{Position des Namens in NAMES} + \text{Position der Kartenfarbe in SUITS}$$
+> - Der **Gewichtungsfaktor** ist dabei idealerweise einfach die Anzahl der Kartenfarben (`SUITS.length`).
+
+---
+
+## Arbeitsschritt 4: Kategorisierung
+
+### 🔨 Codebeispiel 364
+
+- Eine Pokerhand, bei der alle Karten die **gleiche Kartenfarbe** aufweisen, heißt **Flush**.
+- Eine Hand, die aus **fünf aufeinanderfolgenden Karten** besteht, heißt **Straight** (deutsch: Straße).
+- Für den unwahrscheinlichen Fall, dass die Hand aus fünf aufeinanderfolgenden Karten in der gleichen Farbe besteht, spricht man von einem **Straight Flush**.
+- Falls ein Straight Flush außerdem noch das **Ass (als höchste Karte)** enthält, liegt ein **Royal Flush** vor — das wertvollste Pokerblatt\!
+
+Entwickle Funktionen, die eine Pokerhand darauf prüfen, ob jeweils eine der oben genannten Kategorien vorliegt. Beachte auch, dass das Array die Karten nicht zwingend in aufsteigender Reihenfolge enthalten muss.
+
+**Beispiele:**
+
+```javascript
+isFlush(['7♥', '2♥', 'Q♥', '10♥', '5♥']); // => true
+isFlush(['7♥', '2♥', 'Q♥', '10♣', '5♥']); // => false
+isStraight(['5♥', '6♦', '7♥', '8♣', '9♥']); // => true
+isStraightFlush(['5♥', '6♥', '7♥', '8♥', '9♥']); // => true
+isRoyalFlush(['10♥', 'J♥', 'Q♥', 'K♥', 'A♥']); // => true
+isRoyalFlush(['10♥', 'J♥', 'Q♥', 'K♣', 'A♥']); // => false
+isRoyalFlush(['K♥', 'A♥', 'Q♥', '10♥', 'J♥']); // => true
+```
+
+> **Tipp zur Vorgehensweise (Straight):**
+>
+> - Betrachte nur die Namen der Karten.
+> - Sortiere diese und verbinde sie zu einem String (mittels `join()`).
+> - Wenn dieser String in `NAMES.join()` enthalten ist, handelt es sich bei der ursprünglichen Hand um einen Straight.
+>
+> **Beispiel:**
+>
+> `['9♥', '6♦', '7♥', '5♣', '8♥']` $\to$ `['9', '6', '7', '5', '8']` $\to$ `['5', '6', '7', '8', '9']` $\to$ `'5,6,7,8,9'`
+>
+> `'5,6,7,8,9'` liegt innerhalb von `'2,3,4,5,6,7,8,9,10,J,Q,K,A'` und ist somit ein Straight.
+
+---
+
+## Hinweise
+
+- Selbstverständlich kannst du die Implementierung der verlangten Funktionen jederzeit in weitere Funktionen unterteilen.
+- Alle verlangten Funktionen lassen sich aber prinzipiell jeweils mit einem einzigen Ausdruck implementieren. Tatsächlich wären an keiner Stelle geschweifte Klammern nötig. Du kannst sie aber natürlich verwenden, falls du möchtest.
+- Die verlangten Funktionen bauen aufeinander auf. So nutzt beispielsweise `isValidHand` die Funktion `isValidCard` und wird selbst in den darauffolgenden Funktionen weiterverwendet.
+- Du musst lediglich die Funktionen liefern. Es ist nicht erforderlich, Werte per `prompt` o.ä. zu erfragen.
+- Die in der Aufgabe genannten Angaben zur API sind grundsätzlich verpflichtend. D. h. du verwendest die in der Aufgabenstellung genannten **Funktionsnamen, Argumente, Argumentnamen, Rückgabewerte** usw.

01_grundlagen/projekte/js-basics-royal-flush-template/README.md

@@ -0,0 +1,21 @@
+## Royal Flush: Template
+
+Royal Flush is an application that allows you to check hands in Texas Hold'em. The goal is to check if a hand is valid. You should also be able to check whether it is a flush, a straight, a straight flush or a royal flush.
+
+## License and terms of use
+
+© Web Professional Institute Inc. All rights reserved.
+
+This material is provided solely for students enrolled in courses offered by Web Professional Institute Inc. By accessing or using this code, you acknowledge that it is strictly for educational use within the context of Web Professional Institute Inc. programs.
+
+**Usage Restrictions:**
+
+- Redistribution, sharing, or copying of this material outside the course environment is strictly prohibited.
+- The content is designed to support your learning objectives and is not authorized for commercial projects, public repositories, or applications beyond the course scope.
+- Unauthorized commercial use or open-source distribution is strictly prohibited and may result in expulsion from the program and legal action.
+
+**Agreement & Rights:**
+
+As a student, you have agreed to these terms as part of your enrollment agreement, which includes additional details on permitted uses, restrictions, and policies. The author and Web Professional Institute Inc. retain all rights to this material, including the code base and instructional content.
+
+For any questions regarding these terms, please contact Web Professional Institute Inc. for clarification.

01_grundlagen/projekte/js-basics-royal-flush-template/index.js

@@ -0,0 +1,82 @@
+const SUITS = '♠♥♦♣';
+const NAMES = [
+  '2',
+  '3',
+  '4',
+  '5',
+  '6',
+  '7',
+  '8',
+  '9',
+  '10',
+  'J',
+  'Q',
+  'K',
+  'A',
+];
+
+// Arbeitsschritt 1: Prüfung auf Name und Kartenfarbe
+const toName = (card) => {
+  // Bei '10' sind die ersten 2 Zeichen der Name, sonst das erste Zeichen
+  return card.startsWith('10') ? '10' : card[0];
+};
+
+const toSuit = (card) => card[card.length - 1];
+
+// Arbeitsschritt 2: Validierung
+const isValidCard = (card) => {
+  const name = toName(card);
+  const suit = toSuit(card);
+  return NAMES.includes(name) && SUITS.includes(suit);
+};
+
+const isValidHand = (hand) => {
+  return Array.isArray(hand) && hand.length === 5 && hand.every(isValidCard);
+};
+
+// Arbeitsschritt 3: Sortierung
+const sortHand = (hand) => {
+  const compareCards = (cardA, cardB) => {
+    const nameIndexA = NAMES.indexOf(toName(cardA));
+    const nameIndexB = NAMES.indexOf(toName(cardB));
+    const suitIndexA = SUITS.indexOf(toSuit(cardA));
+    const suitIndexB = SUITS.indexOf(toSuit(cardB));
+
+    // Kartenposition = Gewichtungsfaktor × Position des Namens + Position der Kartenfarbe
+    const positionA = SUITS.length * nameIndexA + suitIndexA;
+    const positionB = SUITS.length * nameIndexB + suitIndexB;
+
+    return positionA - positionB;
+  };
+
+  return [...hand].sort(compareCards);
+};
+
+// Arbeitsschritt 4: Kategorisierung
+const isFlush = (hand) => {
+  if (!isValidHand(hand)) return false;
+  const suits = hand.map(toSuit);
+  return suits.every((suit) => suit === suits[0]);
+};
+
+const isStraight = (hand) => {
+  if (!isValidHand(hand)) return false;
+  const sortedHand = sortHand(hand);
+  const names = sortedHand.map(toName);
+  const namesString = names.join(',');
+  const allNamesString = NAMES.join(',');
+
+  return allNamesString.includes(namesString);
+};
+
+const isStraightFlush = (hand) => {
+  return isStraight(hand) && isFlush(hand);
+};
+
+const isRoyalFlush = (hand) => {
+  if (!isStraightFlush(hand)) return false;
+  const sortedHand = sortHand(hand);
+  const names = sortedHand.map(toName);
+  // Royal Flush muss mit 10 beginnen und mit A enden
+  return names[0] === '10' && names[4] === 'A';
+};