feat: init produt-manager

03_dom/unterricht/tag24/01_style-font-size/assets/js/main.js

@@ -98,7 +98,7 @@
 
   const currentFontSize = () => {
     //  return parseInt(window.getComputedStyle(DOM.text).fontSize); // => '16px' -> 16
-    return parseInt(DOM.text.style.fontSize);
+    return parseInt(DOM.text.style.fontSize); // => '16px' -> 16
   };
 
   init();

03_dom/unterricht/tag24/04_data-attribute/index.html

@@ -12,7 +12,7 @@
         <h1>Eigene Attribute mit data-[ATTRIBUT_NAME] - DOMStringMap</h1>
         <p>
           <a href="https://developer.mozilla.org/de/docs/Web/API/DOMStringMap"> DOMStringMap </a>
-          - Die <code>DOMStringMap</code>-Schnittstelle wird für das HTMLElement.dataset-Attribut verwendet, um Daten
+          - Die <code>DOMStringMap-Schnittstelle</code> wird für das HTMLElement.dataset-Attribut verwendet, um Daten
           für benutzerdefinierte Attribute darzustellen, die zu Elementen hinzugefügt werden.
         </p>
         <hr />
@@ -35,7 +35,7 @@
           odit optio excepturi labore dolore non, expedita temporibus adipisci vero, modi magnam veritatis?
         </p>
         <button class="btn btn-dark button-redirect">
-          Weiterleitung in <span class="timer-counter" data-timer="5"></span>
+          Weiterleitung in <span class="timer-counter" data-timer="15"></span>
         </button>
       </div>
     </main>
@@ -50,6 +50,8 @@
         const DOM = {
           button: $('.button'),
           keywords: $$('.keyword'),
+          //////////////////////
+          // weiterleitung
           buttonRedirect: $('.button-redirect'),
         };
 
@@ -59,7 +61,7 @@
         const init = () => {
           DOM.button.dataset.newData = 'neues Data Attribut'; //=> <button data-new-data="neues Data Attribut"></button>
 
-          console.log(DOM.button.dataset); //=> DOMStringMap {content: 'Text für headline', ref: 'h1', contentId: '0', myAttributWithManyWords: 'yes', newData: 'neues Data Attribut'}
+          console.log(DOM.button.dataset); //=> DOMStringMap {content: 'Text für headline', ref: 'h1', contentId: '0', myAttributWithManyWords: 'yes', newData: 'neues Data Attribut'}
 
           // (NOT RECOMMENDED)
           console.log(DOM.button.getAttribute('data-new-data')); // neues Data Attribut
@@ -69,6 +71,10 @@
           DOM.keywords.forEach((el) => {
             el.addEventListener('mouseenter', onMouseEnterKeyword);
           });
+
+          //////////////////////
+          // weiterleitung
+          DOM.buttonRedirect.addEventListener('click', onClickRedirect);
         };
 
         // === EVENTHANDLER =====
@@ -85,9 +91,41 @@
           console.log(el.dataset.tooltip);
         };
 
+        //////////////////////
+        // weiterleitung
+        const onClickRedirect = (e) => {
+          const btnEl = e.currentTarget;
+          const timer = btnEl.querySelector('.timer-counter').dataset.timer || 10;
+          btnEl.disabled = true;
+
+          // alten Text im button abspeichen
+          btnEl.dataset.oldText = btnEl.textContent;
+
+          showCounterOnBtnRedirect(btnEl, timer);
+        };
+
         // === XHR/FETCH ========
 
         // === FUNCTIONS ========
+        //////////////////////
+        // weiterleitung
+        const showCounterOnBtnRedirect = (btn, counter) => {
+          // Basisfall
+          if (counter === 0) {
+            btn.disabled = false;
+            // alten Text wieder reinschreiben - eigentlich würde hier der redirect passieren
+            btn.textContent = btn.dataset.oldText;
+
+            window.location.href = 'https://www.gfn.de';
+            return;
+          }
+
+          btn.textContent = ` --- ${counter} ---`;
+
+          setTimeout(() => {
+            showCounterOnBtnRedirect(btn, counter - 1);
+          }, 1000);
+        };
 
         init();
       })();

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

@@ -0,0 +1,19 @@
+'use strict';
+
+(() => {
+  // === DOM & VARS =======
+  const DOM = {};
+
+  // === INIT =============
+  const init = () => {
+    console.log('init');
+  };
+
+  // === EVENTHANDLER =====
+
+  // === XHR/FETCH ========
+
+  // === FUNCTIONS ========
+
+  init();
+})();

03_dom/unterricht/tag25/01_product-manager/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Product Manager</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="assets/css/main.css" />
+    <script src="assets/js/main.js" defer></script>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>Product Manager</h1>
+      </div>
+    </main>
+  </body>
+</html>

03_dom/unterricht/tag25/01_product-manager/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "01_product-manager",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "type": "module"
+}