2026-08-14 14:10:13 +02:00
parent c56fd39868
commit 35c521b2d9
30 changed files with 5835 additions and 0 deletions
--- a/06_js-debug/.vscode/extensions.json
+++ b/06_js-debug/.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"
+  ]
+}
--- a/06_js-debug/.vscode/marp-theme.css
+++ b/06_js-debug/.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%;
+}
--- a/06_js-debug/.vscode/settings.json
+++ b/06_js-debug/.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"
+}
--- a/06_js-debug/.vscode/snippets.code-snippets
+++ b/06_js-debug/.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"
+  }
+}
--- a/06_js-debug/agenda.md
+++ b/06_js-debug/agenda.md
@@ -0,0 +1,686 @@
+---
+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 14 - 18
+
+---
+
+#### Tag 05
+
+**Inhalt:**
+
+- Repetition der Inhalte
+- Relationale Operatoren & Vergleichoperatoren
+- isNaN
+- Lexikographische Vergleiche
+- **Exkurs: HTML-Formularfelder**
+- 1:1 Meeting
+
+**Übungen:**
+
+Übung Kontaktformular mit HTML und BS
+
+---
+
+#### Tag 06
+
+**Inhalt:**
+
+- **Exkurs: HTML Formularfelder mit BS**
+- if else Verzweigung und ternärer Operator
+- logische Operatoren UND und ODER
+- unärer Operator (!)
+- String Methoden Part I
+
+**Übungen:**
+
+Übung 19 - 26
+
+---
+
+#### 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
+- local scoping
+- **Exkurs: Schleifen**
+
+**Übungen:**
+
+Übung 46 - 48
+
+---
+
+## JavaScript für Fortgeschrittene
+
+---
+
+#### Tag 11
+
+**Inhalt:**
+
+- Einführung in JS für Fortgeschrittene
+- Objekte in JS
+
+**Übungen:**
+
+Projektarbeit
+Abschlussquiz - JS Grundlagen
+
+---
+
+#### Tag 12
+
+**Inhalt:**
+
+- Destructuring von Objekten und Arrays
+- Rekursion
+
+**Übungen:**
+
+Übung 01 - 10
+
+---
+
+#### Tag 13
+
+**Inhalt:**
+
+- Promises
+- Callback-Hell
+- Installation von node (npm) und Windows Terminal (für Node)
+- **Exkurs: Statische Webseite mit Sass und HTML**
+- **Exkurs: Versionierung mit Github Part I**
+
+**Übungen:**
+
+---
+
+#### Tag 14
+
+**Inhalt:**
+
+- Promise Aufbau
+- Promise in Funktionen
+- File System von Node
+- commonjs vs esm
+- async await
+
+**Übungen:**
+
+Übung 09 - 11
+
+---
+
+#### Tag 15
+
+**Inhalt:**
+
+- Wiederholung der Inhalte
+- Promise.all()
+- **Exkurs: Switch Case Abfragen**
+- **Exkurs: Statische Webseite mit Sass und HTML**
+- **Exkurs: Versionierung mit Github Part I**
+- 1:1 Meeting
+
+---
+
+#### Tag 16
+
+**Inhalt:**
+
+- **Exkurs: Statische Webseite mit Sass und HTML Part II**
+- Mehrdimensionale Arrays
+
+**Übungen:**
+
+Projektarbeiten
+Übungen 11 -13
+
+---
+
+#### Tag 17
+
+**Inhalt:**
+
+- Chess-Beispiel
+- Arbeiten mit Fetch API
+- fetch mit Promise und async...await
+- Joke API auslesen
+- **Exkurs: Versionierung mit Github Part I**
+
+**Übungen:**
+
+Übungen 14 - 24
+
+---
+
+#### Tag 18
+
+**Inhalt:**
+
+- XML-HttpRequest und AJAX mit jQuery
+- Node Installation (Wiederholung)
+- Node Standardbib
+  - fs
+
+**Übungen:**
+
+Projektarbeit
+
+---
+
+#### Tag 19
+
+**Inhalt:**
+
+- NPM Befehle
+- CSV to HTML
+- Node Standardbib
+  - zlib (stream)
+  - Crypto
+- Abschluss von JS für Fortgeschrittene
+- Projektvorstellung 1 + 2
+
+**Übungen:**
+
+Übungen 25 - 31
+
+---
+
+#### Tag 20
+
+**Inhalt:**
+
+- **Einrichtung von Git**
+- **Exkurs: Webseite mit Gulp, SASS, HTML/CSS, JS**
+
+**Übungen:**
+
+Projektarbeit
+Übungen 31 - 32
+
+---
+
+# JavaScript und das Document Object Model (DOM)
+
+---
+
+#### Tag 21
+
+**Inhalt:**
+
+- Einführung in JS DOM
+- DOM Selection (querySelector, querySelectorAll)
+- $ & $$ Helper
+- CSS Selektoren
+
+**Übungen:**
+
+Übungen 01 - 05
+
+---
+
+#### Tag 22
+
+- Defer & Async
+- JS Dateien auslagern
+- Chat Gestaltung (DOMTokenList Objekt)
+- Optimierung von Projektstruktur
+- Events in JS MouseEvent, KeyboardEvent
+
+**Übungen:**
+
+Übungen 06 - 07
+
+---
+
+#### Tag 23
+
+**Inhalt:**
+
+- Projekt: Newsboard
+- HTML Element Progress
+- IDL-Attribut vs. Content-Attribut
+- HTML Attribute mit boolescher Zuweisung
+
+**Übungen:**
+
+Übung 08 - 10
+
+---
+
+#### Tag 24
+
+**Inhalt:**
+
+- Tooltip: HTML erweitern mit Data-Attribut
+- Dataset Attribut, DOMStringMap Objekt
+- getComputedStyle, Attribute mit boolscher Zuweisung
+
+**Übungen:**
+
+Übung 11 - 14
+
+---
+
+#### Tag 25
+
+**Inhalt:**
+
+- DOM Creation - Elemente erstellen
+- createElement() & appendChild()
+- Projekt: Produktmanager Part I
+- DOM Creation Befehle
+- Entfernen von Elementen
+
+**Übungen:**
+
+Übung 15 - 17
+**Projektarbeit / Content Factory**
+
+---
+
+#### Tag 26
+
+**Inhalt:**
+
+- Import von Modulen in JS (Browserseitig)
+- Separation of Concerns
+- Projekt: Produktmanager final
+- DOM Traversal Befehle & alle DOM Bereiche
+- insertBefore(), appendChild(), append(), prepend(), before(), after()
+- Refactoring von Produktmanager mit Template
+
+**Übungen:**
+
+Übung 18 + optionale Übungen
+**Projektarbeit / Content Factory**
+
+---
+
+#### Tag 27
+
+**Inhalt:**
+
+- **Exkurs: Weitere Events: Drag and Drop**
+- **Rest API erstellen mit Express**
+- JS DOM Projektvorstellung
+- Abschlussquiz JS DOM
+
+**Übungen:**
+
+Projekte
+
+---
+
+#### Tag 28
+
+**Inhalt:**
+
+- **Exkurs: DOM Inhalte über REST API mit Express Part I**
+- **Routing in JS**
+- CRUD - Create - (Read) - Update - Delete
+- Object Methoden.
+- Verwendung von Modulen (Bootstrap)
+
+**Übungen:**
+
+Projekte & optionale Übungen
+
+---
+
+#### Tag 29
+
+**Inhalt:**
+
+- **Exkurs: DOM Inhalte über mit REST API Express**
+- **Erweiterung Frontend um REST API**
+- CRUD - Create - Read - Update - Delete
+- BREAD - Browse - Read - Edit - Add - Delete
+- Verwendung von Modulen (Modal von BS, Toastify, Splide)
+
+**Übungen**
+
+Projekte + weiteres Modul einbinden
+
+---
+
+#### Tag 30
+
+- **Projektfinalisierung Express + REST API**
+- Einführung in Typescript
+- Meeting
+
+---
+
+### Tag 31
+
+**Inhalt:**
+
+- Typescript Grundlagen
+- Typescript Annotationen
+- Typescript "more Types"
+
+**Übungen:**
+
+Übungen 1 - 5
+
+---
+
+### Tag 32
+
+**Inhalt:**
+
+- Typescript Annotationen
+- Primitive Types, Object, Union Types
+- type statement vs interface
+- Type Assertion with as and <>
+- Typescript "more Types"
+
+**Übungen:**
+
+Übungen 4 - 9
+
+---
+
+### Tag 33
+
+**Inhalt:**
+
+- Typescript "more Types"
+  - Interface, as statement, literale
+- Typescript Narrowing with Guards
+  - truthiness, equality, in-operator, type-predicate
+- TS Funktionen und Objekte
+
+**Übungen:**
+
+Übungen 10 - 19
+
+---
+
+### Tag 34
+
+**Inhalt:**
+
+- TS Funktionen und Objekte
+- Abschluss TypeScript Grundlagen
+
+**Übungen:**
+
+Übungen 20 - 31
+Projektarbeit
+
+---
+
+### Tag 35
+
+**Inhalt:**
+
+- Abschlussquiz
+- Projekt-Webseite in TS
+- Optimierung mit KI
+- 1:1 Meeting
+
+**Übungen:**
+
+Projektarbeit
+
+---
+
+### Tag 36
+
+**Inhalt:**
+
+- **Exkurs: Finalisierung Projekt Webseite in TS (Gulp)**
+
+
+---
+
+# Einführung in React
+
+---
+
+
+### Tag 37
+
+**Inhalt:**
+
+- Einführung in REACT
+- VDOM von REACT
+- ES6 Module mit ohne ohne Bundler
+
+**Übungen:**
+
+Übung 01 - 03
+
+---
+
+### Tag 38
+
+**Inhalt:**
+
+- Build Tools im Vergleich &amp; Einführung in Vite
+- Beispiele der Gestaltungsmöglichkeiten in Frameworks
+- Layout & wiederverwendbare Komponenten
+- EventHandler in React
+
+**Übungen:**
+
+Übung 04 - 07
+
+---
+
+### Tag 39
+
+**Inhalt:**
+
+- Layout & wiederverwendbare Komponenten Part II
+- EventHandler in React `onSubmit`, `onChange`, `onClick`
+- Hooks in React.
+
+**Übungen:**
+
+offene Übungen.
+Übung 08 - 11
+
+---
+
+### Tag 40
+
+**Inhalt:**
+
+- Einführung in Hooks in React.
+- Hooks in React. `useState`.
+
+**Übungen:**
+
+Übung 12 - 13
+
+---
+
+
+### Tag 41
+
+**Inhalt:**
+
+- Hooks in React. `useState`, `useReducer`, `useContext`, `useId`.
+- Routing in React
+- Verschachtelte Routen und Layout-Komponenten
+
+**Übungen:**
+
+Übung 14 - 15
+
+---
+
+### Tag 42
+
+**Inhalt:**
+
+- Verschachtelte Routen und Layout-Komponenten
+- Formulare in React
+- Validierung classic
+
+**Übungen:**
+
+Übung 16 - 18
+
+---
+
+### Tag 43
+
+**Inhalt:**
+
+- Validierung mit `react-hook-form` und Schema Objekten
+- Hook: `useEffect`. Arbeiten mit asynchronen Daten.
+- Asynchron arbeiten mit axios/ fetch
+
+**Übungen:**
+
+Übung 19
+
+---
+
+### Tag 44
+
+**Inhalt:**
+
+- Aktualisierung von Node
+- Testing in React
+- Mocking mit async Data
+- Weitere Techniken: Snapshot & Cypress
+
+**Übungen:**
+
+Übung 20
+
+---
+
+### Tag 45
+
+**Inhalt:**
+
+- Typische Fehlermeldungen: Syntaxfehler, Referenzfehler, TypeError
+- Einrichtung von TS, Testing
+- Logische Fehler
+- **Exkurs: Sass 7 on 1 Struktur**
+
+**Übungen:**
+Projektarbeit
+
+---
--- a/06_js-debug/linksammlung.md
+++ b/06_js-debug/linksammlung.md
@@ -0,0 +1,122 @@
+# Linksammlung
+
+## Repo
+
+- <https://git.gkontra.de/ptorrel/JS>
+
+## Allgemeine Links
+
+- [StackOverflow Survey 2023](https://survey.stackoverflow.co/2023)
+- [StackOverflow Survey 2024](https://survey.stackoverflow.co/2024)
+- [StackOverflow Survey 2025](https://survey.stackoverflow.co/2025)
+- [State Of JS 2023](https://2023.stateofjs.com/en-US)
+- [State Of JS 2024](https://2024.stateofjs.com/en-US)
+- [State Of JS 2025](https://2025.stateofjs.com/en-US)
+- [Bootstrap 5](https://getbootstrap.com/)
+- [MDN - Mozilla Developer Network](https://developer.mozilla.org/)
+- [JavaScript Historie](https://de.wikipedia.org/wiki/JavaScript)
+- [Can I Use](https://caniuse.com/)
+- [ASCII Table](https://asciitable.xyz/)
+- [HTML Entities Liste (W3c)](https://dev.w3.org/html5/html-author/charref)
+- [HTML Entities & Tastaturkürzel](https://www.key-shortcut.com/html-entities/alle-entitaeten)
+- [What the f\*ck JS?](https://github.com/denysdovhan/wtfjs)
+- [CSS BEM (Block-Element-Modifier)](https://getbem.com/introduction/)
+
+## Tools/ Software
+
+- [Microsoft Powertoys](https://learn.microsoft.com/fr-fr/windows/powertoys/install?tabs=gh%2Cextract-094)
+- [Tipp10](https://online.tipp10.com/de/)
+- [NVM - Node Version Manager](https://github.com/coreybutler/nvm-windows/releases/download/1.2.2/nvm-setup.zip)
+- [Git - SCM](https://git-scm.com/)
+
+## Passwordmanager
+
+- [Enpass](https://www.enpass.io/pricing/)
+- [1password](https://1password.com/de/pricing/password-manager)
+- [KeepassXC](https://keepassxc.org/)
+- [Safe in cloud](https://safe-in-cloud.com/)
+- [BitWarden](https://bitwarden.com/de-de/)
+<!-- - [Dashlane](https://www.dashlane.com/) -->
+
+## JS Tuts
+
+- [JS CheatSheet](https://dev.to/devsmitra/28-javascript-array-hacks-a-cheat-sheet-for-developer-5769)
+
+## CSS/SCSS Tuts
+
+- [CSS Reference](https://cssreference.io/)
+- [CSS Tricks - Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+- [CSS Flexboxfroggy](https://flexboxfroggy.com/#de)
+- [CSS Gridgarden](https://cssgridgarden.com/#de)
+
+## JS Styleguide
+
+- [AirBnb Styleguide](https://github.com/airbnb/javascript)
+- [Google](https://google.github.io/styleguide/jsguide.html)
+- [jQuery Styleguide](https://contribute.jquery.org/style-guide/js/)
+- [MDN (ES6) Styleguide](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Writing_style_guide/Code_style_guide/JavaScript)
+
+## Fonts
+
+- [Hack Font](https://sourcefoundry.org/hack/)
+- [Meslo Nerd Font](https://github.com/romkatv/powerlevel10k#fonts)
+- [Google Fonts Download](https://gwfh.mranftl.com/fonts)
+- [50 Best Google Fonts](https://www.pagecloud.com/blog/best-google-fonts-pairings)
+- [200 best google Webfonts](https://www.awwwards.com/20-best-web-fonts-from-google-web-fonts-and-font-face.html)
+- [Google Fonts](https://fonts.google.com/)
+- [FontAwesome](https://fontawesome.com/icons?d=gallery)
+- [FontSquirrl](https://www.fontsquirrel.com/)
+- [Dafont](https://www.dafont.com/de/)
+
+## Bilder/ Vektoren
+
+- [Freepik](https://www.freepik.com/)
+- [Flaticon](https://www.flaticon.com/)
+- [Pexels](https://www.pexels.com/de-de/)
+- [FavIcon Generator](https://realfavicongenerator.net/)
+- [SVG Flaggen](https://hampusborgos.github.io/country-flags/)
+- [Flagicons](https://flagicons.lipis.dev/)
+
+## Farben
+
+- [CSS Gradient](https://cssgradient.io/)
+- [Color Adobe](https://color.adobe.com/de/create/color-wheel)
+- [Color Adobe Explore](https://color.adobe.com/de/explore)
+
+## CSS/SCSS Tuts
+
+- [CSS Reference](https://cssreference.io/)
+- [CSS Tricks - Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+- [CSS Flexboxfroggy](https://flexboxfroggy.com/#de)
+- [CSS Gridgarden](https://cssgridgarden.com/#de)
+- [CSS Sticky Footer](https://css-tricks.com/couple-takes-sticky-footer/)
+- [SASS Structure YT](https://www.youtube.com/watch?v=9Ld-aOKsEDk&t=47s)
+- [SASS Structure Guidelines](https://sass-guidelin.es/#architecture)
+
+## Terminals
+
+- [iterm - Unix](https://iterm2.com/) - RECOMMENDED (WIN)
+- [Ghostty - Unix](https://ghostty.org/) - NEW
+- [Warp](https://www.warp.dev/) - NEW
+- [Hyper.js](https://hyper.is/)
+- [Windows Terminal](https://apps.microsoft.com/detail/9n0dx20hk701?icid=CNavAppsWindowsApps&hl=de-DE&gl=DE) - RECOMMENDED (WIN)
+- [Git Bash](https://git-scm.com/)
+- [Cmdr Terminal mit Bash](https://cmder.app/)
+
+## JS Plugins
+
+- [Floating UI](https://floating-ui.com/)
+
+## KI Tools
+
+- [AI Models](https://artificialanalysis.ai/models)
+
+## REST API
+
+- [Enable-Cors](https://enable-cors.org/) - CORS Settings für Server/Client
+
+
+## React
+
+- [useHooks](https://usehooks.com/)
+- [react-hook-form](https://react-hook-form.com/)