03_dom/unterricht/tag23/01_chat-final/assets/js/main.js

@@ -22,7 +22,8 @@
 
   // === EVENTHANDLER =====
   const onInputSearch = (e) => {
-    const value = e.target.value; // aktuelle Eingabe von input
+    const inputEl = e.target;
+    const value = inputEl.value; // aktuelle Eingabe von input
     highlightListItemBy(value);
   };
 

03_dom/unterricht/tag23/06_attribut-boolean/index.html

@@ -55,15 +55,16 @@
       DOM.buttonCheckOnOff = $('.button-check-on-off');
 
       // IDL mit boolscher Wertzuweisung (RECOMMENDED)
-      DOM.cbAgb.checked = true;
+      DOM.cbAgb.checked = true; // DOM.cbAgb.setAttribute('checked', '') <- Alternative NOT RECOMMENDED
       DOM.inputSearch.required = false;
       DOM.inputSearch.readOnly = false;
 
+      DOM.cbAgb.checked = false;
       DOM.btnSend.disabled = true;
 
       // Content Attribut Methoden
       DOM.btnSend.removeAttribute('disabled');
-      DOM.btnSend.setAttribute('disabled', '');
+      DOM.btnSend.setAttribute('disabled', ''); // (NOT RECOMMENDED)
 
       DOM.inputRange.addEventListener('input', (e) => {
         console.log('value: ', e.target.value); // aktueller Wert
@@ -80,11 +81,37 @@
         } else {
           DOM.btnSend.disabled = false;
         }
-
         // DOM.btnSend.disabled = (!cbEl.checked) ? true : false
 
         // DOM.btnSend.disabled = !cbEl.checked;
       });
+
+      DOM.buttonCheckOn.addEventListener('click', (e) => {
+        e.preventDefault(); // => Standardverhalten unterbinden (Formulardaten versenden)
+        DOM.cbAgb.checked = true;
+        DOM.btnSend.disabled = false;
+      });
+
+      DOM.buttonCheckOff.addEventListener('click', (e) => {
+        e.preventDefault(); // => Standardverhalten unterbinden (Formulardaten versenden)
+        DOM.cbAgb.checked = false;
+        DOM.btnSend.disabled = true;
+      });
+
+      DOM.buttonCheckOnOff.addEventListener('click', (e) => {
+        e.preventDefault(); // => Standardverhalten unterbinden (Formulardaten versenden)
+
+        // DOM.cbAgb.checked = !DOM.cbAgb.checked; // => !false -> true | !true -> false
+        // DOM.btnSend.disabled = !DOM.btnSend.disabled;
+
+        if (DOM.cbAgb.checked) {
+          DOM.cbAgb.checked = false;
+          DOM.btnSend.disabled = true;
+        } else {
+          DOM.cbAgb.checked = true;
+          DOM.btnSend.disabled = false;
+        }
+      });
     </script>
   </body>
 </html>

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

@@ -0,0 +1,105 @@
+'use strict';
+
+(() => {
+  const $ = (qs) => document.querySelector(qs);
+  const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+  // === DOM & VARS =======
+  const SMALL = 14;
+  const NORMAL = 16;
+  const BIG = 24;
+  const VERY_LARGE = 36;
+
+  const DOM = {
+    // btnVeryLarge: $('.button-very-large'),
+    // btnBig: $('.button-big'),
+    // btnNormal: $('.button-normal'),
+    // btnSmall: $('.button-small'),
+    // btnInc: $('.button-increase'),
+    // btnDec: $('.button-decrease'),
+    btns: $$('.button-controls button'),
+
+    text: $('p'),
+  };
+
+  // === INIT =============
+  const init = () => {
+    // einmalige Zuweisung der Schriftgröße aus Browser oder CSS-Definition
+    DOM.text.style.fontSize = window.getComputedStyle(DOM.text).fontSize;
+
+    console.log(window.getComputedStyle(DOM.text));
+
+    console.log(DOM);
+    // DOM.text.style.color = 'tomato';
+    // DOM.text.style.backgroundColor = '#222';
+    // DOM.text.style.fontSize = '48px';
+
+    DOM.btns.forEach((el) => {
+      el.addEventListener('click', onClickFontSize);
+    });
+    // DOM.btnVeryLarge.addEventListener('click', onClickVeryLarge);
+    // DOM.btnBig.addEventListener('click', onClickBig);
+    // DOM.btnNormal.addEventListener('click', onClickNormal);
+    // DOM.btnSmall.addEventListener('click', onClickSmall);
+    // DOM.btnInc.addEventListener('click', onClickInc);
+    // DOM.btnDec.addEventListener('click', onClickDec);
+  };
+
+  // === EVENTHANDLER =====
+
+  const onClickFontSize = (e) => {
+    const btn = e.currentTarget;
+    const label = btn.dataset.label; // btn.getAttribute('data-label')
+    const size = btn.dataset.size; // btn.getAttribute('data-size');
+
+    switch (label) {
+      case 'INCREASE':
+        setFontSizeTo(currentFontSize() + 5);
+        break;
+      case 'DECREASE':
+        setFontSizeTo(currentFontSize() - 5);
+        break;
+      default:
+        setFontSizeTo(size);
+
+      // setFontSizeTo(eval(label)); // eval is evil -> 'VERY_LARGE' -> eval('VERY_LARGE') -> VERY_LARGE <- die Konfigurationsvariable
+    }
+  };
+  // const onClickVeryLarge = (e) => {
+  //   console.log('click');
+  //   setFontSizeTo(VERY_LARGE);
+  // };
+  // const onClickBig = (e) => {
+  //   console.log('click');
+  //   setFontSizeTo(BIG);
+  // };
+  // const onClickNormal = (e) => {
+  //   console.log('click');
+  //   setFontSizeTo(NORMAL);
+  // };
+  // const onClickSmall = (e) => {
+  //   console.log('click');
+  //   setFontSizeTo(SMALL);
+  // };
+
+  // const onClickInc = (e) => {
+  //   setFontSizeTo(currentFontSize() + 5);
+  // };
+  // const onClickDec = (e) => {
+  //   setFontSizeTo(currentFontSize() - 5);
+  // };
+
+  // === XHR/FETCH ========
+
+  // === FUNCTIONS ========
+  const setFontSizeTo = (size) => {
+    DOM.text.style.fontSize = `${size}px`;
+  };
+
+  const currentFontSize = () => {
+    //  return parseInt(window.getComputedStyle(DOM.text).fontSize); // => '16px' -> 16
+    return parseInt(DOM.text.style.fontSize);
+  };
+
+  init();
+})();

03_dom/unterricht/tag24/01_style-font-size/index.html

@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Style Font-Size (Beispiel)</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="assets/js/main.js" defer></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>Style Font-Size (Beispiel)</h1>
+        <hr />
+        <nav class="button-controls mb-3">
+          <button class="btn btn-dark button-very-large" data-label="VERY_LARGE" data-size="36">Very Large</button>
+          <button class="btn btn-dark button-big" data-label="BIG" data-size="24">Big</button>
+          <button class="btn btn-dark button-normal" data-label="NORMAL" data-size="16">Normal</button>
+          <button class="btn btn-dark button-small" data-label="SMALL" data-size="14">Small</button>
+          <hr />
+          <button class="btn btn-dark button-decrease" data-label="DECREASE" aria-label="Decrease">
+            <i class="fas fa-minus"></i>
+          </button>
+          <button class="btn btn-dark button-increase" data-label="INCREASE" aria-label="Increase">
+            <i class="fas fa-plus"></i>
+          </button>
+        </nav>
+        <section class="section-content">
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse eveniet, voluptatem sint enim culpa dicta
+            accusamus maiores consequuntur quisquam nisi, itaque voluptas, corrupti velit. Adipisci quo suscipit,
+            repellendus, necessitatibus modi dolore inventore incidunt, tenetur odit numquam dolorum saepe doloribus
+            voluptatum eaque in quisquam neque. Nemo animi facere ipsam earum ipsa tempore porro, exercitationem debitis
+            perspiciatis quisquam ut ea eum. Ea quia delectus odit labore atque nesciunt esse voluptatibus reiciendis
+            saepe nam provident aspernatur sapiente cumque, incidunt quasi neque dignissimos impedit amet sequi aut
+            minus optio aliquam officiis. Deserunt dolorem quod, in voluptas sunt, praesentium tenetur ullam dolore
+            doloremque repudiandae reiciendis veniam debitis eaque nobis quisquam ex quibusdam fugit. Ullam nemo tenetur
+            perferendis iusto neque fugit excepturi, dolorum ab totam maiores ut aspernatur? Cumque dicta dolore
+            mollitia, porro sit hic tenetur error voluptate facere iste nisi natus? Libero quaerat ullam explicabo modi
+            beatae eveniet, aliquid debitis facere enim id rem illum nobis sequi hic quasi. In qui et illo officiis,
+            animi doloremque ipsa harum, natus voluptate quod, voluptatum architecto doloribus asperiores cupiditate.
+            Tenetur fuga tempore voluptatum illo velit, sed nemo commodi. Unde perspiciatis aspernatur est iusto
+            quisquam, magni quibusdam accusantium illo laborum nesciunt laboriosam. Quam reiciendis et ipsum sequi dolor
+            minus aspernatur commodi repellat, aut vero expedita libero quod consequatur! Explicabo temporibus dolore
+            nihil labore fugit nisi velit veniam dignissimos aperiam id eaque blanditiis, expedita voluptas inventore.
+            Quisquam minus consequuntur ipsum eos, pariatur fuga minima eaque, temporibus illo placeat dignissimos
+            laborum maiores incidunt. Dignissimos delectus eum nostrum fuga hic cum aut nesciunt eveniet, cumque ut
+            beatae officiis et minus vero soluta accusamus corporis aliquam eligendi. Ad, qui ipsum. Distinctio
+            temporibus ea sequi dignissimos voluptatum quidem! Consequuntur, veniam odit exercitationem sint a
+            blanditiis voluptatibus quae doloribus adipisci cupiditate, dignissimos placeat asperiores, vel at enim
+            impedit id debitis! Provident asperiores reprehenderit sit nesciunt?
+          </p>
+        </section>
+      </div>
+    </main>
+  </body>
+</html>

03_dom/unterricht/tag24/02_tooltip/assets/css/tooltips.css

@@ -0,0 +1,45 @@
+p {
+  font-size: 1.5em;
+}
+
+.keyword {
+  font-weight: bolder;
+  color: #225;
+}
+
+#tooltip {
+  width: 250px;
+  border: 2px solid #339;
+  padding: 1rem;
+  background-color: rgba(238, 238, 255, 0.9);
+
+  font-size: 1em;
+  text-align: justify;
+
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.show {
+  display: block !important;
+  animation-name: fadeIn;
+  animation-duration: 0.4s;
+  animation-fill-mode: both;
+}
+.hide {
+  display: none !important;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, 20%, 0);
+  }
+  100% {
+    opacity: 1;
+
+    transform: translate3d(0, 0, 0);
+  }
+}

03_dom/unterricht/tag24/02_tooltip/assets/js/tooltips.js

@@ -0,0 +1,57 @@
+'use strict';
+
+(() => {
+  const $ = (qs) => document.querySelector(qs);
+  const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+  // === DOM & VARS =======
+  const DOM = {
+    keywords: $$('.keyword'),
+    tooltip: $('#tooltip'),
+  };
+
+  const MOUSE_OFFSET_Y = 20;
+  const MOUSE_OFFSET_X = 10;
+
+  // === INIT =============
+  const init = () => {
+    DOM.keywords.forEach((el) => {
+      el.addEventListener('mousemove', onMouseMoveKeyword);
+      el.addEventListener('mouseleave', onMouseLeaveKeyword);
+    });
+  };
+
+  // === EVENTHANDLER =====
+  const onMouseMoveKeyword = (e) => {
+    const keywordEl = e.currentTarget;
+
+    DOM.tooltip.style.top = `${e.clientY + MOUSE_OFFSET_Y}px`;
+    DOM.tooltip.style.left = `${e.clientX + MOUSE_OFFSET_X}px`;
+
+    showTooltip(keywordEl);
+  };
+  // === EVENTHANDLER =====
+  const onMouseLeaveKeyword = (e) => {
+    hideTooltip();
+  };
+
+  // === XHR/FETCH ========
+
+  // === FUNCTIONS ========
+  const showTooltip = (el) => {
+    const text = el.dataset.tooltip;
+
+    DOM.tooltip.textContent = text;
+
+    // DOM.tooltip.style.display = 'block';
+    DOM.tooltip.classList.add('show');
+    DOM.tooltip.classList.remove('hide');
+  };
+  const hideTooltip = () => {
+    //  DOM.tooltip.style.display = 'none';
+    DOM.tooltip.classList.add('hide');
+    DOM.tooltip.classList.remove('show');
+  };
+
+  init();
+})();

03_dom/unterricht/tag24/02_tooltip/index.html

@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Tooltips</title>
+    <link rel="stylesheet" href="assets/css/tooltips.css" />
+    <script src="assets/js/tooltips.js" defer></script>
+  </head>
+
+  <body>
+    <h1>Quantum Entanglement Mugs</h1>
+    <h3>DRINK IN SYNC.</h3>
+
+    <p>
+      In the realm of
+      <span
+        class="keyword"
+        data-tooltip="Quantum mechanics is the fundamental physical theory that describes the behavior of matter and of light; its unusual characteristics typically occur at and ..."
+        >quantum mechanics </span
+      >, particles can be
+      <span
+        class="keyword"
+        data-tooltip="Entangled may refer to: Entangled state, in physics, a state arising from quantum entanglement ·">
+        entangled
+      </span>
+      in such a way that the state of one instantly influences the state of another, no matter the distance. This
+      phenomenon fascinates physicists and challenges our understanding of reality. Imagine sipping your coffee from a
+      mug that celebrates this
+      <span
+        class="keyword"
+        data-tooltip="In physics, a quantum ( pl. : quanta) is the minimum amount of any physical entity (physical property) involved in an interaction.">
+        quantum
+      </span>
+      wonder. Just like entangled particles, you and a friend can share a connection over any distance with these mugs.
+      Introducing the Quantum <span class="keyword">Entanglement</span> Mugs.
+    </p>
+
+    <p>
+      Each set of Quantum <span class="keyword">Entanglement</span> Mugs includes two ceramic mugs designed to reflect
+      the concept of entanglement. Share one with a friend, and no matter how far apart you are, you'll feel connected.
+      Use them at your next physics meetup, and your colleagues will appreciate your thoughtful nod to quantum theory.
+      Enjoy your coffee!
+    </p>
+    <div id="tooltip" class="hide">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis voluptates, veniam facere laudantium.
+    </div>
+  </body>
+</html>

03_dom/unterricht/tag24/03_auslesen-width-position/index.html

@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auslesen von Breite, Höhe und Postion</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
+    <style>
+      .box {
+        width: 250px;
+        height: 100px;
+        padding: 1rem;
+        background-color: tomato;
+        border: 10px solid #222;
+        margin: 1rem;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>Auslesen von Breite, Höhe und Postion</h1>
+        <div class="box"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const box = document.querySelector('.box');
+
+      // reines JS (wenn Performance keine Rolle spielt)
+      console.log(getComputedStyle(box).width);
+      console.log(getComputedStyle(box).height);
+      console.log(getComputedStyle(box).top);
+
+      // jQuery
+      console.log($('.box').outerWidth()); // 250
+      console.log($('.box').outerHeight()); // 100
+
+      console.log($('.box').width()); // 198
+      console.log($('.box').height()); // 48
+      console.log($('.box').position()); // {top: 96, left: 92.5}
+
+      console.log(box.getBoundingClientRect()); // => DOMRect {x: 108.5, y: 112, width: 250, height: 100, top: 112, …}
+      console.log(box.getBoundingClientRect().width);
+      console.log(box.getBoundingClientRect().height);
+      console.log(box.getBoundingClientRect().top);
+      console.log(box.getBoundingClientRect().left);
+
+      console.log(box.offsetWidth); // 250
+      console.log(box.offsetHeight); // 100
+    </script>
+  </body>
+</html>

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

@@ -0,0 +1,96 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Eigene Attribute mit data-[ATTRIBUT_NAME] - DOMStringMap</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <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
+          für benutzerdefinierte Attribute darzustellen, die zu Elementen hinzugefügt werden.
+        </p>
+        <hr />
+        <button
+          class="btn btn-dark button"
+          data-content="Text für headline"
+          data-ref="h1"
+          data-content-id="0"
+          data-my-attribut-with-many-words="yes">
+          Button mit eigenen Attributen
+        </button>
+        <p class="my-5">
+          Lorem ipsum dolor sit
+          <strong
+            class="keyword"
+            data-tooltip="The brain's outer layer of neural tissue in humans and other mammals [wikipedia]."
+            >cerebral cortex
+          </strong>
+          amet consectetur adipisicing elit. Harum voluptatem iure earum suscipit nihil! Recusandae pariatur corporis
+          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>
+        </button>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      (() => {
+        const $ = (qs) => document.querySelector(qs);
+        const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+        // === DOM & VARS =======
+        const DOM = {
+          button: $('.button'),
+          keywords: $$('.keyword'),
+          buttonRedirect: $('.button-redirect'),
+        };
+
+        console.log(DOM);
+
+        // === INIT =============
+        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'}
+
+          // (NOT RECOMMENDED)
+          console.log(DOM.button.getAttribute('data-new-data')); // neues Data Attribut
+
+          DOM.button.addEventListener('click', onClickButton);
+
+          DOM.keywords.forEach((el) => {
+            el.addEventListener('mouseenter', onMouseEnterKeyword);
+          });
+        };
+
+        // === EVENTHANDLER =====
+        const onClickButton = (e) => {
+          const btnEl = e.currentTarget;
+
+          const { ref: selector, content } = btnEl.dataset; // Destructuring von dataset
+
+          $(selector).textContent = content;
+        };
+
+        const onMouseEnterKeyword = (e) => {
+          const el = e.currentTarget;
+          console.log(el.dataset.tooltip);
+        };
+
+        // === XHR/FETCH ========
+
+        // === FUNCTIONS ========
+
+        init();
+      })();
+    </script>
+  </body>
+</html>