01_grundlagen/agenda.md

@@ -124,7 +124,7 @@ Lektion 10 erarbeiten
 **Inhalt:**
 
 - Funktionen mit Rückgabewerten
-- Guards
+- Guards, Restparameter, Defaulparameter
 - Array Part 1
 
 **Übungen:**

01_grundlagen/uebungen/u32-tranformed-ladislaus.html

@@ -24,6 +24,16 @@
     </main>
     <script>
       'use strict';
+
+      // Funktionsdefinition
+      const logTransformName = (firstName, lastName) => {
+        console.log(
+          `${lastName.charAt(0).toUpperCase()}${lastName.substring(1).toLowerCase()}, ${firstName.charAt(0).toUpperCase()}.`,
+        );
+      };
+
+      logTransformName('Max', 'Mustermann');
+      logTransformName('John', 'Wick');
     </script>
   </body>
 </html>

01_grundlagen/uebungen/u33_newsletter.html

@@ -104,10 +104,31 @@ showInvitationFor('Ladislaus', 'Music Festival', 'September 10', true);
     <script>
       'use strict';
 
-      /*
-      
-        TODO: showInvitationFor Function
-      */
+      const showInvitationFor = (recipient, event = 'Tech Conference', date = 'July 24', isVip = false) => {
+        const introduction = !isVip
+          ? 'Thank you for your registration.'
+          : 'You have registered as a VIP! Enjoy exclusive benefits and access to VIP areas.';
+
+        const message = `Dear ${recipient},
+${introduction}
+
+Event Details:
+- Event: ${event}
+- Date: ${date}
+- Venue: Main Hall, Conference Center
+
+We look forward to seeing you at the event!
+
+Best regards,
+The Event Team`;
+
+        console.log(message);
+      };
+
+      showInvitationFor('Heribert', 'Tech Conference', 'July 24', true);
+      showInvitationFor('Goldy', 'Art Workshop', 'August 15', false);
+      showInvitationFor('Ladislaus', 'Music Festival', 'September 10', true);
+      showInvitationFor('John', 'Shooting Event', 'September 12');
     </script>
   </body>
 </html>

01_grundlagen/uebungen/u34-tranformed-ladislaus.html

@@ -69,9 +69,13 @@
       const inputLastnameEl = document.querySelector('input[name="lastname"]');
 
       // Funktionsdefinition
+      const transformName = (firstName, lastName) => {
+        return `${lastName.charAt(0).toUpperCase()}${lastName.substring(1).toLowerCase()}, ${firstName.charAt(0).toUpperCase()}.`;
+      };
 
       formTransformEl.addEventListener('submit', (e) => {
-        e.preventDefault();
+        e.preventDefault(); // Standardverhalten unterbinden
+        outputEl.textContent = transformName(inputFirstnameEl.value, inputLastnameEl.value);
       });
 
       // console.log(transformName('Max', 'Mustermann')); //=> 'Mustermann, M.'

01_grundlagen/uebungen/u35_reichweite-verbrauch.html

@@ -69,19 +69,40 @@
 
       const streckeEl = document.querySelector('input[name="strecke"]');
       const benzinMengeEl = document.querySelector('input[name="benzinmenge"]');
-      const tankGroesseEL = document.querySelector('input[name="tangroesse"]');
+      const tankGroesseEl = document.querySelector('input[name="tangroesse"]');
 
       // 1. Schreiben Sie ein Programm zur Kraftstoffverbrauchsberechnung für Pkws.
       //const benzinMenge = prompt('Geben Sie die verbrauchte Benzinmenge an!');
       //const strecke = prompt('Geben Sie die Strecke an!');
 
       // Funktionen =========
+      const calcBenzinMenge = (drivenKm, usedFuelAmount) => {
+        if (isNaN(drivenKm) || isNaN(usedFuelAmount)) {
+          return NaN;
+        }
 
-      //
+        const fuelPer100Km = (usedFuelAmount / drivenKm) * 100;
+        return fuelPer100Km;
+      };
+
+      const calcStrecke = (drivenKm, usedFuelAmount, fuelTankVolume) => {
+        if (isNaN(drivenKm) || isNaN(usedFuelAmount) || isNaN(fuelTankVolume)) {
+          return NaN;
+        }
+
+        const maximumRange = (fuelTankVolume * drivenKm) / usedFuelAmount;
+        return maximumRange;
+      };
 
       // EventHandler =======
       const onSubmit = (e) => {
         e.preventDefault();
+        const strecke = Number(streckeEl.value);
+        const benzinMenge = Number(benzinMengeEl.value);
+        const tankGroesse = Number(tankGroesseEl.value);
+
+        outputAEl.textContent = `Verbrauch/100km: ${calcBenzinMenge(strecke, benzinMenge).toFixed(1)}l`;
+        outputBEl.textContent = `Stecke: ${calcStrecke(strecke, benzinMenge, tankGroesse).toFixed(1)}km`;
       };
 
       formCalculatorEl.addEventListener('submit', onSubmit); // onSumbit = funktionsreferenz

01_grundlagen/uebungen/u36_kekse-array.html

@@ -83,6 +83,28 @@
         '1/2 cup sugar',
         '1 tsp baking powder',
       ];
+
+      // 1.
+      receipeAr.push('1 tsp flour');
+      console.log(receipeAr);
+
+      // 2.   Beim Durchlesen der Liste fällt auf, dass die wohl wichtigste Zutat ebenfalls fehlt. Füge noch 100 g Haferflocken (1 cup rolled oats) an die erste Position in die Zutatenliste ein.
+      receipeAr.unshift('1 cup rolled oats');
+      console.log(receipeAr);
+
+      // 3. Für Kekse ist es eigentlich besser, Butter statt Öl zu verwenden. Tausche das Öl in der Liste dementsprechend gegen 75 g Butter (1/3 cup butter) aus.
+      receipeAr.splice(receipeAr.indexOf('1/4 cup vegetable oil'), 1, '1/3 cup butter');
+      console.log(receipeAr);
+
+      // receipeAr[receipeAr.indexOf('1/4 cup vegetable oil')] = '1/3 cup butter';
+
+      // 4.
+      const recipeStr = `<ol><li>${receipeAr.join('</li><li>')}</li>`;
+      console.log(recipeStr);
+
+      // 5.
+      outputEl.insertAdjacentHTML('afterbegin', recipeStr);
+      outputEl.appendChild(document.createTextNode(introduction));
     </script>
   </body>
 </html>

01_grundlagen/uebungen/u37-train-stations.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
   <head>
     <meta charset="UTF-8" />
@@ -76,6 +76,57 @@ const LINE_W = [
         '39 Av',
         'Queensboro Plaza',
       ];
+
+      // Position von Broadway finden und die Kurzstrecke ausschneiden.
+
+      // Finde die Position der gewünschten Zielhaltestelle Broadway heraus.
+      const destinationIndex = LINE_W.indexOf('Broadway');
+
+      // Entferne alle Haltestellen nach Broadway aus dem Array.
+      const shortTrip = LINE_W.slice(0, destinationIndex + 1);
+
+      console.log(shortTrip); // => ['Astoria-Ditmars Blvd', 'Astoria Blvd', '30 Av', 'Broadway']
+
+      const cuttedStations = [...LINE_W].splice(0, destinationIndex + 1);
+      console.log('cuttedStations: ', cuttedStations);
+
+      // Ohne zweite Angabe beginnt die Fahrt an der ersten Haltestelle.
+      function getStations(destinationStation, startStation = LINE_W[0]) {
+        const startIndex = LINE_W.indexOf(startStation);
+        const endIndex = LINE_W.indexOf(destinationStation);
+
+        // Guard
+        if (startIndex === -1 || endIndex === -1) {
+          return [];
+        }
+
+        // Auch Fahrten in die Gegenrichtung sind möglich.
+        if (startIndex > endIndex) {
+          return LINE_W.slice(endIndex, startIndex + 1).reverse();
+        }
+
+        return LINE_W.slice(startIndex, endIndex + 1);
+      }
+
+      const stationsFromStart = getStations('Broadway');
+      const stationsBetween = getStations('Broadway', 'Astoria Blvd');
+
+      console.log('Position von Broadway:', destinationIndex);
+      console.log('Kurzstrecke:', shortTrip);
+      console.log('Ab der ersten Haltestelle:', stationsFromStart);
+      console.log('Mit eigener Starthaltestelle:', stationsBetween);
+
+      outputEl.style.whiteSpace = 'pre-line';
+      outputEl.textContent = `Position von Broadway (Index): ${destinationIndex}
+
+      Kurzstrecke bis Broadway:
+      ${shortTrip.join(' → ')}
+
+      Funktion mit Standardstart:
+      ${stationsFromStart.join(' → ')}
+
+      Funktion mit eigener Starthaltestelle:
+      ${stationsBetween.join(' → ')}`;
     </script>
   </body>
 </html>

01_grundlagen/uebungen/u38_alte-listen.html

@@ -29,6 +29,10 @@
 
       const productList =
         '3Doodler 3D Printing Pen, Game of Thrones Wax Seal Coasters, 10th Doctor Sonic Screwdriver Exclusive Programmable TV Remote, Electronic Butterfly in a Jar, Aquafarm: Aquaponics Fish Garden, Cassette Adapter Bluetooth, Marvel Comics Lightweight Infinity Scarf, Ollie - The App Controlled Robot, Sound Splash Bluetooth Waterproof Shower Speaker, PowerCube, Backpack of Holding, Retro Duo Portable NES/SNES Game System, Universal Gadget Wrist Charger, USB Squirming Tentacle, USB Fishquarium, Space Bar Keyboard Organizer & USB Hub Pop, USB Pet Rock, Powerstation 5- E. Maximus Chargus, Dual Heated Travel Mug, Crosley Collegiate Portable USB Turntable, Meh Hoodie, Magnetic Accelerator Cannon, 8-Bit Heat-Change Mug';
+
+      const handleCsv = (list) => list.split(', ').sort();
+
+      console.log(handleCsv(productList).join('\n'));
     </script>
   </body>
 </html>