new class js -advanced

2026-06-29 11:35:03 +02:00
parent ee8a87bf2a
commit 31c13250b0
104 changed files with 2632 additions and 138 deletions
--- a/02_advanced/.vscode/snippets.code-snippets
+++ b/02_advanced/.vscode/snippets.code-snippets
@@ -0,0 +1,73 @@
+{
+  "Output HTML Element": {
+    "scope": "html",
+    "prefix": "output",
+    "body": ["<div class=\"output alert alert-secondary my-3\"></div>"],
+    "description": "generate a div Element with output alert and alert secondary class"
+  },
+  "Bootstrap html": {
+    "scope": "html",
+    "prefix": "!bs",
+    "body": [
+      "<!DOCTYPE html>",
+      "<html lang=\"de\">",
+      "\t<head>",
+      "\t\t<meta charset=\"UTF-8\" />",
+      "\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />",
+      "\t\t<title>$0</title>",
+      "\t\t<link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css\" rel=\"stylesheet\" />",
+      "\t</head>",
+      "\t<body>",
+      "\t\t<main>",
+      "\t\t\t<div class=\"container py-5\">",
+      "\t\t\t\t<h1>$0</h1>",
+      "\t\t\t</div>",
+      "\t\t</main>",
+      "\t\t<script>",
+      "\t\t\t'use strict';",
+      "\t\t\t",
+      "\t\t</script>",
+      "\t</body>",
+      "</html>"
+    ],
+    "description": "Generate HTML with Bootstrap CDN and script-tag"
+  },
+  "$ und $$ helper function": {
+    "scope": "javascript,typescript",
+    "prefix": "$$$",
+    "body": [
+      "const $ = (qs) => document.querySelector(qs);",
+      "const $$ = (qs) => Array.from(document.querySelectorAll(qs));"
+    ],
+    "description": "$ and $$ shorthand helper function"
+  },
+
+  "JavaScript Dateivorlage": {
+    "scope": "javascript,typescript",
+    "prefix": "vjs",
+    "body": [
+      "'use strict';",
+      "",
+      "(() => {",
+      "",
+      "\t// === DOM & VARS =======",
+      "\tconst DOM = {};",
+      "",
+      "\t// === INIT =============",
+      "\tconst init = () => {",
+      "",
+      "\t}",
+      "",
+      "\t// === EVENTHANDLER =====",
+      "",
+      "\t// === XHR/FETCH ========",
+      "",
+      "\t// === FUNCTIONS ========",
+      "",
+      "\tinit();",
+      "",
+      "})();"
+    ],
+    "description": "JavaScript Dateivorlage"
+  }
+}