feat: webseite-js

2026-07-03 13:07:49 +02:00
parent 9a1be89bd8
commit ddaae120a7
14 changed files with 1490 additions and 36 deletions
--- a/02_advanced/unterricht/tag15/02_switch-case/index.html
+++ b/02_advanced/unterricht/tag15/02_switch-case/index.html
@@ -0,0 +1,105 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Switch Case</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>Switch Case</h1>
+        <p>
+          Die
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/switch">switch</a
+          >-Anweisung wertet einen Ausdruck aus, vergleicht den Wert des Ausdrucks mit einer Reihe von
+          <strong>case</strong>-Klauseln und führt Anweisungen nach der ersten <strong>case</strong>-Klausel mit
+          passendem Wert aus, bis eine <strong>break</strong>-Anweisung erreicht wird. Die default-Klausel einer
+          switch-Anweisung wird angesprungen, wenn keine <strong>case</strong>-Klausel den Wert des Ausdrucks trifft.
+        </p>
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const outputEl = document.querySelector('.output');
+
+      let taxRate;
+
+      const category = 'books'; //prompt('What is the product category?').trim().toLowerCase();
+
+      const productPrice = 100;
+
+      // if (category === 'books') {
+      //   taxRate = 1.07;
+      // } else if (category === 'vehicle') {
+      //   taxRate = 1.19;
+      // } else if (category === 'fruits') {
+      //   taxRate = 1.05;
+      // }
+
+      switch (category) {
+        case 'books':
+          taxRate = 1.07;
+          break;
+        case 'vehicle':
+          taxRate = 1.19;
+          break;
+
+        case 'software':
+        case 'fruits':
+          taxRate = 1.05;
+          break;
+
+        default:
+          console.warn('category not found');
+          taxRate = 1.19;
+      }
+
+      // ======
+
+      const getColorByName = (variant = '') => {
+        let color;
+        switch (variant.trim().toLowerCase()) {
+          case 'primary':
+            color = '#0d6efd';
+            break;
+          case 'secondary':
+            color = '#6c757d';
+            break;
+          case 'warning':
+            color = '#ffc720';
+            break;
+          case 'success':
+            color = '#13653f';
+            break;
+          case 'info':
+            color = '#25cff2';
+            break;
+          case 'danger':
+            color = '#a52834';
+            break;
+          case 'light':
+            color = '#babbbc';
+            break;
+          case 'dark':
+            color = '#373b3e';
+            break;
+
+          default:
+            console.warn('variant not found');
+            color: 'white';
+        }
+        return color;
+      };
+
+      document.querySelector('h1').style.backgroundColor = getColorByName('warning');
+
+      const totalPrice = productPrice * taxRate;
+      outputEl.textContent = `Total price: $${totalPrice.toFixed(2)}`;
+      console.log('weiter im code...');
+    </script>
+  </body>
+</html>
--- a/02_advanced/unterricht/tag15/03_README.md
+++ b/02_advanced/unterricht/tag15/03_README.md
@@ -0,0 +1 @@
+# Exkurs: Webseite mit Sass und package.json (scripts)
				`@@ -0,0 +1 @@`
				`# Exkurs: Webseite mit Sass und package.json (scripts)`