init project

.gitignore

@@ -0,0 +1,11 @@
+node_modules/
+dist/
+.env
+.env.local
+.env.*.local
+.DS_Store
+*.log
+.vite/
+coverage/
+.idea/
+# .vscode/

01_grundlagen/.vscode/extensions.json

@@ -0,0 +1,15 @@
+{
+  "recommendations": [
+    "kamikillerto.vscode-colorize",
+    "sleistner.vscode-fileutils",
+    "bierner.github-markdown-preview",
+    "bradgashler.htmltagwrap",
+    "zhuangtongfa.material-theme",
+    "techer.open-in-browser",
+    "esbenp.prettier-vscode",
+    "pdconsec.vscode-print",
+    "vscode-icons-team.vscode-icons",
+    "formulahendry.auto-rename-tag",
+    "tomoki1207.pdf"
+  ]
+}

01_grundlagen/.vscode/marp-theme.css

@@ -0,0 +1,332 @@
+/* @theme marp-theme */
+
+@charset "UTF-8";
+/*!
+ * Marp Dracula theme.
+ * @theme marp-theme
+ * @author Daniel Nicolas Gisolfi & modified by Philippe Botzek
+ *
+ * @auto-scaling true
+ * @size 4:3 960px 720px
+ * @size 16:9 1280px 720px
+ */
+
+@import url('https://fonts.googleapis.com/css?family=Lato:400,900|IBM+Plex+Sans:400,700');
+
+:root {
+  --dracula-background: #282a36;
+  --dracula-current-line: #44475a;
+  --dracula-foreground: #f8f8f2;
+  --dracula-comment: #6272a4;
+  --dracula-cyan: #8be9fd;
+  --dracula-green: #50fa7b;
+  --dracula-orange: #ffb86c;
+  --dracula-pink: #ff79c6;
+  --dracula-purple: #bd93f9;
+  --dracula-red: #ff5555;
+  --dracula-yellow: #f1fa8c;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: var(--dracula-background);
+}
+
+/* Dracula Foreground */
+.hljs,
+.hljs-subst,
+.hljs-typing,
+.hljs-variable,
+.hljs-template-variable {
+  color: var(--dracula-foreground);
+}
+
+/* Dracula Comment */
+.hljs-comment,
+.hljs-quote,
+.hljs-deletion {
+  color: var(--dracula-comment);
+}
+
+/* Dracula Cyan */
+.hljs-meta .hljs-doctag,
+.hljs-built_in,
+.hljs-selector-tag,
+.hljs-section,
+.hljs-link,
+.hljs-class {
+  color: var(--dracula-cyan);
+}
+
+/* Dracula Green */
+.hljs-title {
+  color: var(--dracula-green);
+}
+
+/* Dracula Orange */
+.hljs-params {
+  color: var(--dracula-orange);
+}
+
+/* Dracula Pink */
+.hljs-keyword {
+  color: var(--dracula-pink);
+}
+
+/* Dracula Purple */
+.hljs-literal,
+.hljs-number {
+  color: var(--dracula-purple);
+}
+
+/* Dracula Red */
+.hljs-regexp {
+  color: var(--dracula-red);
+}
+
+/* Dracula Yellow */
+.hljs-string,
+.hljs-name,
+.hljs-type,
+.hljs-attr,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition,
+.hljs-template-tag {
+  color: var(--dracula-yellow);
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-title,
+.hljs-section,
+.hljs-doctag,
+.hljs-type,
+.hljs-name,
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-params,
+.hljs-emphasis {
+  font-style: italic;
+}
+
+svg[data-marp-fitting='svg'] {
+  max-height: 580px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0.5em 0 0 0;
+  color: var(--dracula-pink);
+}
+h1 strong,
+h2 strong,
+h3 strong,
+h4 strong,
+h5 strong,
+h6 strong {
+  font-weight: inherit;
+}
+
+h1 {
+  font-size: 1.8em;
+}
+
+h2 {
+  font-size: 1.5em;
+}
+
+h3 {
+  font-size: 1.3em;
+}
+
+h4 {
+  font-size: 1.1em;
+}
+
+h5 {
+  font-size: 1em;
+}
+
+h6 {
+  font-size: 0.9em;
+}
+
+p,
+blockquote {
+  margin: 1em 0 0 0;
+}
+
+ul > li,
+ol > li {
+  margin: 0.3em 0 0 0;
+  color: var(--dracula-cyan);
+}
+ul > li > p,
+ol > li > p {
+  margin: 0.6em 0 0 0;
+}
+
+code {
+  display: inline-block;
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 0.8em;
+  letter-spacing: 0;
+  margin: -0.1em 0.15em;
+  padding: 0.1em 0.2em;
+  vertical-align: baseline;
+  color: var(--dracula-green);
+}
+
+pre {
+  display: block;
+  margin: 1em 0 0 0;
+  min-height: 1em;
+  overflow: visible;
+}
+pre code {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 100%;
+  padding: 0.5em;
+  font-size: 0.7em;
+}
+pre code svg[data-marp-fitting='svg'] {
+  max-height: calc(580px - 1em);
+}
+
+blockquote {
+  margin: 1em 0 0 0;
+  padding: 0 1em;
+  position: relative;
+  color: var(--dracula-orange);
+}
+blockquote::after,
+blockquote::before {
+  content: '“';
+  display: block;
+  font-family: 'Times New Roman', serif;
+  font-weight: bold;
+  position: absolute;
+  color: var(--dracula-green);
+}
+blockquote::before {
+  top: 0;
+  left: 0;
+}
+blockquote::after {
+  right: 0;
+  bottom: 0;
+  transform: rotate(180deg);
+}
+blockquote > *:first-child {
+  margin-top: 0;
+}
+
+mark {
+  background: transparent;
+}
+
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  margin: 1em 0 0 0;
+}
+table th,
+table td {
+  padding: 0.2em 0.4em;
+  border-width: 1px;
+  border-style: solid;
+}
+
+section {
+  font-size: 35px;
+  font-family: 'IBM Plex Sans';
+  line-height: 1.35;
+  letter-spacing: 1.25px;
+  padding: 70px;
+  color: var(--dracula-foreground);
+  background-color: var(--dracula-background);
+}
+section > *:first-child,
+section > header:first-child + * {
+  margin-top: 0;
+}
+section a,
+section mark {
+  color: var(--dracula-red);
+}
+section code {
+  background: var(--dracula-current-line);
+  color: var(--dracula-current-green);
+}
+section h1 strong,
+section h2 strong,
+section h3 strong,
+section h4 strong,
+section h5 strong,
+section h6 strong {
+  color: var(--dracula-current-line);
+}
+section pre > code {
+  background: var(--dracula-current-line);
+}
+section header,
+section footer,
+section section::after,
+section blockquote::before,
+section blockquote::after {
+  color: var(--dracula-comment);
+}
+section table th,
+section table td {
+  border-color: var(--dracula-current-line);
+}
+section table thead th {
+  background: var(--dracula-current-line);
+  color: var(--dracula-yellow);
+}
+section table tbody > tr:nth-child(even) td,
+section table tbody > tr:nth-child(even) th {
+  background: var(--dracula-current-line);
+}
+
+header,
+footer,
+section::after {
+  box-sizing: border-box;
+  font-size: 66%;
+  height: 70px;
+  line-height: 50px;
+  overflow: hidden;
+  padding: 10px 25px;
+  position: absolute;
+  color: var(--dracula-comment);
+}
+
+header {
+  left: 0;
+  right: 0;
+  top: 0;
+}
+
+footer {
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+section::after {
+  right: 0;
+  bottom: 0;
+  font-size: 80%;
+}

01_grundlagen/.vscode/settings.json

@@ -0,0 +1,30 @@
+{
+  "workbench.iconTheme": "vscode-icons",
+  "workbench.colorTheme": "One Dark Pro",
+  "prettier.printWidth": 120,
+  "prettier.singleQuote": true,
+  "editor.hover.enabled": "on",
+  "editor.wordWrap": "on",
+  "explorer.confirmDelete": false,
+  "explorer.confirmDragAndDrop": false,
+  "editor.quickSuggestionsDelay": 600,
+  "editor.tabSize": 2,
+  "editor.formatOnSave": true,
+  "emmet.includeLanguages": {
+    "javascript": "javascriptreact",
+    "ejs": "html"
+  },
+  "html.format.unformatted": "wbr,%",
+  "files.associations": {
+    "*.ejs": "html"
+  },
+  "editor.fontFamily": "'MesloLGS NF', Hack, Consolas, 'Courier New', monospace",
+  "oneDarkPro.markdownStyle": false,
+  "explorer.compactFolders": false,
+  "workbench.editor.labelFormat": "short",
+  "editor.hover.delay": 800,
+  "editor.bracketPairColorization.enabled": true,
+  "editor.guides.bracketPairs": "active",
+  "markdown.marp.themes": ["./.vscode/marp-theme.css"],
+  "markdown-preview-github-styles.colorTheme": "light"
+}

01_grundlagen/.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"
+  }
+}

01_grundlagen/agenda.md

@@ -0,0 +1,221 @@
+---
+marp: true
+theme: default
+---
+
+## JavaScript Grundlagen Teil 1
+
+---
+
+#### Tag 01
+
+**Inhalt:**
+
+- Vorstellungsrunde
+- Einrichtung der IDE
+- Tools für die Webentwicklung (Emmet, Markdown, VS-Code)
+- Arbeiten mit VSCode
+- Konsolenausgaben mit `console.log()`
+
+**Übungen:**
+
+- Übungen Content Factory
+
+---
+
+#### Tag 02
+
+**Inhalt:**
+
+- Dialogfenster in JS `prompt()`, `alert()`, `confirm()`
+- Kommentare in JS
+- Rechnen in JS
+- Datentyp String, Number, Boolean
+- literal und typeof
+- Prioritätsreihenfolge
+
+**Übungen:**
+
+Übung 3 - 6
+
+---
+
+#### Tag 03
+
+**Inhalt:**
+
+- Variablen und Konstanten in JS
+- Zusammengesetzte Zuweisungsoperatoren
+- Increment & Decrement
+- Strings verketten mit +
+
+**Übungen:**
+
+Übung 7 - 12
+
+---
+
+#### Tag 04
+
+**Inhalt:**
+
+- Escape-Notation
+- Implizite und explizite Typkonvertierung
+- NaN - Paradoxon
+- Math Object
+- Number.toFixed()
+
+**Übungen:**
+
+Übung 13 - 15
+
+---
+
+#### Tag 05
+
+**Inhalt:**
+
+- Repetition der Inhalte
+- Relationale Operatoren & Vergleichoperatoren
+- Selbstständiges Erarbeiten der Inhalte
+- Lexikographische Vergleiche
+- **Exkurs: HTML-Formularfelder**
+- 1:1 Meeting
+
+**Übungen:**
+
+Übung 16 - 22
+
+---
+
+#### Tag 06
+
+**Inhalt:**
+
+- **Exkurs: HTML Formularfelder mit BS**
+- logische Operatoren UND und ODER
+- unärer Operator (!)
+- String Methoden Part I
+
+**Übungen:**
+
+Übung 23 - 25
+
+---
+
+#### Tag 07
+
+**Inhalt:**
+
+- String Methoden Part II
+- Funktionen in JS
+- Funktionen mit Übergabeparameter
+- Funktionen mit Rückgabewerten
+
+**Übungen:**
+
+Übung 26 - 35
+
+---
+
+#### Tag 08
+
+**Inhalt:**
+
+- Funktionen mit Übergabeparameter
+- Funktionen mit Rückgabewerten
+- Guards
+- Array Part 1
+
+**Übungen:**
+
+Übung 35 - 38
+
+---
+
+#### Tag 09
+
+**Inhalt:**
+
+- Array Methoden toSorted, toReversed, toSpliced
+- toSorted, toReversed
+- Array sort mit "compare function"
+- Array: Higher Order Funktionen Part (sort map, forEach, reduce, some, every)
+
+**Übungen:**
+
+Übung 39 - 48
+
+---
+
+#### Tag 10
+
+**Inhalt:**
+
+- Array.find und Array.findIndex
+- Alle Array Higher Order Funktionen im Überblick
+- **Exkurs: Schleifen**
+
+**Übungen:**
+
+Übung 46 - 48
+
+---
+
+## JavaScript für Fortgeschrittene
+
+---
+
+#### Tag 11
+
+**Inhalt:**
+
+- Einführung in JS für Fortgeschrittene
+- Objekte in JS
+- Destructuring von Objekten und Arrays
+
+**Übungen:**
+
+Übung 01 - 03
+
+---
+
+#### Tag 12
+
+**Inhalt:**
+
+- Rekursion
+- Promises
+- Callback-Hell
+
+**Übungen:**
+
+Übung 04 - 06
+
+---
+
+#### Tag 13
+
+**Inhalt:**
+
+- Installation von node (npm)
+- **Exkurs: Switch Case Abfragen**
+- **Exkurs: Statische Webseite mit Sass und HTML**
+- **Exkurs: Versionierung mit Github Part I**
+
+**Übungen:**
+
+---
+
+#### Tag 14
+
+**Inhalt:**
+
+- commonjs vs esm
+- async await
+- Wiederholung der Inhalte
+- 1:1 Meeting
+
+**Übungen:**
+
+Übung 05 - 10

LICENCE

@@ -0,0 +1,12 @@
+© 2026 Philippe Torrel - GKONTRA. Alle Rechte vorbehalten.
+
+Dieses Unterrichtsmaterial ist urheberrechtlich geschützt. 
+Die Nutzung ist ausschließlich den berechtigten Teilnehmern des Kurses 
+"[KURSNAME]" für den persönlichen, modulbezogenen Gebrauch gestattet.
+
+Untersagt ist insbesondere:
+- Die Weitergabe, der Verkauf oder die Verteilung des Materials (digital oder ausgedruckt) an Dritte.
+- Die Veröffentlichung des Materials auf anderen Plattformen oder im Internet.
+- Die Nutzung des Materials für eigene kommerzielle Lehrzwecke außerhalb dieses Kurses.
+
+Mit dem Zugriff auf dieses Repository stimmen Sie diesen Nutzungsbedingungen zu.