feat: added comments and modified agenda

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

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);
 

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'),

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 },