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 9633e0e..8d05eb2 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
@@ -17,6 +17,9 @@
// === INIT =============
const init = () => {
console.log('init');
+ // Funktionaufrufe zu beginn der Anwendung
+ initProducts();
+ // Event-Lauscher zu beginn der Anwendung
DOM.btnAdd.addEventListener('click', onClickAdd);
};
@@ -24,18 +27,35 @@
const onClickAdd = (e) => {
console.log('click');
- const tdName = createTd(DOM.inputName.value, 'td-name');
- const tdPrice = createTd(DOM.inputPrice.value, 'td-price');
- const trEl = createTr(tdName, tdPrice);
+ const product = {
+ name: DOM.inputName.value,
+ price: Number(DOM.inputPrice.value),
+ };
- DOM.tBody.appendChild(trEl); // Im DOM hinzufügen
-
- console.log(trEl);
+ addProduct(product);
};
// === XHR/FETCH ========
// === FUNCTIONS ========
+ const initProducts = () => {
+ PRODUCTS.forEach((product) => {
+ addProduct(product);
+ });
+
+ // PRODUCTS.forEach(addProduct);
+ };
+
+ const addProduct = (product) => {
+ const { name, price } = product;
+
+ const tdName = createTd(name, 'td-name');
+ const tdPrice = createTd(price, 'td-price');
+ const trEl = createTr(tdName, tdPrice);
+
+ DOM.tBody.appendChild(trEl); // Im DOM hinzufügen
+ };
+
const createTd = (text, className = '') => {
const td = document.createElement('td');
td.classList.add(className);
diff --git a/03_dom/unterricht/tag25/01_product-manager/data/products.js b/03_dom/unterricht/tag25/01_product-manager/data/products.js
new file mode 100644
index 0000000..29102ca
--- /dev/null
+++ b/03_dom/unterricht/tag25/01_product-manager/data/products.js
@@ -0,0 +1,6 @@
+const PRODUCTS = [
+ { name: '3Doodler 3D Printing Pen', price: 29.99 },
+ { name: 'Powerstation 5- E. Maximus Chargus', price: 44.95 },
+ { name: '8-Bit Legendary Hero Heat-Change Mug', price: 6.99 },
+ { name: '16-Bit Legendary Hero Heat-Change Mug', price: 10.99 },
+];
diff --git a/03_dom/unterricht/tag25/01_product-manager/data/products.json b/03_dom/unterricht/tag25/01_product-manager/data/products.json
new file mode 100644
index 0000000..67e8369
--- /dev/null
+++ b/03_dom/unterricht/tag25/01_product-manager/data/products.json
@@ -0,0 +1,5 @@
+[
+ { "name": "3Doodler 3D Printing Pen", "price": 29.99 },
+ { "name": "Powerstation 5- E. Maximus Chargus", "price": 44.95 },
+ { "name": "8-Bit Legendary Hero Heat-Change Mug", "price": 6.99 }
+]
diff --git a/03_dom/unterricht/tag25/01_product-manager/index.html b/03_dom/unterricht/tag25/01_product-manager/index.html
index 2eeed90..567662c 100644
--- a/03_dom/unterricht/tag25/01_product-manager/index.html
+++ b/03_dom/unterricht/tag25/01_product-manager/index.html
@@ -7,6 +7,7 @@
+
@@ -22,18 +23,12 @@
+