07_js-debug/faq/reference-error.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>Reference Error</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>Reference Error</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+      // console.log(text); // reference-error.html:18 Uncaught ReferenceError: text is not defined
+
+      // var test = 'text';
+      (() => {
+        console.log(test);
+        var test = 'text';
+
+        function fn() {
+          console.log(test);
+          var test = 'text';
+        }
+        fn();
+      })();
+    </script>
+  </body>
+</html>

07_js-debug/unterricht/tag41/05_logical-error/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "05_logical-error",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "type": "commonjs"
+}

07_js-debug/unterricht/tag41/06_demo-form-bug/assets/js/main.js

@@ -11,6 +11,7 @@
 
   // ===== INIT =====
   const init = () => {
+    DOM.calculateForm.noValidate = true; // DOM.calculateForm.setAttribute('novalidate','')
     DOM.calculateForm.addEventListener('submit', handleFormSubmit);
   };
 
@@ -35,19 +36,21 @@
 
   // ===== FUNCTIONS =====
   function checkIfInputsAreEmpty(inputOne, inputTwo) {
-    if (inputOne.value && inputTwo.value) {
+    // if (inputOne.value && inputTwo.value) {
-      return false;
+    //   return false;
-    } else {
+    // } else {
-      return true;
+    //   return true;
-    }
+    // }
+    return !(inputOne.value && inputTwo.value);
   }
 
   function getNumberValue(input) {
-    return input.value;
+    // return input.valueAsNumber;
+    return Number(input.value);
   }
 
   function add(a, b) {
-    return a + b;
+    return Number(a) + Number(b);
   }
 
   function displayResult(result) {

07_js-debug/unterricht/tag41/06_demo-form-bug/index.html

@@ -5,7 +5,7 @@
     <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="js/assets/main.js" defer></script>
+    <script src="assets/js/main.js" defer></script>
   </head>
   <body>
     <div class="container py-5">

07_js-debug/unterricht/tag41/06_demo-form-bug/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "06_demo-form-bug",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "npx run-p serve",
+    "serve": "npx http-server -c-1 -p 3000"
+  },
+  "keywords": [],
+  "type": "module",
+  "devDependencies": {
+    "http-server": "^14.1.1",
+    "npm-run-all": "^4.1.5"
+  }
+}