diff --git a/03_dom/agenda.md b/03_dom/agenda.md index 9195443..dcbbbf8 100644 --- a/03_dom/agenda.md +++ b/03_dom/agenda.md @@ -381,7 +381,6 @@ Projektarbeit **Inhalt:** -- Import von Modulen in JS (Browserseitig) - DOM Creation - Elemente erstellen - createElement() & appendChild() - Projekt: Produktmanager Part I @@ -390,5 +389,77 @@ Projektarbeit **Übungen:** -Übung 15 - 16 + optionale Übungen +Übung 15 - 17 **Projektarbeit / Content Factory** + +--- + +#### Tag 26 + +**Inhalt:** + +- Import von Modulen in JS (Browserseitig) +- Separation of Concerns +- Projekt: Produktmanager II mit JSON +- DOM Traversal Befehle & alle DOM Bereiche +- insertBefore(), appendChil(), append(), prepend(), before(), after() +- Refactoring von Produktmanager mit Template + +**Übungen:** + +Übung 17 - 18 + optionale Übungen +**Projektarbeit / Content Factory** + +--- + +#### Tag 27 + +**Inhalt:** + +- **Exkurs: Weitere Events: Drag and Drop** +- **Routing in JS** +- **Rest API erstellen mit Express** +- JS DOM Projektvorstellung +- Abschlussquiz JS DOM + +**Übungen:** + +Projekte + optionale Übungen. + +--- + +#### Tag 28 + +**Inhalt:** + +- **Exkurs: DOM Inhalte über REST API mit Express Part I** +- 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** +- BREAD - Browse - Read - Edit - Add - Delete +- Verwendung von Modulen (Modal von BS, Toastify, Splide) + +**Übungen** + +Projekte + weiteres Modul einbinden + +--- + +#### Tag 30 + +- **Projekt mit KI** +- Einführung in Typescript +- 1:1 Meeting diff --git a/03_dom/unterricht/tag24/03_auslesen-width-position/index.html b/03_dom/unterricht/tag24/03_auslesen-width-position/index.html index 273be07..e94bc60 100644 --- a/03_dom/unterricht/tag24/03_auslesen-width-position/index.html +++ b/03_dom/unterricht/tag24/03_auslesen-width-position/index.html @@ -30,7 +30,10 @@ const box = document.querySelector('.box'); // reines JS (wenn Performance keine Rolle spielt) - console.log(getComputedStyle(box).width); + + console.log(window.getComputedStyle(document.querySelector('h1'))); // => CSSStyleDeclaration Objekt + + console.log(window.getComputedStyle(box).width); console.log(getComputedStyle(box).height); console.log(getComputedStyle(box).top); diff --git a/03_dom/unterricht/tag25/01_product-manager/assets/js/main.js b/03_dom/unterricht/tag25/01_product-manager/assets/js/main.js index c47c74c..ab8e54b 100644 --- a/03_dom/unterricht/tag25/01_product-manager/assets/js/main.js +++ b/03_dom/unterricht/tag25/01_product-manager/assets/js/main.js @@ -4,7 +4,11 @@ // === DOM & VARS ======= const module = document.querySelector('.product-manager') || console.error('Product Manager not found'); + + if (!module) return; + const DOM = { + module, table: module.querySelector('.table-products'), tBody: module.querySelector('tbody'), inputName: module.querySelector('.input-product-name'), diff --git a/03_dom/unterricht/tag25/01_product-manager/data/products.js b/03_dom/unterricht/tag25/01_product-manager/data/products.js index 29102ca..940c04c 100644 --- a/03_dom/unterricht/tag25/01_product-manager/data/products.js +++ b/03_dom/unterricht/tag25/01_product-manager/data/products.js @@ -1,3 +1,4 @@ +// Konfigurationsvariable const PRODUCTS = [ { name: '3Doodler 3D Printing Pen', price: 29.99 }, { name: 'Powerstation 5- E. Maximus Chargus', price: 44.95 },