diff --git a/04_typescript.zip b/04_typescript.zip deleted file mode 100644 index c59dfa6..0000000 Binary files a/04_typescript.zip and /dev/null differ diff --git a/04_typescript/agenda.md b/04_typescript/agenda.md index 87cdfff..f300d65 100644 --- a/04_typescript/agenda.md +++ b/04_typescript/agenda.md @@ -542,83 +542,11 @@ Projektarbeit --- -# Einführung in React - ---- - ### Tag 36 **Inhalt:** - **Exkurs: Finalisierung Projekt Webseite in TS (Gulp)** -- Einführung in REACT -- VDOM von REACT -- React im Vergleich zu anderen Frameworks (Stats) -- Verwendung von Bundlern -- Build Tools im Vergleich & Einführung in Vite -- Komponenten in React -**Übungen:** -Übung 01 - 03 ---- - -### Tag 37 - -**Inhalt:** - -- Einsatz von Bundlern -- Komponenten in React -- Wiederverwendbare Komponenten in React -- Gestaltungsmöglichkeiten in Frameworks -- EventHandler in React - -**Übungen:** - -Übung 04 - 07 - ---- - -### Tag 38 - -**Inhalt:** - -- Beispiele der Gestaltungsmöglichkeiten in Frameworks -- Layout & wiederverwendbare Komponenten -- EventHandler in React - -**Übungen:** - -Übung 08 - 11 - ---- - -### Tag 39 - -**Inhalt:** - -- Layout & wiederverwendbare Komponenten Part II -- EventHandler in React `onSubmit`, `onChange`, `onClick` -- Hooks in React. - -**Übungen:** - -offene Übungen. -Übung 12 - 14 - ---- - -### Tag 40 - -**Inhalt:** - -- Hooks in React. `useState`, `useReducer`, `useContext`, `useId`. -- Routing in React -- Verschachtelte Routen und Layout-Komponenten - -**Übungen:** - -Übung 15 - ---- diff --git a/04_typescript/unterricht/tag36/README.md b/04_typescript/unterricht/tag36/README.md new file mode 100644 index 0000000..7cb4e5f --- /dev/null +++ b/04_typescript/unterricht/tag36/README.md @@ -0,0 +1,4 @@ +# Exkurs: Webseite in TS finalisiert + +- mit Copilot und mit Claude Code zum Vergleich +- Webseite Struktur mit `gulp` optimiert. \ No newline at end of file diff --git a/05_react.zip b/05_react.zip new file mode 100644 index 0000000..018b866 Binary files /dev/null and b/05_react.zip differ diff --git a/05_react/.vscode/extensions.json b/05_react/.vscode/extensions.json new file mode 100644 index 0000000..bb659e6 --- /dev/null +++ b/05_react/.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" + ] +} diff --git a/05_react/.vscode/marp-theme.css b/05_react/.vscode/marp-theme.css new file mode 100644 index 0000000..90ea8da --- /dev/null +++ b/05_react/.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%; +} diff --git a/05_react/.vscode/settings.json b/05_react/.vscode/settings.json new file mode 100644 index 0000000..3fa021c --- /dev/null +++ b/05_react/.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" +} diff --git a/05_react/.vscode/snippets.code-snippets b/05_react/.vscode/snippets.code-snippets new file mode 100644 index 0000000..259f93d --- /dev/null +++ b/05_react/.vscode/snippets.code-snippets @@ -0,0 +1,73 @@ +{ + "Output HTML Element": { + "scope": "html", + "prefix": "output", + "body": ["
"], + "description": "generate a div Element with output alert and alert secondary class" + }, + "Bootstrap html": { + "scope": "html", + "prefix": "!bs", + "body": [ + "", + "", + "\t", + "\t\t", + "\t\t", + "\t\t$0", + "\t\t", + "\t", + "\t", + "\t\t
", + "\t\t\t
", + "\t\t\t\t

$0

", + "\t\t\t
", + "\t\t
", + "\t\t", + "\t", + "" + ], + "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" + } +} diff --git a/05_react/agenda.md b/05_react/agenda.md new file mode 100644 index 0000000..5030936 --- /dev/null +++ b/05_react/agenda.md @@ -0,0 +1,618 @@ +--- +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 +- Build Tools im Vergleich & Einführung in Vite +- Komponenten in React +- Wiederverwendbare Komponenten in React +- Gestaltungsmöglichkeiten in Frameworks +- EventHandler in React + +**Übungen:** + +Übung 01 - 5 + +--- + +### Tag 38 + +**Inhalt:** + +- Beispiele der Gestaltungsmöglichkeiten in Frameworks +- Layout & wiederverwendbare Komponenten +- EventHandler in React + +**Übungen:** + +Übung 08 - 11 + +--- + +### Tag 39 + +**Inhalt:** + +- Layout & wiederverwendbare Komponenten Part II +- EventHandler in React `onSubmit`, `onChange`, `onClick` +- Hooks in React. + +**Übungen:** + +offene Übungen. +Übung 12 - 14 + +--- + +### Tag 40 + +**Inhalt:** + +- Hooks in React. `useState`, `useReducer`, `useContext`, `useId`. +- Routing in React +- Verschachtelte Routen und Layout-Komponenten + +**Übungen:** + +Übung 15 + +--- diff --git a/04_typescript/linksammlung.md b/05_react/linksammlung.md similarity index 100% rename from 04_typescript/linksammlung.md rename to 05_react/linksammlung.md diff --git a/webseite-gulp-ts.zip b/webseite-gulp-ts.zip deleted file mode 100644 index a44dd6f..0000000 Binary files a/webseite-gulp-ts.zip and /dev/null differ diff --git a/webseite-gulp-ts/frontend/docs/package.json b/webseite-gulp-ts/frontend/docs/package.json deleted file mode 100644 index a90618d..0000000 --- a/webseite-gulp-ts/frontend/docs/package.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "name": "webseite-gulp-ts-frontend", - "version": "1.0.0", - "description": "", - "main": "gulpfile.js", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "keywords": [], - "type": "module", - "devDependencies": { - "gulp": "^5.0.1" - } -} diff --git a/webseite-gulp-ts/frontend/package-lock.json b/webseite-gulp-ts/frontend/package-lock.json index bdc995d..017cf97 100644 --- a/webseite-gulp-ts/frontend/package-lock.json +++ b/webseite-gulp-ts/frontend/package-lock.json @@ -25,7 +25,7 @@ "@rollup/plugin-replace": "^6.0.3", "@rollup/plugin-typescript": "^12.3.0", "@rollup/stream": "^3.0.1", - "@types/bootstrap": "^5.2.10", + "@types/bootstrap": "^5.2.11", "@types/toastify-js": "^1.12.4", "browser-sync": "^3.0.4", "core-js": "^3.46.0", diff --git a/webseite-gulp-ts/frontend/package.json b/webseite-gulp-ts/frontend/package.json index 4203fcd..c5728a2 100644 --- a/webseite-gulp-ts/frontend/package.json +++ b/webseite-gulp-ts/frontend/package.json @@ -19,7 +19,7 @@ "@rollup/plugin-replace": "^6.0.3", "@rollup/plugin-typescript": "^12.3.0", "@rollup/stream": "^3.0.1", - "@types/bootstrap": "^5.2.10", + "@types/bootstrap": "^5.2.11", "@types/toastify-js": "^1.12.4", "browser-sync": "^3.0.4", "core-js": "^3.46.0", diff --git a/webseite-ts-claude/frontend/dev/scripts/modules/ProductManager.ts b/webseite-ts-claude/frontend/dev/scripts/modules/ProductManager.ts index 6067386..b754662 100644 --- a/webseite-ts-claude/frontend/dev/scripts/modules/ProductManager.ts +++ b/webseite-ts-claude/frontend/dev/scripts/modules/ProductManager.ts @@ -110,7 +110,7 @@ const ProductManager = (el: HTMLElement | null = null): ProductManagerApi | null }); }; - const onClickSave = (e: MouseEvent): void => { + const onClickSave = (e: PointerEvent): void => { const btnEl = e.currentTarget as HTMLButtonElement; const icon = query(btnEl, 'i');