2026-08-18 14:27:34 +02:00
parent c7d26e1cd9
commit c6d9611e81
35 changed files with 1852 additions and 130 deletions
--- a/06_js-debug/faq/divide-example.html
+++ b/06_js-debug/faq/divide-example.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Divide</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>Divide</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      function divide(a) {
+        return a / b;
+      }
+
+      console.log(divide(10));
+    </script>
+  </body>
+</html>
--- a/06_js-debug/faq/divide.ts
+++ b/06_js-debug/faq/divide.ts
@@ -0,0 +1,5 @@
+function divide(a, b) {
+  return a / b;
+}
+
+console.log(divide(10));
--- a/06_js-debug/faq/extraction-bsp.html
+++ b/06_js-debug/faq/extraction-bsp.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Extraction sum</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>Extraction sum</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+      const products = [
+        { name: 'Product1', price: 10.5 },
+        { name: 'Product1', price: 10.5 },
+      ];
+
+      // Extraction
+      const sum = (a, b) => {
+        return Number(a) + Number(b);
+      };
+
+      const totals = products.map((product) => Number(product.price));
+      const totalPrice = totals.reduce(sum, 0);
+
+      console.log(`total: ${totalPrice}`);
+    </script>
+  </body>
+</html>
--- a/06_js-debug/uebungen/u01_bibverwaltung/solution.html
+++ b/06_js-debug/uebungen/u01_bibverwaltung/solution.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Exercise: Nested If-Statements</title>
+  </head>
+  <body>
+    <h1>Exercise: Nested If-Statements</h1>
+
+    <script>
+      'use strict';
+
+      const isLibraryUpdating = false;
+      const isUserLoggedIn = true;
+      const hasLibrarianPermissions = true;
+      const hasBookEditCapability = false;
+      const hasBookAccess = false;
+
+      const bookCollection = [
+        {
+          title: 'Book A',
+          price: 150,
+          quantity: 5,
+        },
+        {
+          title: 'Book B',
+          price: 250,
+          quantity: 0,
+        },
+        {
+          title: 'Book C',
+          price: 350,
+          quantity: 10,
+        },
+      ];
+
+      function handleLibraryOperations() {
+        if (isLibraryUpdating) {
+          console.log('Library system is currently updating.');
+          return;
+        }
+
+        if (!isUserLoggedIn) {
+          console.log('Please log in to manage books.');
+          return;
+        }
+
+        if (!(hasLibrarianPermissions || (hasBookEditCapability && hasBookAccess))) {
+          console.log('Insufficient rights to manage books.');
+          return;
+        }
+
+        bookCollection.forEach((book) => {
+          console.log(`Book Title: ${book.title}`);
+          if (book.price > 200) {
+            console.log('Book price is greater than 200.');
+          } else {
+            console.log('Book price is less than or equal to 200.');
+          }
+          if (book.quantity > 0) {
+            console.log('Book is available.');
+          } else {
+            console.log('Book is unavailable.');
+          }
+          console.log('---');
+        });
+      }
+
+      handleLibraryOperations();
+    </script>
+  </body>
+</html>
--- a/06_js-debug/uebungen/u02_extraction/solution.html
+++ b/06_js-debug/uebungen/u02_extraction/solution.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Exercise: Extracted Library Operations</title>
+  </head>
+  <body>
+    <h1>Exercise: Extracted Library Operations</h1>
+
+    <script>
+      'use strict';
+
+      const isLibraryUpdating = false;
+      const isUserLoggedIn = true;
+      const hasLibrarianPermissions = true;
+      const hasBookEditCapability = false;
+      const hasBookAccess = false;
+
+      const bookCollection = [
+        {
+          title: 'Book A',
+          price: 150,
+          quantity: 5,
+        },
+        {
+          title: 'Book B',
+          price: 250,
+          quantity: 0,
+        },
+        {
+          title: 'Book C',
+          price: 350,
+          quantity: 10,
+        },
+      ];
+
+      function hasManagePermissions() {
+        return hasLibrarianPermissions || (hasBookEditCapability && hasBookAccess);
+      }
+
+      function printBookDetails(book) {
+        console.log(`Book Title: ${book.title}`);
+
+        if (book.price > 200) {
+          console.log('Book price is greater than 200.');
+        } else {
+          console.log('Book price is less than or equal to 200.');
+        }
+
+        if (book.quantity > 0) {
+          console.log('Book is available.');
+        } else {
+          console.log('Book is unavailable.');
+        }
+
+        console.log('---');
+      }
+
+      function processBookCollection(books) {
+        books.forEach(printBookDetails);
+      }
+
+      function handleLibraryOperations() {
+        if (isLibraryUpdating) {
+          console.log('Library system is currently updating.');
+          return;
+        }
+
+        if (!isUserLoggedIn) {
+          console.log('Please log in to manage books.');
+          return;
+        }
+
+        if (!hasManagePermissions()) {
+          console.log('Insufficient rights to manage books.');
+          return;
+        }
+
+        processBookCollection(bookCollection);
+      }
+
+      handleLibraryOperations();
+    </script>
+  </body>
+</html>
--- a/06_js-debug/uebungen/u03_dry/solution.html
+++ b/06_js-debug/uebungen/u03_dry/solution.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Exercise: Don't Repeat Yourself (DRY)</title>
+  </head>
+  <body>
+    <h1>Exercise: Don't Repeat Yourself (DRY)</h1>
+    <p>
+      In dieser Übung überarbeitest du einen Teil des Codes nach dem DRY-Prinzip (Don't Repeat Yourself). Du arbeitest
+      mit einem Skript, das Wetterberichte für mehrere Städte protokolliert, einschließlich zusätzlicher Wetterdaten wie
+      der Windgeschwindigkeit. Deine Aufgabe ist es, Code-Wiederholungen zu vermeiden, indem du Arrays, Schleifen und
+      Funktionen verwendest. Erstelle eine zusätzliche formatWeatherReport(report) Funktion, die ein
+      Wetterberichtsobjekt als Parameter annimmt. Sie sollte einen formatierten Wetterberichtstring zurückgeben.
+    </p>
+
+    <script>
+      'use strict';
+
+      // Declarations ==================
+
+      // Wetterdaten als Array von Objekten
+      const weatherReports = [
+        {
+          city: 'New York',
+          temperature: 85,
+          humidity: 70,
+          description: 'Sunny',
+          windSpeed: 10,
+        },
+        {
+          city: 'Los Angeles',
+          temperature: 75,
+          humidity: 60,
+          description: 'Partly Cloudy',
+          windSpeed: 7,
+        },
+        {
+          city: 'Chicago',
+          temperature: 70,
+          humidity: 65,
+          description: 'Rainy',
+          windSpeed: 12,
+        },
+      ];
+
+      // Init =================
+      const init = () => {
+        logWeatherReports();
+      };
+
+      // Functions ============
+      const formatWeatherReport = (report) => {
+        const { city, temperature: temp, humidity, description: text, windSpeed } = report;
+        return `Weather in ${city}: ${temp}°F, ${humidity}% humidity, ${text}, Wind Speed: ${windSpeed} mph`;
+      };
+
+      const logWeatherReports = () => {
+        weatherReports.forEach((report) => {
+          console.log(formatWeatherReport(report));
+        });
+      };
+    </script>
+  </body>
+</html>
--- a/06_js-debug/uebungen/u04_dry-benutzerzugang/solution.html
+++ b/06_js-debug/uebungen/u04_dry-benutzerzugang/solution.html
@@ -0,0 +1,295 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Advanced If-Else Statements (Enhanced Nesting)</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>Advanced If-Else Statements (Enhanced Nesting)</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const AVAILABLE_USER_ROLES = ['admin', 'editor', 'viewer'];
+      const AVAILABLE_USER_DEPARTMENTS = ['engineering', 'marketing', 'sales'];
+
+      // IIIFE
+      (() => {
+        let isSystemUnderMaintenance = false;
+        let isUserAuthenticated = true;
+        let userRole = 'editor'; // Possible roles: 'admin', 'editor', 'viewer'
+        let hasPremiumAccess = false;
+        let hasTwoFactorAuth = true;
+        let accountStatus = 'active'; // Possible statuses: 'active', 'suspended', 'closed'
+        let userDepartment = 'marketing'; // Possible departments: 'engineering', 'marketing', 'sales'
+
+        const userActions = [
+          {
+            action: 'viewDashboard',
+            requiresAdmin: false,
+            requiresPremium: false,
+            allowedDepartments: ['engineering', 'marketing', 'sales'],
+          },
+          {
+            action: 'editContent',
+            requiresAdmin: false,
+            requiresPremium: true,
+            allowedDepartments: ['marketing'],
+          },
+          {
+            action: 'manageUsers',
+            requiresAdmin: true,
+            requiresPremium: false,
+            allowedDepartments: ['engineering'],
+          },
+          {
+            action: 'accessAnalytics',
+            requiresAdmin: true,
+            requiresPremium: true,
+            allowedDepartments: ['sales', 'marketing'],
+          },
+          {
+            action: 'deployCode',
+            requiresAdmin: true,
+            requiresPremium: true,
+            allowedDepartments: ['engineering'],
+          },
+        ];
+
+        const fulfillsRequirements = () => {
+          if (isSystemUnderMaintenance) {
+            console.log('System is under maintenance. Please try again later.');
+            return false;
+          }
+
+          if (!isUserAuthenticated) {
+            console.log('User is not authenticated. Redirecting to login page.');
+            return false;
+          }
+
+          return true;
+        };
+
+        const accountIsActive = (status) => {
+          switch (status) {
+            case 'active':
+              return true;
+
+            case 'closed':
+              console.log('Account is closed. Access denied.');
+              return false;
+
+            case 'suspended':
+              console.log('Account is suspended. Contact support.');
+              return false;
+
+            default:
+              console.log('Unknown account status.');
+              return false;
+          }
+        };
+
+        const isAvailableUserRole = (userRole) => {
+          return AVAILABLE_USER_ROLES.includes(userRole);
+        };
+
+        const isAvailableUserDepartment = (userDepartment) => {
+          return AVAILABLE_USER_DEPARTMENTS.includes(userDepartment);
+        };
+
+        const processAdminRole = () => {
+          if (!isAvailableUserDepartment(userDepartment)) {
+            console.log('Unknown department. Access denied.');
+            return;
+          }
+
+          userActions.forEach((action) => {
+            if (action.allowedDepartments.includes(userDepartment)) {
+              console.log(`Admin (${userDepartment}) accessing: ${action.action}`);
+            }
+          });
+        };
+
+        const processEditorRole = () => {
+          if (!hasPremiumAccess) {
+            console.log('Premium access required to edit content.');
+            return;
+          }
+
+          if (userDepartment !== 'marketing') {
+            console.log('Editors are only allowed in the Marketing department.');
+            return;
+          }
+
+          userActions.forEach((action) => {
+            if (action.requiresPremium && action.allowedDepartments.includes(userDepartment)) {
+              console.log(`Editor (${userDepartment}) accessing: ${action.action}`);
+            }
+          });
+        };
+
+        const processViewerRole = () => {
+          if (userDepartment !== 'sales') {
+            console.log('Viewers are only allowed in the Sales department.');
+            return;
+          }
+
+          userActions.forEach((action) => {
+            if (
+              !action.requiresAdmin &&
+              !action.requiresPremium &&
+              action.allowedDepartments.includes(userDepartment)
+            ) {
+              console.log(`Viewer (${userDepartment}) accessing: ${action.action}`);
+            }
+          });
+        };
+
+        const manageUserAccess = () => {
+          if (!fulfillsRequirements()) {
+            return;
+          }
+
+          if (!accountIsActive(accountStatus)) {
+            return;
+          }
+
+          if (!hasTwoFactorAuth) {
+            console.log('Two-Factor Authentication is required for access.');
+            return;
+          }
+
+          if (!isAvailableUserRole(userRole)) {
+            console.log('Unknown user role. Access denied.');
+            return;
+          }
+
+          switch (userRole) {
+            case 'admin':
+              processAdminRole();
+              return;
+
+            case 'editor':
+              processEditorRole();
+              return;
+
+            case 'viewer':
+              processViewerRole();
+              return;
+          }
+        };
+
+        // ===== TEST CASES =====
+
+        // Test Case 1: System Under Maintenance
+        console.warn('Test Case 1: System Under Maintenance');
+        isSystemUnderMaintenance = true;
+        manageUserAccess(); // => "System is under maintenance. Please try again later."
+        resetVariables();
+
+        // Test Case 2: User Not Authenticated
+        console.warn('Test Case 2: User Not Authenticated');
+        isSystemUnderMaintenance = false;
+        isUserAuthenticated = false;
+        manageUserAccess(); // => "User is not authenticated. Redirecting to login page."
+        resetVariables();
+
+        // Test Case 3: Account Suspended
+        console.warn('Test Case 3: Account Suspended');
+        hasTwoFactorAuth = false;
+        accountStatus = 'suspended';
+        manageUserAccess(); // => "Account is suspended. Contact support."
+        resetVariables();
+
+        // Test Case 4: Missing Two-Factor Authentication
+        console.warn('Test Case 4: Missing Two-Factor Authentication');
+        hasTwoFactorAuth = false;
+        accountStatus = 'active';
+        manageUserAccess(); // => "Two-Factor Authentication is required for access."
+        resetVariables();
+
+        // Test Case 5: Admin Access in Marketing Department
+        console.warn('Test Case 5: Admin Access in Marketing Department');
+        userRole = 'admin';
+        userDepartment = 'marketing';
+        manageUserAccess();
+        // Expected Output:
+        // "Admin (marketing) accessing: viewDashboard"
+        // "Admin (marketing) accessing: editContent"
+        // "Admin (marketing) accessing: accessAnalytics"
+        resetVariables();
+
+        // Test Case 6: Editor Without Premium Access
+        console.warn('Test Case 6: Editor Without Premium Access');
+        userRole = 'editor';
+        hasPremiumAccess = false;
+        manageUserAccess(); // => "Premium access required to edit content."
+        resetVariables();
+
+        // Test Case 7: Editor With Premium Access in Marketing Department
+        console.warn('Test Case 7: Editor With Premium Access in Marketing Department');
+        hasPremiumAccess = true;
+        manageUserAccess();
+        // Expected Output:
+        // "Editor (marketing) accessing: editContent"
+        // "Editor (marketing) accessing: accessAnalytics"
+        resetVariables();
+
+        // Test Case 8: Viewer Access in Sales Department
+        console.warn('Test Case 8: Viewer Access in Sales Department');
+        userRole = 'viewer';
+        userDepartment = 'sales';
+        manageUserAccess(); // => "Viewer (sales) accessing: viewDashboard"
+        resetVariables();
+
+        // Test Case 9: Unknown User Role
+        console.warn('Test Case 9: Unknown User Role');
+        userRole = 'guest';
+        manageUserAccess(); // => "Unknown user role. Access denied."
+        resetVariables();
+
+        // Test Case 10: Viewer Access in Marketing Department
+        console.warn('Test Case 10: Viewer Access in Marketing Department');
+        userRole = 'viewer';
+        userDepartment = 'marketing';
+        manageUserAccess(); // => "Viewers are only allowed in the Sales department."
+        resetVariables();
+
+        // Test Case 11: Admin Access in Engineering Department
+        console.warn('Test Case 11: Admin Access in Engineering Department');
+        userRole = 'admin';
+        userDepartment = 'engineering';
+        manageUserAccess();
+        // Expected Output:
+        // "Admin (engineering) accessing: viewDashboard"
+        // "Admin (engineering) accessing: manageUsers"
+        // "Admin (engineering) accessing: deployCode"
+        resetVariables();
+
+        // Test Case 12: Editor With Premium Access in Engineering Department
+        console.warn('Test Case 12: Editor With Premium Access in Engineering Department');
+        userRole = 'editor';
+        hasPremiumAccess = true;
+        userDepartment = 'engineering';
+        manageUserAccess(); // => "Editors are only allowed in the Marketing department."
+        resetVariables();
+
+        // ===== HELPER FUNCTION =====
+        function resetVariables() {
+          isSystemUnderMaintenance = false;
+          isUserAuthenticated = true;
+          userRole = 'editor';
+          hasPremiumAccess = false;
+          hasTwoFactorAuth = true;
+          accountStatus = 'active';
+          userDepartment = 'marketing';
+        }
+      })();
+    </script>
+  </body>
+</html>
--- a/06_js-debug/uebungen/u05_error-format-date/solution.html
+++ b/06_js-debug/uebungen/u05_error-format-date/solution.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Übung 05: FormatDate Fehler</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>Übung 05: FormatDate Fehler</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+      function formatDate(date) {
+        const options = { year: 'numeric', month: 'long', day: 'numeric' };
+        const formatedDate = date.toLocaleDateString('en-EN', options); // statt undefined 'en-EN'
+        return formatedDate;
+      }
+
+      // use moment or luxon instead: https://momentjs.com/
+
+      const date = new Date();
+      const days = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnertag', 'Freitag', 'Samstag'];
+
+      const month = date.getMonth() + 1;
+      const day = date.getDate();
+      const weekDay = date.getDay();
+      const year = date.getFullYear();
+
+      const hh = date.getHours() < 10 ? `0${date.getHours()}` : date.getHours();
+      const mm = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes();
+      const ss = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds();
+
+      console.log(`${day}.${month < 10 ? `0${month}` : month}.${year} ${hh}:${mm}:${ss}`);
+
+      console.log(formatDate(new Date('2023-05-31'))); // => 'May 31, 2023'
+      console.log(formatDate(new Date('2024-01-01'))); // => 'January 1, 2024'
+    </script>
+  </body>
+</html>
--- a/06_js-debug/uebungen/u06_error-benutzer/index.html
+++ b/06_js-debug/uebungen/u06_error-benutzer/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
--- a/06_js-debug/uebungen/u06_error-benutzer/solution.html
+++ b/06_js-debug/uebungen/u06_error-benutzer/solution.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Übung 6: Benutzer erstellen</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>Übung 6: Benutzer erstellen</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+      // Klammer zu hinzugefügt
+      function createUser(name, email, age) {
+        return {
+          name,
+          email,
+          age,
+          greet() {
+            console.log(`Hello, ${this.name}!`);
+          },
+          updateEmail(newEmail) {
+            this.email = newEmail;
+            console.log(`Email updated to ${this.email}`);
+          },
+          displayAge() {
+            console.log(`Age is ${this.age}`);
+          },
+        }; //geschweifte Klammer zu hinzugefügt
+      }
+
+      const users = [
+        createUser('Alice', 'alice@example.com', 30),
+        createUser('Bob', 'bob@example.com', 25),
+        createUser('Charlie', 'charlie@example.com', 35),
+      ];
+
+      users.forEach((user) => {
+        user.greet();
+        user.updateEmail(`new_${user.email}`);
+      });
+
+      console.log(users);
+
+      function calculateTotal(...numbers) {
+        return numbers.reduce((a, b) => Number(a) + Number(b), 0);
+      }
+
+      console.log('Total:', calculateTotal(10, 20, 30)); //Komma hinzugefügt
+      console.log('Total:', calculateTotal()); //=> 0
+    </script>
+  </body>
+</html>
--- a/06_js-debug/uebungen/u07_check-temperature/solution.html
+++ b/06_js-debug/uebungen/u07_check-temperature/solution.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Übung 7: checkTemperature Fehler</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>Übung 7: checkTemperature Fehler</h1>
+        <p>Versuche, den Code auszuführen, den Fehler zu identifizieren und ihn zu beheben.</p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      function checkTemperature(temperature) {
+        const threshold = 30;
+
+        // let message = '';
+
+        // if (temperature > threshold) {
+        //   message = "It's too hot outside!";
+        // } else {
+        //   message = 'The temperature is just right.';
+        // }
+
+        const message = temperature > threshold ? "It's too hot outside!" : 'The temperature is just right.';
+        return message;
+        // console.log(message);
+      }
+
+      console.log(checkTemperature(25)); // => "The temperature is just right."
+      console.log(checkTemperature(35)); // => "It's too hot outside!"
+    </script>
+  </body>
+</html>
--- a/06_js-debug/uebungen/u08_benutzer-anzeigen/solution.html
+++ b/06_js-debug/uebungen/u08_benutzer-anzeigen/solution.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Übung 8: Benutzer anzeigen</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>Übung 8: Benutzer anzeigen</h1>
+        <p>
+          Der folgende Code enthält mehrere Referenzfehler, die über verschiedene Teile des Codes verteilt sind. Deine
+          Aufgabe ist es, alle Referenzfehler zu identifizieren und zu beheben, um sicherzustellen, dass der Code
+          korrekt läuft.
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const userName = 'Emily';
+      const age = 67; // Alter hinzugefügt
+
+      function displayUserInfo() {
+        console.log(`User Name: ${userName}`); //user => userName
+        console.log(`User Age: ${age}`);
+      }
+
+      displayUserInfo();
+
+      function updateEmail(newEmail) {
+        const userEmail = newEmail; //const hinzugefügt, da neu
+        console.log('Email updated to ' + userEmail);
+      }
+
+      updateEmail('emily@example.com');
+
+      const calculateBmi = (weight, height) => weight / height ** 2;
+
+      const bmi = calculateBmi(70, 1.75);
+      console.log('BMI:', bmi);
+
+      function greetUser(name) {
+        if (name === 'Emily') {
+          console.log(`Welcome back, ${name}!`);
+        } else {
+          console.log(`Hello, ${name}!`); //Name -> name
+        }
+      }
+
+      greetUser('Michael'); //greetuser -> greetUser
+    </script>
+  </body>
+</html>
--- a/06_js-debug/uebungen/u09_parse-user-data/solution.html
+++ b/06_js-debug/uebungen/u09_parse-user-data/solution.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Übung 9: parseUserData Fehler</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>Übung 9: parseUserData Fehler</h1>
+        <p>Die Kommentare zeigen das erwartete Ergebnis.</p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      function parseUserData(jsonString) {
+        try {
+          const userData = JSON.parse(jsonString);
+
+          // hinzugefügt
+          if (typeof userData.name === 'undefined') {
+            return 'Error: name ist nicht vorhanden!';
+          }
+
+          if (typeof userData.age === 'undefined') {
+            return 'Error: age ist nicht angegeben';
+          }
+          if (typeof userData.name !== 'string') {
+            return 'Error: name ist nicht vom Typ string!';
+          }
+
+          if (typeof userData.age !== 'number') {
+            return 'Error: age ist nicht vom Typ number';
+          }
+          // end
+
+          return `User: ${userData.name}, Age: ${userData.age}`;
+        } catch (error) {
+          if (error instanceof Error) {
+            return `Error: ${error.message}`;
+          }
+          return error;
+        }
+      }
+
+      console.log(parseUserData('{"name": "Alice", "age": 30}')); // => 'User: Alice, Age: 30'
+      console.log(parseUserData('{"name": "Bob", "age": "thirty"}')); // => 'Error: Invalid data types'
+      console.log(parseUserData('{"age": "thirty"}')); // => 'Error: Invalid data types'
+      console.log(parseUserData('{"name": "Bob"}')); // => 'Error: Invalid data types'
+    </script>
+  </body>
+</html>
--- a/06_js-debug/uebungen/u10_einkaufspreis/solution.js
+++ b/06_js-debug/uebungen/u10_einkaufspreis/solution.js
@@ -0,0 +1,40 @@
+function calculateTotalPrice(items) {
+  let total = 0;
+  items.forEach((item) => {
+    total += Number(item.price); // Number parsen
+  });
+  return Number(total.toFixed(2));
+}
+
+const shoppingCart = [
+  { name: 'Laptop', price: 999.99 },
+  { name: 'Smartphone', price: 599.99 }, // string zu zahl
+  { name: 'Headphones', price: 199.99 }, // cost -> price
+];
+
+const totalPrice = calculateTotalPrice(shoppingCart);
+console.log('Total Price:', Number(totalPrice).toFixed(2));
+
+function displayUserProfile(user) {
+  console.log(`Name: ${user.name}`);
+  console.log(`Age: ${user.age}`);
+  console.log(`Email: ${user.email.toLowerCase()}`);
+}
+
+const userProfile = {
+  name: 'Sarah',
+  age: 'twenty-five',
+  email: 'SARAH@EXAMPLE.COM',
+};
+
+displayUserProfile(userProfile);
+
+function getFirstItemName(items) {
+  return items[0].name.toUpperCase();
+}
+
+console.log('First Item:', getFirstItemName(shoppingCart)); // => LAPTOP
+
+const numberList = '1,2,3,4,5';
+const sum = numberList.split(',').reduce((acc, num) => acc + Number(num), 0); //mit split zu einem arr
+console.log('Sum:', sum); // => 15
--- a/06_js-debug/uebungen/u11_calculate-avg-error/index.js
+++ b/06_js-debug/uebungen/u11_calculate-avg-error/index.js
@@ -0,0 +1,8 @@
+function calculateAverage(numbers) {
+  const total = numbers.reduce((sum, num) => sum + num, 10);
+  const average = total / numbers;
+  return average;
+}
+
+console.log(calculateAverage([10, 20, 30])); // => 20
+console.log(calculateAverage([5, 15, 25, 35])); // => 20
--- a/06_js-debug/uebungen/u11_calculate-avg-error/solution.js
+++ b/06_js-debug/uebungen/u11_calculate-avg-error/solution.js
--- a/06_js-debug/uebungen/u12_find-maximum-error/index.js
+++ b/06_js-debug/uebungen/u12_find-maximum-error/index.js
@@ -0,0 +1,14 @@
+// logical error
+function findMaximum(a, b, c) {
+  if (a > b && a > c) {
+    return a;
+  } else if (b > a && b > c) {
+    return b;
+  } else {
+    return c;
+  }
+}
+
+console.log(findMaximum(1, 2, 3)); // => 3
+console.log(findMaximum(102, 59, 18)); // => 102
+console.log(findMaximum(532, 532, 345)); // => 532
--- a/06_js-debug/uebungen/u12_find-maximum-error/solution.js
+++ b/06_js-debug/uebungen/u12_find-maximum-error/solution.js
--- a/06_js-debug/uebungen/u13_temp-converter/assets/js/main.js
+++ b/06_js-debug/uebungen/u13_temp-converter/assets/js/main.js
@@ -0,0 +1,17 @@
+'use strict';
+
+(() => {
+  // === DOM & VARS =======
+  const DOM = {};
+
+  // === INIT =============
+  const init = () => {};
+
+  // === EVENTHANDLER =====
+
+  // === XHR/FETCH ========
+
+  // === FUNCTIONS ========
+
+  init();
+})();
--- a/06_js-debug/uebungen/u13_temp-converter/assets/js/preset.js
+++ b/06_js-debug/uebungen/u13_temp-converter/assets/js/preset.js
@@ -0,0 +1,45 @@
+'use strict';
+
+(() => {
+  // ===== DOM =====
+  const DOM = {
+    temperatureForm: document.querySelector('#temperatureForm'),
+    celsiusInput: document.querySelector('#celsius'),
+    result: document.querySelector('#result'),
+  };
+
+  // ===== INIT =====
+  const init = () => {
+    DOM.temperatureForm.addEventListener('submit', handleFormSubmit);
+  };
+
+  // ===== EVENT HANDLERS =====
+  function handleFormSubmit(e) {
+    const celsius = DOM.celsiusInput.value;
+
+    if (!isNaN(celsius)) {
+      alert('Please enter a valid number');
+      return;
+    }
+
+    const fahrenheit = convertToFahrenheit(celsius);
+
+    displayResult(fahrenheit);
+
+    DOM.temperatureForm.reset();
+  }
+
+  // ===== FUNCTIONS =====
+  function convertToFahrenheit(celsius) {
+    if (typeof celsius === 'string') return 0;
+
+    return (celsius * 9) / 5 + 32;
+  }
+
+  function displayResult(result) {
+    DOM.result.textContent = result.toFixed(2);
+  }
+
+  // ===== CALL INIT =====
+  init();
+})();
--- a/06_js-debug/uebungen/u13_temp-converter/index.html
+++ b/06_js-debug/uebungen/u13_temp-converter/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Temperature Converter</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="assets/js/main.js" defer></script>
+  </head>
+  <body>
+    <div class="container py-5">
+      <h1>Temperature Converter</h1>
+
+      <form id="temperatureForm" class="mt-4">
+        <div class="col col-12 col-sm-10 col-lg-6">
+          <div class="row mb-3 align-items-center">
+            <label for="celsius" class="col-md-3 col-form-label">Celsius:</label>
+            <div class="col-sm-8">
+              <input type="text" id="celsius" name="celsius" class="form-control" required />
+            </div>
+          </div>
+        </div>
+
+        <div class="mt-4 w-100">
+          <button type="submit" id="convertBtn" class="btn btn-primary">Convert to Fahrenheit</button>
+        </div>
+      </form>
+
+      <div class="alert alert-light mt-4"><strong>Result</strong>: <span id="result"></span> °F</div>
+    </div>
+  </body>
+</html>
--- a/06_js-debug/uebungen/u14_counter-error/index.html
+++ b/06_js-debug/uebungen/u14_counter-error/index.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Counter Example</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div class="container py-5">
+      <h1>Counter</h1>
+
+      <div class="row mt-4">
+        <div class="col col-12 col-sm-10 col-lg-6">
+          <div class="input-group mb-3">
+            <span class="input-group-text" id="basic-addon1">Count:</span>
+            <input type="text" id="count" class="form-control" value="0" readonly />
+          </div>
+          <button id="incrementButton" class="btn btn-primary w-100">Increment</button>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      'use strict';
+
+      (() => {
+        // ===== DOM & VARS =====
+        const countEl = document.querySelector('#count');
+        const btnEl = document.querySelector('#incrementButton');
+
+        let counter = { count: 0 };
+
+        // ===== INIT =====
+        const init = () => {
+          btnEl.addEventListener('click', onClickIncrement);
+        };
+
+        // ===== EVENT HANDLER =====
+        function onClickIncrement() {
+          let count = counter.count;
+          count++;
+          countEl.value = counter.count;
+        }
+
+        // ===== CALL INIT =====
+        init();
+      })();
+    </script>
+  </body>
+</html>
--- a/06_js-debug/uebungen/u14_counter-error/solution.html
+++ b/06_js-debug/uebungen/u14_counter-error/solution.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Counter Example</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div class="container py-5">
+      <h1>Counter</h1>
+
+      <div class="row mt-4">
+        <div class="col col-12 col-sm-10 col-lg-6">
+          <div class="input-group mb-3">
+            <span class="input-group-text" id="basic-addon1">Count:</span>
+            <input type="text" id="count" class="form-control" value="0" readonly />
+          </div>
+          <button id="incrementButton" class="btn btn-primary w-100">Increment</button>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      'use strict';
+
+      (() => {
+        // === DOM & VARS =======
+        const DOM = {};
+
+        // === INIT =============
+        const init = () => {};
+
+        // === EVENTHANDLER =====
+
+        // === XHR/FETCH ========
+
+        // === FUNCTIONS ========
+
+        init();
+      })();
+    </script>
+  </body>
+</html>
--- a/06_js-debug/uebungen/uebungen-11-14-js-debug.zip
+++ b/06_js-debug/uebungen/uebungen-11-14-js-debug.zip
--- a/06_js-debug/unterricht/tag46/03_dry/03_range-helper.js
+++ b/06_js-debug/unterricht/tag46/03_dry/03_range-helper.js
@@ -91,3 +91,7 @@ function range(startOrEnd, end, step) {
    return rangeFromStartToEnd(0, startOrEnd);
  }
 }
+
+// range(5); // => [0, 1, 2, 3, 4]
+// range(1, 5); // => [1, 2, 3, 4]
+// range(0, 20, 5); // => [0, 5, 10, 15]
--- a/06_js-debug/unterricht/tag46/04_error-types/03_type-error.html
+++ b/06_js-debug/unterricht/tag46/04_error-types/03_type-error.html
@@ -33,6 +33,8 @@
          console.log('Hello, ' + name); // => 'Hello, 42' <- implizite Typkonvertierung
        }

+        console.log(3 <= '3px'); // <- implizite Typkonvertierung -> 3 <= NaN -> false
+
        greet(42);
      }
    </script>
--- a/06_js-debug/unterricht/tag46/05_logical-error/logical-error.html
+++ b/06_js-debug/unterricht/tag46/05_logical-error/logical-error.html
@@ -19,11 +19,11 @@
      {
        const n = 10;

-        // if (n % 2 === 0) {
-        //   console.log('odd'); // Annahme vertauscht
-        // } else {
-        //   console.log('even');
-        // }
+        if (n % 2 === 0) {
+          console.log('odd'); // Annahme vertauscht
+        } else {
+          console.log('even');
+        }

        // const evenNumbers = _.range(11).filter((n) => n % 2);
        const evenNumbers = _.range(11).filter((n) => n % 2 === 0);
--- a/06_js-debug/unterricht/tag47/01_demo-form-bug/assets/js/main.js
+++ b/06_js-debug/unterricht/tag47/01_demo-form-bug/assets/js/main.js
@@ -0,0 +1,57 @@
+'use strict';
+
+(() => {
+  // ===== DOM =====
+  const DOM = {
+    calculateForm: document.querySelector('#calculateForm'),
+    firstNumberInput: document.querySelector('#firstNumber'),
+    secondNumberInput: document.querySelector('#secondNumber'),
+    result: document.querySelector('#result'),
+  };
+
+  // console.log(DOM);
+
+  // ===== INIT =====
+  const init = () => {
+    DOM.calculateForm.noValidate = true; // DOM.calculateForm.setAttribute('novalidate','');
+    DOM.calculateForm.addEventListener('submit', handleFormSubmit);
+  };
+
+  // ===== EVENT HANDLERS =====
+  function handleFormSubmit(e) {
+    e.preventDefault();
+
+    if (hasInputsEmptyValues(DOM.firstNumberInput, DOM.secondNumberInput)) {
+      alert('Please enter a number in both fields');
+      return;
+    }
+
+    const num1 = getNumberValue(DOM.firstNumberInput);
+    const num2 = getNumberValue(DOM.secondNumberInput);
+
+    const sum = add(num1, num2);
+
+    displayResult(sum);
+    DOM.calculateForm.reset();
+  }
+
+  // ===== FUNCTIONS =====
+  const hasInputsEmptyValues = (inputOne, inputTwo) => {
+    // if (inputOne.value === '' || inputTwo.value === '') {
+    //   return true;
+    // } else {
+    //   return false;
+    // }
+    return inputOne.value === '' || inputTwo.value === '';
+  };
+
+  const getNumberValue = (input) => Number(input.value);
+  const add = (a, b) => Number(a) + Number(b);
+
+  const displayResult = (result) => {
+    DOM.result.textContent = result;
+  };
+
+  // ===== CALL INIT =====
+  init();
+})();
--- a/06_js-debug/unterricht/tag47/01_demo-form-bug/index.html
+++ b/06_js-debug/unterricht/tag47/01_demo-form-bug/index.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Debugging Demo</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="assets/js/main.js" defer></script>
+  </head>
+  <body>
+    <div class="container py-5">
+      <h1>Debugging Demo</h1>
+
+      <form id="calculateForm" class="mt-4">
+        <div class="col col-12 col-sm-10 col-lg-6">
+          <div class="row mb-3 align-items-center">
+            <label for="firstNumber" class="col-md-3 col-form-label">Number #1:</label>
+            <div class="col-sm-8">
+              <input type="number" id="firstNumber" name="firstNumber" class="form-control" required />
+            </div>
+          </div>
+        </div>
+
+        <div class="col col-12 col-sm-10 col-lg-6">
+          <div class="row mb-3 align-items-center">
+            <label for="secondNumber" class="col-md-3 col-form-label">Number #2:</label>
+            <div class="col-sm-8">
+              <input type="number" id="secondNumber" name="secondNumber" class="form-control" required />
+            </div>
+          </div>
+        </div>
+
+        <div class="mt-4 w-100">
+          <button type="submit" id="calculateBtn" class="btn btn-primary">Add Numbers</button>
+        </div>
+      </form>
+
+      <div class="alert alert-light mt-4"><strong>Result</strong>: <span id="result"></span></div>
+    </div>
+  </body>
+</html>
--- a/06_js-debug/unterricht/tag47/01_demo-form-bug/package-lock.json
+++ b/06_js-debug/unterricht/tag47/01_demo-form-bug/package-lock.json
@@ -0,0 +1,644 @@
+{
+  "name": "01_demo-form-bug",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "01_demo-form-bug",
+      "version": "1.0.0",
+      "devDependencies": {
+        "http-server": "^14.1.1"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/basic-auth": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
+      "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "5.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/corser": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz",
+      "integrity": "sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
+      "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
+      "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "he": "bin/he"
+      }
+    },
+    "node_modules/html-encoding-sniffer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
+      "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-encoding": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/http-proxy": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eventemitter3": "^4.0.0",
+        "follow-redirects": "^1.0.0",
+        "requires-port": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/http-server": {
+      "version": "14.1.1",
+      "resolved": "https://registry.npmjs.org/http-server/-/http-server-14.1.1.tgz",
+      "integrity": "sha512-+cbxadF40UXd9T01zUHgA+rlo2Bg1Srer4+B4NwIHdaGxAGGv59nYRnGGDJ9LBk7alpS0US+J+bLLdQOOkJq4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "basic-auth": "^2.0.1",
+        "chalk": "^4.1.2",
+        "corser": "^2.0.1",
+        "he": "^1.2.0",
+        "html-encoding-sniffer": "^3.0.0",
+        "http-proxy": "^1.18.1",
+        "mime": "^1.6.0",
+        "minimist": "^1.2.6",
+        "opener": "^1.5.1",
+        "portfinder": "^1.0.28",
+        "secure-compare": "3.0.1",
+        "union": "~0.5.0",
+        "url-join": "^4.0.1"
+      },
+      "bin": {
+        "http-server": "bin/http-server"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/opener": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+      "dev": true,
+      "license": "(WTFPL OR MIT)",
+      "bin": {
+        "opener": "bin/opener-bin.js"
+      }
+    },
+    "node_modules/portfinder": {
+      "version": "1.0.38",
+      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.38.tgz",
+      "integrity": "sha512-rEwq/ZHlJIKw++XtLAO8PPuOQA/zaPJOZJ37BVuN97nLpMJeuDVLVGRwbFoBgLudgdTMP2hdRJP++H+8QOA3vg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async": "^3.2.6",
+        "debug": "^4.3.6"
+      },
+      "engines": {
+        "node": ">= 10.12"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.15.3",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.3.tgz",
+      "integrity": "sha512-O9gl3zCl5h5blw1KGUzQKhA5oUXSl8rwUIM5o0S3nCXMliSvy5Dzx7/DJcI+SwgICv+IneSZwhBh1oSyEHA71A==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "es-define-property": "^1.0.1",
+        "side-channel": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/secure-compare": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz",
+      "integrity": "sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.1.tgz",
+      "integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.4",
+        "side-channel-list": "^1.0.1",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz",
+      "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/union": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz",
+      "integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==",
+      "dev": true,
+      "dependencies": {
+        "qs": "^6.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/url-join": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz",
+      "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/whatwg-encoding": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
+      "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+      "deprecated": "Use @exodus/bytes instead for a more spec-conformant and faster implementation",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    }
+  }
+}
--- a/06_js-debug/unterricht/tag47/01_demo-form-bug/package.json
+++ b/06_js-debug/unterricht/tag47/01_demo-form-bug/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "01_demo-form-bug",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "npx http-server -c-1 -p 3000"
+  },
+  "keywords": [],
+  "type": "module",
+  "devDependencies": {
+    "http-server": "^14.1.1"
+  }
+}
--- a/webseite-simple/about.html
+++ b/webseite-simple/about.html
@@ -1,31 +0,0 @@
-<!doctype html>
-<html lang="de">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Webseite</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
-    <link rel="stylesheet" href="/assets/css/main.css" />
-    <script src="/assets/js/main.js" defer></script>
-  </head>
-  <body>
-    <nav class="menu-main">
-      <ul>
-        <li><a href="/">Home</a></li>
-        <li><a href="about.html">About</a></li>
-        <li><a href="contact.html">Contact</a></li>
-        <li><a href="imprint.html">Imprint</a></li>
-      </ul>
-    </nav>
-    <main>
-      <div class="container py-5">
-        <h1>About</h1>
-        <p>
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis ullam obcaecati iure quisquam odio qui
-          minima aspernatur tenetur praesentium rerum, tempore in veritatis quibusdam eum reprehenderit necessitatibus
-          corrupti facere dolor!
-        </p>
-      </div>
-    </main>
-  </body>
-</html>
--- a/webseite-simple/contact.html
+++ b/webseite-simple/contact.html
@@ -1,31 +0,0 @@
-<!doctype html>
-<html lang="de">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Webseite</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
-    <link rel="stylesheet" href="/assets/css/main.css" />
-    <script src="/assets/js/main.js" defer></script>
-  </head>
-  <body>
-    <nav class="menu-main">
-      <ul>
-        <li><a href="/">Home</a></li>
-        <li><a href="about.html">About</a></li>
-        <li><a href="contact.html">Contact</a></li>
-        <li><a href="imprint.html">Imprint</a></li>
-      </ul>
-    </nav>
-    <main>
-      <div class="container py-5">
-        <h1>Home</h1>
-        <p>
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis ullam obcaecati iure quisquam odio qui
-          minima aspernatur tenetur praesentium rerum, tempore in veritatis quibusdam eum reprehenderit necessitatibus
-          corrupti facere dolor!
-        </p>
-      </div>
-    </main>
-  </body>
-</html>
--- a/webseite-simple/imprint.html
+++ b/webseite-simple/imprint.html
@@ -1,31 +0,0 @@
-<!doctype html>
-<html lang="de">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Webseite</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
-    <link rel="stylesheet" href="/assets/css/main.css" />
-    <script src="/assets/js/main.js" defer></script>
-  </head>
-  <body>
-    <nav class="menu-main">
-      <ul>
-        <li><a href="/">Home</a></li>
-        <li><a href="about.html">About</a></li>
-        <li><a href="contact.html">Contact</a></li>
-        <li><a href="imprint.html">Imprint</a></li>
-      </ul>
-    </nav>
-    <main>
-      <div class="container py-5">
-        <h1>Home</h1>
-        <p>
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis ullam obcaecati iure quisquam odio qui
-          minima aspernatur tenetur praesentium rerum, tempore in veritatis quibusdam eum reprehenderit necessitatibus
-          corrupti facere dolor!
-        </p>
-      </div>
-    </main>
-  </body>
-</html>
--- a/webseite-simple/index.html
+++ b/webseite-simple/index.html
@@ -1,31 +0,0 @@
-<!doctype html>
-<html lang="de">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Webseite</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
-    <link rel="stylesheet" href="/assets/css/main.css" />
-    <script src="/assets/js/main.js" defer></script>
-  </head>
-  <body>
-    <nav class="menu-main">
-      <ul>
-        <li><a href="/">Home</a></li>
-        <li><a href="about.html">About</a></li>
-        <li><a href="contact.html">Contact</a></li>
-        <li><a href="imprint.html">Imprint</a></li>
-      </ul>
-    </nav>
-    <main>
-      <div class="container py-5">
-        <h1>Home</h1>
-        <p>
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis ullam obcaecati iure quisquam odio qui
-          minima aspernatur tenetur praesentium rerum, tempore in veritatis quibusdam eum reprehenderit necessitatibus
-          corrupti facere dolor!
-        </p>
-      </div>
-    </main>
-  </body>
-</html>