added js

03_dom/unterricht/tag25/01_product-manager/assets/js/main.js

@@ -2,18 +2,57 @@
 
 (() => {
   // === DOM & VARS =======
-  const DOM = {};
+
+  const module = document.querySelector('.product-manager') || console.error('Product Manager not found');
+  const DOM = {
+    table: module.querySelector('.table-products'),
+    tBody: module.querySelector('tbody'),
+    inputName: module.querySelector('.input-product-name'),
+    inputPrice: module.querySelector('.input-product-price'),
+    btnAdd: module.querySelector('.button-product-add'),
+  };
+
+  console.log(DOM);
 
   // === INIT =============
   const init = () => {
     console.log('init');
+    DOM.btnAdd.addEventListener('click', onClickAdd);
   };
 
   // === EVENTHANDLER =====
+  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);
+
+    DOM.tBody.appendChild(trEl); // Im DOM hinzufügen
+
+    console.log(trEl);
+  };
 
   // === XHR/FETCH ========
 
   // === FUNCTIONS ========
+  const createTd = (text, className = '') => {
+    const td = document.createElement('td');
+    td.classList.add(className);
+    td.textContent = text;
+
+    return td;
+  };
+
+  const createTr = (...tds) => {
+    const tr = document.createElement('tr');
+    tr.append(...tds);
+
+    // tds.forEach((td) => {
+    //   tr.appendChild(td);
+    // });
+    return tr;
+  };
 
   init();
 })();