From 1c64e896e40089da07313db45f6140b29cbabda7 Mon Sep 17 00:00:00 2001 From: Philippe Torrel Date: Tue, 21 Jul 2026 09:31:17 +0200 Subject: [PATCH] feat: finalized project --- 03_dom/agenda.md | 2 +- .../assets/js/main.js | 9 +- .../tag26/02_dom-bereiche/dom-creation.html | 4 +- .../02_dom-bereiche/dom-manipulation.html | 4 +- .../assets/js/main.js | 2 +- .../assets/js/modules/ProductManager.js | 4 +- .../06_product-manager-tpl-json/index.html | 153 ++++++++++++++++++ 7 files changed, 169 insertions(+), 9 deletions(-) diff --git a/03_dom/agenda.md b/03_dom/agenda.md index fb467d2..d73b881 100644 --- a/03_dom/agenda.md +++ b/03_dom/agenda.md @@ -417,10 +417,10 @@ Projektarbeit **Inhalt:** - **Exkurs: Weitere Events: Drag and Drop** -- **Routing in JS** - **Rest API erstellen mit Express** - JS DOM Projektvorstellung - Abschlussquiz JS DOM +- **Routing in JS** **Übungen:** diff --git a/03_dom/unterricht/tag26/01_product-manager-final/assets/js/main.js b/03_dom/unterricht/tag26/01_product-manager-final/assets/js/main.js index 8346cee..908cd70 100644 --- a/03_dom/unterricht/tag26/01_product-manager-final/assets/js/main.js +++ b/03_dom/unterricht/tag26/01_product-manager-final/assets/js/main.js @@ -141,8 +141,8 @@ // classes: ['btn-primary', 'button-login'], // label: 'login', // iconName: 'right-to-bracket', - // clickHandler: () => { - // console.log('login'); + // clickHandler() { + // console.log(`${this.type} process...`); // }, // }), // ); @@ -182,6 +182,9 @@ // classes: ['btn-primary', 'button-login-user'], // iconName: 'right-to-bracket', // label: 'Login', + // // clickHandler() { + // // console.log(`${this.label} process...`); + // // }, // clickHandler: () => { // console.log('login process...'); // }, @@ -264,7 +267,7 @@ const btnMoveUp = tr.querySelector('.button-product-move-up'); const btnMoveDown = tr.querySelector('.button-product-move-down'); - btnMoveUp.disabled = !tr.previousElementSibling; + btnMoveUp.disabled = !tr.previousElementSibling; // !(false) -> true | !(true) -> false btnMoveDown.disabled = !tr.nextElementSibling; }); }; diff --git a/03_dom/unterricht/tag26/02_dom-bereiche/dom-creation.html b/03_dom/unterricht/tag26/02_dom-bereiche/dom-creation.html index f6d5b07..8111bbb 100644 --- a/03_dom/unterricht/tag26/02_dom-bereiche/dom-creation.html +++ b/03_dom/unterricht/tag26/02_dom-bereiche/dom-creation.html @@ -1,4 +1,4 @@ - + @@ -39,6 +39,8 @@ // Node.cloneNode(true) const liCloneEl = $('ul.list li').cloneNode(true); + // const img = new Image(); // document.createElement('img'); + // DOM Manipulation ========== $('ul.list').appendChild(liEl); $('ul.list').appendChild(liCloneEl); diff --git a/03_dom/unterricht/tag26/02_dom-bereiche/dom-manipulation.html b/03_dom/unterricht/tag26/02_dom-bereiche/dom-manipulation.html index e760925..9826d5c 100644 --- a/03_dom/unterricht/tag26/02_dom-bereiche/dom-manipulation.html +++ b/03_dom/unterricht/tag26/02_dom-bereiche/dom-manipulation.html @@ -1,4 +1,4 @@ - + @@ -54,7 +54,7 @@ // $('ul.list').classList.add('list-group'); - $('ul.list').dataset.id = 'list'; + $('ul.list').dataset.id = 'list'; // $('.container').id = 'main-container'; $('h1').style.backgroundColor = 'tomato'; $('h1').setAttribute('title', 'headline'); diff --git a/03_dom/unterricht/tag26/06_product-manager-tpl-json/assets/js/main.js b/03_dom/unterricht/tag26/06_product-manager-tpl-json/assets/js/main.js index b9b9a5f..4d93ada 100644 --- a/03_dom/unterricht/tag26/06_product-manager-tpl-json/assets/js/main.js +++ b/03_dom/unterricht/tag26/06_product-manager-tpl-json/assets/js/main.js @@ -10,7 +10,7 @@ import ProductManager from './modules/ProductManager.js'; const init = () => { DOM.productManagers.forEach((el) => { const pm = ProductManager(el); - // pm.init() + // pm.initProducts() }); }; diff --git a/03_dom/unterricht/tag26/06_product-manager-tpl-json/assets/js/modules/ProductManager.js b/03_dom/unterricht/tag26/06_product-manager-tpl-json/assets/js/modules/ProductManager.js index 5f742b5..12977ce 100644 --- a/03_dom/unterricht/tag26/06_product-manager-tpl-json/assets/js/modules/ProductManager.js +++ b/03_dom/unterricht/tag26/06_product-manager-tpl-json/assets/js/modules/ProductManager.js @@ -121,7 +121,7 @@ const ProductManager = (el = null) => { const addProduct = (product) => { const { name, price } = product; - // + // https://developer.mozilla.org/de/docs/Web/API/HTMLTemplateElement/content const trEl = DOM.templateRow.content.firstElementChild.cloneNode(true); const tdNameEl = trEl.querySelector('.td-name'); @@ -163,7 +163,9 @@ const ProductManager = (el = null) => { return { init, + initProducts, }; }; +// Freigabe für import export default ProductManager; diff --git a/03_dom/unterricht/tag26/06_product-manager-tpl-json/index.html b/03_dom/unterricht/tag26/06_product-manager-tpl-json/index.html index 18884b0..1fff95e 100644 --- a/03_dom/unterricht/tag26/06_product-manager-tpl-json/index.html +++ b/03_dom/unterricht/tag26/06_product-manager-tpl-json/index.html @@ -12,6 +12,159 @@
+ +
+
+ + + + + + + + + + + + + + + +
NamePrice in €Actions
+
+
+ +
+ +
+
+ + € +
+
+ +
+ +
+
+ +
+
+ + +
+ + +
+
+ + + + + + + + + + + + + + + +
NamePrice in €Actions
+
+
+ +
+ +
+
+ + € +
+
+ +
+ +
+
+ +
+
+ + +
+ +