03_js-dom/unterricht/tag23/01_product-manager/assets/css/main.css

@@ -0,0 +1,22 @@
+*,
+html {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+}
+
+/* Mobile first */
+.product-manager table tfoot .row > * {
+  margin-bottom: 0.5rem;
+}
+
+@media (min-width: 992px) {
+  .product-manager table tfoot .row > * {
+    margin-bottom: 0;
+  }
+}

03_js-dom/unterricht/tag23/01_product-manager/assets/js/main.js

@@ -0,0 +1,76 @@
+'use strict';
+
+(() => {
+  // === DOM & VARS =======
+
+  const module = document.querySelector('.product-manager') || console.warn('Product Manager Element not found');
+
+  if (!module) return;
+
+  const DOM = {
+    module,
+    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 = () => {
+    // Funktionsaufrufe zu beginn der Anwendung
+    initProducts();
+    // Event-Lauscher zu beginn der Anwendung
+    DOM.btnAdd.addEventListener('click', onClickAdd);
+  };
+
+  // === EVENTHANDLER =====
+  const onClickAdd = (e) => {
+    const product = {
+      name: DOM.inputName.value, //
+      price: Number(DOM.inputPrice.valueAsNumber),
+    };
+
+    addProduct(product);
+  };
+  // === XHR/FETCH ========
+
+  // === FUNCTIONS ========
+  const initProducts = () => {
+    // PRODUCTS.forEach((product) => {
+    //   addProduct(product);
+    // });
+    PRODUCTS.forEach(addProduct);
+  };
+
+  const addProduct = (product) => {
+    const { name, price } = product;
+    const tdNameEl = createTd(name, 'td-name');
+    const tdPriceEl = createTd(price, 'td-price');
+    const trEl = createTr(tdNameEl, tdPriceEl);
+
+    DOM.tbody.appendChild(trEl);
+  };
+
+  const createTd = (text, ...classNames) => {
+    const td = document.createElement('td');
+    td.classList.add(...classNames);
+    td.textContent = text;
+
+    return td;
+  };
+
+  const createTr = (...tds) => {
+    const tr = document.createElement('tr');
+    // tds.forEach((td) => {
+    //   tr.appendChild(td);
+    // });
+    tr.append(...tds);
+
+    return tr;
+  };
+
+  init();
+})();

03_js-dom/unterricht/tag23/01_product-manager/data/products.js

@@ -0,0 +1,5 @@
+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 },
+];

03_js-dom/unterricht/tag23/01_product-manager/index.html

@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Productmanager</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.3.1/css/all.css" />
+    <link rel="stylesheet" href="assets/css/main.css" />
+    <script src="data/products.js"></script>
+    <script src="assets/js/main.js" defer></script>
+  </head>
+  <body>
+    <main>
+      <!-- ▼ Product Manager ▼ -->
+      <div class="product-manager">
+        <div class="container py-5">
+          <h1>Productmanager</h1>
+          <!-- table.table.table-striped.table-products>thead.table-dark>tr>th*2 -->
+          <table class="table table-striped table-products">
+            <thead class="table-dark">
+              <tr>
+                <th class="th-name">Name</th>
+                <th class="th-price">Price in &euro;</th>
+              </tr>
+            </thead>
+            <tbody>
+              <!-- <tr>
+                <td class="td-name">{PRODUCT_NAME}</td>
+                <td class="td-price">{PRODUCT_PRICE}</td>
+              </tr> -->
+            </tbody>
+            <tfoot>
+              <tr>
+                <td colspan="2">
+                  <div class="row">
+                    <div class="col-12 col-md-6 col-lg-6">
+                      <input
+                        type="text"
+                        name="product-name"
+                        class="form-control input-product-name"
+                        placeholder="Insert product name"
+                        aria-label="Product name" />
+                    </div>
+                    <div class="col-12 col-md-6 col-lg-3">
+                      <div class="input-group">
+                        <span class="input-group-text">€</span>
+                        <input
+                          type="number"
+                          name="prodcut-price"
+                          class="form-control input-product-price"
+                          placeholder="00.00"
+                          aria-label="Product price"
+                          min="0"
+                          step="0.01" />
+                      </div>
+                    </div>
+                    <div class="col-12 col-md-6 col-lg">
+                      <button class="btn btn-dark button-product-add">
+                        <i class="fas fa-plus"></i>
+                        Add Product
+                      </button>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            </tfoot>
+          </table>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>

03_js-dom/unterricht/tag23/01_product-manager/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "01_product-manager",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "npx http-server -p 3000 -c-1"
+  },
+  "keywords": [],
+  "type": "module"
+}

03_js-dom/unterricht/tag23/02_dom-creation/index.html

@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DOM Creation</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/4.0.0/jquery.min.js"></script>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>DOM Creation</h1>
+        <hr />
+        <ul class="list">
+          <li>Listenpunkt 01</li>
+          <li>Listenpunkt 02</li>
+          <li>Listenpunkt 03</li>
+          <li>Listenpunkt 04</li>
+        </ul>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const $ = (qs) => document.querySelector(qs);
+      const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+      // Node.innerHTML
+      $('ul.list').innerHTML += '<li>Listenpunkt 05</li>';
+
+      // Node.innerText & Node.textContent
+      $('ul.list li').textContent = 'Listenpunkt 001';
+      $('ul.list li:nth-child(2)').innerText = 'Listenpunkt 002';
+
+      // document.createElement('HTML_ELEMENT')
+      const liEl = document.createElement('li');
+      liEl.textContent = 'Listenpunkt 06';
+
+      // Node.cloneNode(true)
+      const liCloneEl = $('ul.list li').cloneNode(true);
+
+      // DOM Manipulation ==========
+      $('ul.list').appendChild(liEl);
+      $('ul.list').appendChild(liCloneEl);
+
+      // jQuery ====================
+      // jQuery('<p>test</p>').insertAfter(document.body);
+      // jQuery('<p />', { text: 'ich bin der Inhalt' }).insertAfter(document.body);
+      // jQuery('<p></p>', { text: 'ich bin der Inhalt' }).insertBefore(document.body);
+    </script>
+  </body>
+</html>

03_js-dom/unterricht/tag23/03_product-manager/assets/css/main.css

@@ -0,0 +1,22 @@
+*,
+html {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+}
+
+/* Mobile first */
+.product-manager table tfoot .row > * {
+  margin-bottom: 0.5rem;
+}
+
+@media (min-width: 992px) {
+  .product-manager table tfoot .row > * {
+    margin-bottom: 0;
+  }
+}

03_js-dom/unterricht/tag23/03_product-manager/assets/js/main.js

@@ -0,0 +1,76 @@
+'use strict';
+
+(() => {
+  // === DOM & VARS =======
+
+  const module = document.querySelector('.product-manager') || console.warn('Product Manager Element not found');
+
+  if (!module) return;
+
+  const DOM = {
+    module,
+    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 = () => {
+    // Funktionsaufrufe zu beginn der Anwendung
+    initProducts();
+    // Event-Lauscher zu beginn der Anwendung
+    DOM.btnAdd.addEventListener('click', onClickAdd);
+  };
+
+  // === EVENTHANDLER =====
+  const onClickAdd = (e) => {
+    const product = {
+      name: DOM.inputName.value, //
+      price: Number(DOM.inputPrice.valueAsNumber),
+    };
+
+    addProduct(product);
+  };
+  // === XHR/FETCH ========
+
+  // === FUNCTIONS ========
+  const initProducts = () => {
+    // PRODUCTS.forEach((product) => {
+    //   addProduct(product);
+    // });
+    PRODUCTS.forEach(addProduct);
+  };
+
+  const addProduct = (product) => {
+    const { name, price } = product;
+    const tdNameEl = createTd(name, 'td-name');
+    const tdPriceEl = createTd(price, 'td-price');
+    const trEl = createTr(tdNameEl, tdPriceEl);
+
+    DOM.tbody.appendChild(trEl);
+  };
+
+  const createTd = (text, ...classNames) => {
+    const td = document.createElement('td');
+    td.classList.add(...classNames);
+    td.textContent = text;
+
+    return td;
+  };
+
+  const createTr = (...tds) => {
+    const tr = document.createElement('tr');
+    // tds.forEach((td) => {
+    //   tr.appendChild(td);
+    // });
+    tr.append(...tds);
+
+    return tr;
+  };
+
+  init();
+})();

03_js-dom/unterricht/tag23/03_product-manager/data/products.js

@@ -0,0 +1,5 @@
+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 },
+];

03_js-dom/unterricht/tag23/03_product-manager/index.html

@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Productmanager</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.3.1/css/all.css" />
+    <link rel="stylesheet" href="assets/css/main.css" />
+    <script src="data/products.js"></script>
+    <script src="assets/js/main.js" defer></script>
+  </head>
+  <body>
+    <main>
+      <!-- ▼ Product Manager ▼ -->
+      <div class="product-manager">
+        <div class="container py-5">
+          <h1>Productmanager</h1>
+          <!-- table.table.table-striped.table-products>thead.table-dark>tr>th*2 -->
+          <table class="table table-striped table-products">
+            <thead class="table-dark">
+              <tr>
+                <th class="th-name">Name</th>
+                <th class="th-price">Price in &euro;</th>
+              </tr>
+            </thead>
+            <tbody>
+              <!-- <tr>
+                <td class="td-name">{PRODUCT_NAME}</td>
+                <td class="td-price">{PRODUCT_PRICE}</td>
+              </tr> -->
+            </tbody>
+            <tfoot>
+              <tr>
+                <td colspan="2">
+                  <div class="row">
+                    <div class="col-12 col-md-6 col-lg-6">
+                      <input
+                        type="text"
+                        name="product-name"
+                        class="form-control input-product-name"
+                        placeholder="Insert product name"
+                        aria-label="Product name" />
+                    </div>
+                    <div class="col-12 col-md-6 col-lg-3">
+                      <div class="input-group">
+                        <span class="input-group-text">€</span>
+                        <input
+                          type="number"
+                          name="prodcut-price"
+                          class="form-control input-product-price"
+                          placeholder="00.00"
+                          aria-label="Product price"
+                          min="0"
+                          step="0.01" />
+                      </div>
+                    </div>
+                    <div class="col-12 col-md-6 col-lg">
+                      <button class="btn btn-dark button-product-add">
+                        <i class="fas fa-plus"></i>
+                        Add Product
+                      </button>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            </tfoot>
+          </table>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>

03_js-dom/unterricht/tag23/03_product-manager/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "03_product-manager",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "npx http-server -p 3000 -c-1"
+  },
+  "keywords": [],
+  "type": "module"
+}