02_advanced/unterricht/tag15/website-static/.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "workbench.colorCustomizations": {
+    "titleBar.activeForeground": "#333",
+    "titleBar.activeBackground": "#6bd0ab",
+    "titleBar.inactiveForeground": "#ddd",
+    "titleBar.inactiveBackground": "#6ca38f"
+  }
+}

02_advanced/unterricht/tag15/website-static/assets/css/main.css

@@ -11878,7 +11878,7 @@ body {
   width: 100px;
   height: 100px;
   border: 0.5rem solid #333;
-  background-color: tomato;
+  background-color: limegreen;
   padding: 1rem;
 }
 

02_advanced/unterricht/tag15/website-static/assets/js/build.js

@@ -0,0 +1,12 @@
+"use strict";
+(() => {
+  // dev/js/main.js
+  (() => {
+    const DOM = {};
+    const init = () => {
+      console.log("init...");
+    };
+    init();
+  })();
+})();
+//# sourceMappingURL=build.js.map

02_advanced/unterricht/tag15/website-static/assets/js/build.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../dev/js/main.js"],
+  "sourcesContent": ["'use strict';\n\n(() => {\n  // === DOM & VARS =======\n  const DOM = {};\n\n  // === INIT =============\n  const init = () => {\n    console.log('init...');\n  };\n\n  // === EVENTHANDLER =====\n\n  // === XHR/FETCH ========\n\n  // === FUNCTIONS ========\n\n  init();\n})();\n"],
+  "mappings": ";;;AAEA,GAAC,MAAM;AAEL,UAAM,MAAM,CAAC;AAGb,UAAM,OAAO,MAAM;AACjB,cAAQ,IAAI,SAAS;AAAA,IACvB;AAQA,SAAK;AAAA,EACP,GAAG;",
+  "names": []
+}

02_advanced/unterricht/tag15/website-static/assets/js/main.js

@@ -1,3 +0,0 @@
-'use strict';
-
-console.log('init');

02_advanced/unterricht/tag15/website-static/dev/js/main.js

@@ -0,0 +1,19 @@
+'use strict';
+
+(() => {
+  // === DOM & VARS =======
+  const DOM = {};
+
+  // === INIT =============
+  const init = () => {
+    console.log('init...');
+  };
+
+  // === EVENTHANDLER =====
+
+  // === XHR/FETCH ========
+
+  // === FUNCTIONS ========
+
+  init();
+})();

02_advanced/unterricht/tag15/website-static/dev/scss/main.scss

@@ -22,7 +22,7 @@ body {
   width: 100px;
   height: 100px;
   border: 0.5rem solid #333;
-  background-color: tomato;
+  background-color: limegreen;
   padding: 1rem;
 }
 

02_advanced/unterricht/tag15/website-static/index.html

@@ -6,7 +6,7 @@
     <title>Webseite mit HTML & CSS (SCSS)</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>
+    <script src="assets/js/build.js" defer></script>
   </head>
   <body>
     <!-- header.header-main>.content-box>figure.logo-main>img+figc -->

02_advanced/unterricht/tag15/website-static/package.json

@@ -8,6 +8,13 @@
   "type": "module",
   "main": "index.js",
   "scripts": {
-    "css": "npx sass dev/scss/main.scss:assets/css/main.css -w -q"
+    "css": "npx sass dev/scss/main.scss:assets/css/main.css -w -q",
+    "js": "npx esbuild dev/js/main.js --watch --bundle --sourcemap --outfile=assets/js/build.js",
+    "dev": "run-p css js"
+  },
+  "devDependencies": {
+    "esbuild": "^0.28.2",
+    "npm-run-all": "^4.1.5",
+    "sass": "^1.105.0"
   }
 }