03_js-dom/linksammlung.md

@@ -58,7 +58,14 @@
 - [Dafont](https://www.dafont.com/de/)
 - [My Fonts](https://www.myfonts.com/pages/whatthefont/) - What the font
 
+## Bilder/ Vektoren
 
+- [Freepik | Magnific](https://www.magnific.com//)
+- [Flaticon](https://www.flaticon.com/)
+- [Pexels](https://www.pexels.com/de-de/)
+- [FavIcon Generator](https://realfavicongenerator.net/)
+- [SVG Flaggen](https://hampusborgos.github.io/country-flags/)
+- [Flagicons](https://flagicons.lipis.dev/)
 
 ## Blog/ Techartikelseiten
 

03_js-dom/unterricht/tag22/04_tooltip/assets/css/tooltips.css

@@ -0,0 +1,46 @@
+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;
+}
+
+/* Modified */
+.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_js-dom/unterricht/tag22/04_tooltip/assets/js/tooltips.js

@@ -0,0 +1,56 @@
+'use strict';
+
+(() => {
+  const $ = (qs) => document.querySelector(qs);
+  const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+  // === DOM & VARS =======
+  const MOUSE_OFFSET_Y = 20;
+  const MOUSE_OFFSET_X = 10;
+
+  const DOM = {
+    keywords: $$('.keyword'),
+    tooltip: $('#tooltip'),
+  };
+
+  // === 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);
+  };
+  const onMouseLeaveKeyword = (e) => {
+    hideTooltip();
+  };
+  // === XHR/FETCH ========
+
+  // === FUNCTIONS ========
+  const showTooltip = (el) => {
+    // DOM.tooltip.style.display = 'block';
+    DOM.tooltip.classList.add('show');
+    DOM.tooltip.classList.remove('hide');
+    DOM.tooltip.textContent = el.getAttribute('data-tooltip');
+
+    // DOM.tooltip.classList.replace('hide', 'show');
+  };
+  const hideTooltip = (e) => {
+    // DOM.tooltip.style.display = 'none';
+    DOM.tooltip.classList.add('hide');
+    DOM.tooltip.classList.remove('show');
+
+    // DOM.tooltip.classList.replace('show', 'hide');
+  };
+
+  init();
+})();

03_js-dom/unterricht/tag22/04_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_js-dom/unterricht/tag22/05_auslesen-position/index.html

@@ -0,0 +1,59 @@
+<!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(window.getComputedStyle(document.querySelector('h1'))); // => CSSStyleDeclaration Objekt
+
+      console.log(window.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}
+
+      // Auslesen von Positionen über reines JS
+      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_js-dom/unterricht/tag22/06_data-attribute/index.html

@@ -0,0 +1,119 @@
+<!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-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 />
+        <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="10"></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'),
+        };
+
+        // === INIT =============
+        const init = () => {
+          DOM.button.dataset.newData = 'neues Data Attribut';
+          // => <button data-new-data="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'
+
+          DOM.keywords.forEach((el) => {
+            el.addEventListener('mouseenter', onMouseEnterKeyword);
+          });
+
+          // WEITERLEITUNGSBEISPIEL ========
+          DOM.buttonRedirect.addEventListener('click', onClickRedirect);
+        };
+
+        // === EVENTHANDLER =====
+        const onMouseEnterKeyword = (e) => {
+          const el = e.currentTarget;
+          console.log(el.dataset.tooltip);
+          console.log(el.getAttribute('data-tooltip'));
+        };
+
+        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();
+      })();
+    </script>
+  </body>
+</html>