01_grundlagen/unterricht/tag08/01_function-expression-with-params.html

@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Funktionsausdruck mit Parametern</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">
+        <h1>Funktionsausdruck mit Parametern</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // eslint: prefer-const, arrow-parens
+      // https://github.com/airbnb/javascript#arrows--one-arg-parens
+      const showNewsletterFor = (username) => {
+        console.log(`Hello ${username},\n`);
+        console.log(
+          "We're pleased to inform you that NerdWorld is making a number of new discounts available to you. Please visit http://www.nerdworld.example/discounts for detailed information.\n",
+        );
+        console.log('Happy nerding,\nYour NerdWorld-Team\n\n');
+      };
+
+      const showsABrilliantExample = (firstDirection, secondDirection) => {
+        console.log(`First brilliant direction:  ${firstDirection}`);
+        console.log(`Second brilliant direction: ${secondDirection}`);
+      };
+
+      // output
+      showNewsletterFor('Stefan');
+      console.log('========');
+      showNewsletterFor('Florian');
+      console.log('========');
+      showNewsletterFor('Christian');
+      console.log('========');
+      showNewsletterFor('Benjamin');
+
+      showsABrilliantExample('left', 'right');
+      showsABrilliantExample('left'); // zweites Argument nicht übergeben, parameter "secondDirection" ist undefined
+      showsABrilliantExample('left', 'right', 'top', 'bottom'); // zu viele Argumente werden ignoriert.
+    </script>
+  </body>
+</html>

01_grundlagen/unterricht/tag08/02_volume-tube.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Zylindervolumen berechnen (tube)</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">
+        <h1>Zylindervolumen berechnen (tube)</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const BASE_COST_PER_UNIT = 0.7;
+      const COST_PER_CC = 0.001;
+
+      const height = 80;
+      const diameter = 10;
+
+      // cylindricalVolume = π × radius² × height
+      const mailingTubeVolume = Math.PI * Math.pow(diameter / 2, 2) * height;
+      // shippingCost = volume × costPerCC + costPerUnit
+      const shippingCost = mailingTubeVolume * COST_PER_CC + BASE_COST_PER_UNIT;
+
+      console.log(shippingCost); // => 6.983185307179587
+    </script>
+  </body>
+</html>

01_grundlagen/unterricht/tag08/03_function-volume-tube.html

@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Zylindervolumen berechnen (tube)</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">
+        <h1>Zylindervolumen berechnen (tube)</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const BASE_COST_PER_UNIT = 0.7;
+      const COST_PER_CC = 0.001;
+
+      const height = 80;
+      const diameter = 10;
+
+      /**
+       * Funktion zum Berechnen vom Zylindervolumen
+       */
+      const calcTubeVolume = (diameter, height) => {
+        const radius = diameter / 2;
+        // cylindricalVolume = π × radius² × height
+        const volume = Math.PI * Math.pow(radius, 2) * height;
+        return volume;
+      };
+
+      /**
+       * Funktion zum Berechnen vom Zylindervolumen (Kurzschreibweise)
+       */
+      const calcTubeVolumeShort = (diameter, height) => Math.PI * Math.pow(diameter / 2, 2) * height;
+
+      /**
+       * Funktion zum Berechnen der Versandkosten
+       */
+      const calcShippingCost = (volume) => {
+        // shippingCost = volume × costPerCC + costPerUnit
+        const cost = volume * COST_PER_CC + BASE_COST_PER_UNIT;
+        return cost;
+      };
+
+      /**
+       * Funktion zum Berechnen der Versandkosten (Kurzschreibweise)
+       */
+      const calcShippingCostShort = (volume) => volume * COST_PER_CC + BASE_COST_PER_UNIT;
+
+      const tubeVolume = calcTubeVolume(10, 80); // calcTubeVolume(diameter, height);
+      const shippingCost = calcShippingCost(tubeVolume);
+
+      console.log(shippingCost); // => 6.983185307179587
+      console.log(calcShippingCostShort(calcTubeVolumeShort(10, 80))); // => 6.983185307179587
+    </script>
+  </body>
+</html>

01_grundlagen/unterricht/tag08/04_volume-cube.html

@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Kartonvolumen berechnen (cube)</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">
+        <h1>Kartonvolumen berechnen (cube)</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // Konfigurationsvariablen
+      const BASE_COST_PER_UNIT = 0.7;
+      const COST_PER_CC = 0.001;
+
+      const length = 25;
+      const width = 30;
+      const height = 12;
+
+      // cubeVolume = length × width × height
+      const cartonVolume = length * width * height;
+
+      // shippingCost = volume × costPerCC + costPerUnit
+      const shippingCost = cartonVolume * COST_PER_CC + BASE_COST_PER_UNIT;
+
+      console.log(`shipping cost is: $${shippingCost.toFixed(2)}`); // => 9.70
+    </script>
+  </body>
+</html>

01_grundlagen/unterricht/tag08/05_function-volume-cube.html

@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Kartonvolumen berechnen mit Funktion (cube)</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">
+        <h1>Kartonvolumen berechnen mit Funktion (cube)</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // Konfigurationsvariablen
+      const BASE_COST_PER_UNIT = 0.7;
+      const COST_PER_CC = 0.001;
+
+      const length = 25;
+      const width = 30;
+      const height = 12;
+
+      /**
+       * Funktion zum Berechnen einen Kartonvolumens
+       */
+      const calcCubeVolume = (l, w, h) => {
+        // cubeVolume = length × width × height
+        const volume = l * w * h;
+        return volume;
+      };
+
+      /**
+       * Funktion zum Berechnen einen Kartonvolumens (Kurzschreibweise)
+       */
+      const calcCubeVolumeShort = (l, w, h) => l * w * h;
+
+      /**
+       * Funktion zum Berechnen der Versandkosten
+       */
+      const calcShippingCost = (volume) => {
+        // shippingCost = volume × costPerCC + costPerUnit
+        const cost = volume * COST_PER_CC + BASE_COST_PER_UNIT;
+        return cost;
+      };
+
+      /**
+       * Funktion zum Berechnen der Versandkosten (Kurzschreibweise)
+       */
+      const calcShippingCostShort = (volume) => volume * COST_PER_CC + BASE_COST_PER_UNIT;
+
+      // const volume = calcCubeVolume(25, 30, 12);
+      const volume = calcCubeVolume(length, width, height);
+      // const volumeMiniPackage = calcCubeVolume(10, 5, 5);
+
+      console.log(`shipping cost is: $${calcShippingCost(volume).toFixed(2)}`); // => 9.70
+    </script>
+  </body>
+</html>