2026-07-14 14:36:35 +02:00
parent 960451ae4a
commit 3631edde78
39 changed files with 2399 additions and 11 deletions
--- a/03_dom/agenda.md
+++ b/03_dom/agenda.md
@@ -336,13 +336,6 @@ Projektarbeit

 #### Tag 22

- **Exkurs: Webseite mit Gulp, SASS, HTML/CSS, JS**
- **Wetter API auslesen**
-
---
-
-#### Tag 23
-
 - Defer & Async
 - JS Dateien auslagern
 - Chat Gestaltung (DOMTokenList Objekt)
--- a/03_dom/uebungen/u01_almost-quotes/index.html
+++ b/03_dom/uebungen/u01_almost-quotes/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
@@ -20,10 +20,17 @@

      // 1
      // Ändern Sie mit Hilfe von JS die Überschrift (h1) der HTML-Seite  in Almost Famous Quotes.
+      const h1El = document.querySelector('h1');
+      h1El.innerHTML = 'Almost Famous Quotes';

      // 2
      // Die Seite  enthält ein leeres blockquote-Element. Öffnen Sie die HTML-Seite in Chrome. Geben Sie in der Konsole eine Zeile JS-Code ein, die das Element mit folgendem Inhalt befüllt:

+      // Code für die Browser-Konsole:
+
+      document.querySelector('blockquote').innerHTML =
+        '<p>I have always wished for my computer to be as easy to use as my telephone;my wish has come true because I can no longer figure out how to use mytelephone.</p><footer>— <cite>Bjarne Stroustrup</cite></footer>';
+
      // <p>
      //     I have always wished for my computer to be as easy to use as my telephone;
      //     my wish has come true because I can no longer figure out how to use my
--- a/03_dom/uebungen/u02_tasse-01001/index.html
+++ b/03_dom/uebungen/u02_tasse-01001/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
@@ -96,8 +96,17 @@
      (() => {
        // Tippen Sie eine Abfrage in die Konsole, die:
        // 1. das h1-Element findet.
+        const h1El = document.querySelector('h1');
+
        // 2.das Element mit der id buy_form findet.
+        const buyForm = document.querySelector('#buy_form');
+
        // 3. das Element mit der id product_img findet.
+        const productImg = document.querySelector('#product_img');
+
+        console.log(h1El);
+        console.log(buyForm);
+        console.log(productImg);
      })();
    </script>
  </body>
--- a/03_dom/uebungen/u03_tasse-01001/index.html
+++ b/03_dom/uebungen/u03_tasse-01001/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
@@ -94,12 +94,31 @@
    <script>
      'use strict';
      (() => {
+        const $ = (qs) => document.querySelector(qs);
+        const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
        // alle li-Elemente findet.
+        const allLiEl = document.querySelectorAll('li'); // => NodeList(8)
+        const allLiElAr = Array.from(document.querySelectorAll('li'));
+
+        console.log(allLiEl);
+        console.log(allLiElAr);
+        console.log($$('li'));
+
        // alle h2-Elemente findet.
+        console.log(Array.from(document.querySelectorAll('h2'))); // => 2
+
        // alle Elemente mit der Klasse special findet.
+        console.log(Array.from(document.querySelectorAll('.special'))); // => 3
+
        // alle li-Elemente mit der Klasse keyword findet.
+        console.log(Array.from(document.querySelectorAll('li.keyword'))); // => 1
+
        // alle span-Elemente mit der Klasse special findet.
+        console.log(Array.from(document.querySelectorAll('span.special'))); // => 3
+
        // alle Elemente findet, die die Klassen i UND b haben.
+        console.log(Array.from(document.querySelectorAll('.i.b'))); // => 2
      })();
    </script>
  </body>
--- a/03_dom/uebungen/u04_tasse-01001/index.html
+++ b/03_dom/uebungen/u04_tasse-01001/index.html
@@ -96,10 +96,22 @@
      (() => {
        // Übung 4: 010010000100111101010100 — Teil 3
        // Wenden Sie sich nochmal der 010010000100111101010100-Tasse zu. Benutzen Sie geeignete Selektoren, um
+
        // 1. das erste li zu finden, das sich innerhalb der ul mit der id product_specification befindet.
+        const liUlProdSpecEl = document.querySelector('#product_specification li');
+        console.log(liUlProdSpecEl);
+
        // 2. das erste span-Element zu finden, das sich innerhalb des ersten h1-Elements mit der CSS-Klasse article befindet.
+        const spanH1ArticleEL = document.querySelector('h1.article span');
+        console.log(spanH1ArticleEL);
+
        // 3. alle Elemente mit der Klasse keyword innerhalb von p-Elementen zu finden.
+        const keywordPEls = Array.from(document.querySelectorAll('p .keyword'));
+        console.log(keywordPEls);
+
        // 4. alle li-Elemente innerhalb von ul-Elementen zu finden.
+        const liUls = Array.from(document.querySelectorAll('ul li'));
+        console.log(liUls);
      })();
    </script>
  </body>
--- a/03_dom/uebungen/u05_tasse-01001/index.html
+++ b/03_dom/uebungen/u05_tasse-01001/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
@@ -98,11 +98,28 @@
        // Übung 5: 010010000100111101010100 — Teil 4
        // Wenden Sie sich nochmal der 010010000100111101010100-Tasse zu. Benutzen Sie geeignete Selektoren, um
        // 1. alle Bilder zu finden, deren Dateiname auf jpg endet.
+        const jpgImgEls = Array.from(document.querySelectorAll("img[src$='.jpg'], img[src$='.jpeg']"));
+        console.log(jpgImgEls);
+
        // 2. alle input-Elemente vom Typ button zu finden, die sich innerhalb von Formularen befinden.
+        const inpuButtonFormEls = Array.from(document.querySelectorAll('form input[type="button"]'));
+        console.log(inpuButtonFormEls);
+
        // 3. alle Elemente mit der Klasse model zu finden, die ein Attribut data-model haben, das den Wert V7 enthält.
+        const dataModelEls = Array.from(document.querySelectorAll('.model[data-model*="V7"]'));
+        console.log(dataModelEls);
+
        // 4. alle Bilder zu finden, die nicht die Klasse float_left enthalten.
+        const imgNoFloatLeftEls = Array.from(document.querySelectorAll('img:not(.float_left)'));
+        console.log(imgNoFloatLeftEls);
+
        // 5. alle zweiten Listenpunkte zu finden.
+        const allSecondLiEls = Array.from(document.querySelectorAll('li:nth-child(2n)'));
+        console.log(Array.from(allSecondLiEls));
+
        // 6. alle Listen (ul) zu finden, die unmittelbar nach "einer Überschrift zweiter Ordnung" (h2) folgen.
+        const ulH2Els = Array.from(document.querySelectorAll('h2 + ul'));
+        console.log(ulH2Els);
      })();
    </script>
  </body>
--- a/03_dom/uebungen/u06_tasse-01001/assets/css/styles.css
+++ b/03_dom/uebungen/u06_tasse-01001/assets/css/styles.css
@@ -0,0 +1,369 @@
+/* -------------------------------------------- Haupt CSS fuer alle Seiten -------------------------------------------- */
+
+/* ---------------- CSS-Reset ------------------- */
+html,
+body,
+a,
+div,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+span,
+p,
+img,
+strong,
+ul,
+li,
+table,
+th,
+td,
+tr {
+  margin: 0px;
+  padding: 0px;
+  border: 0px none;
+  font-weight: normal;
+  font-style: inherit;
+  font-family: inherit;
+  font-variant: inherit;
+  text-decoration: none;
+  table-layout: inherit;
+}
+
+/* ---------------- Body / HTML ------------------- */
+
+html {
+  font-size: 100%;
+  background-color: #fffef7;
+}
+
+body {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 1.2em;
+  font-weight: normal;
+  color: black;
+  margin: 0rem auto 2rem auto;
+}
+
+/* ---------------- layout ------------------- */
+
+header {
+  background: url(../img/js_header.png) left top no-repeat transparent;
+  background-size: cover;
+  height: 250px;
+  min-width: 850px;
+}
+
+header:after {
+  content: ' ';
+  display: block;
+  height: 250px;
+  background: rgba(255, 254, 247, 0);
+  background: -moz-linear-gradient(
+    top,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  background: -webkit-gradient(
+    left top,
+    left bottom,
+    color-stop(0%, rgba(255, 254, 247, 0)),
+    color-stop(22%, rgba(255, 254, 247, 0.55)),
+    color-stop(42%, rgba(255, 254, 247, 0.7)),
+    color-stop(43%, rgba(255, 254, 247, 0.71)),
+    color-stop(61%, rgba(255, 254, 247, 0.78)),
+    color-stop(75%, rgba(255, 254, 247, 0.92)),
+    color-stop(87%, rgba(255, 254, 247, 1)),
+    color-stop(100%, rgba(255, 254, 247, 1))
+  );
+  background: -webkit-linear-gradient(
+    top,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  background: -o-linear-gradient(
+    top,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  background: -ms-linear-gradient(
+    top,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  background: linear-gradient(
+    to bottom,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
+}
+
+main,
+footer {
+  width: 70%;
+  margin: 3rem auto;
+  min-width: 850px;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+
+/* ---------------- Content ------------------- */
+
+h1 {
+  color: #93412b;
+  font-size: 3em;
+  margin-bottom: 20px;
+  font-weight: bold;
+}
+
+h2 {
+  color: #93412b;
+  font-size: 2.5em;
+  margin-bottom: 15px;
+}
+
+h3 {
+  color: #93412b;
+  font-size: 2em;
+  margin-bottom: 10px;
+}
+
+p {
+  line-height: 15px;
+  margin-bottom: 15px;
+  line-height: 1.7em;
+}
+
+.cited {
+  font-style: italic;
+  font-size: 0.8em;
+}
+
+.u {
+  text-decoration: underline;
+}
+.b {
+  font-weight: bold;
+}
+.i {
+  font-style: italic;
+}
+.align_right {
+  text-align: right;
+}
+.align_left {
+  text-align: left;
+  margin-right: 10px;
+}
+.align_center {
+  text-align: center;
+}
+.float_left {
+  float: left;
+}
+.float_right {
+  float: right;
+}
+.clear_both {
+  clear: both;
+}
+strong {
+  font-weight: bold;
+}
+.special {
+  color: #b7595b;
+  font-weight: bold;
+}
+.keyword {
+  color: #db6f50;
+  font-weight: bold;
+  font-style: italic;
+}
+.gray,
+.grey {
+  color: gray;
+}
+
+/* Links */
+main a:link,
+main a:visited {
+  color: #eb690b;
+  font-weight: bold;
+}
+
+main a:focus,
+main a:hover,
+main a:active {
+  color: #eb690b;
+}
+
+ul {
+  list-style-position: outside;
+  margin-bottom: 20px;
+  padding-left: 22px;
+}
+
+ol {
+  margin-bottom: 20px;
+  padding-left: 30px;
+}
+
+li {
+  line-height: 1.4em;
+}
+
+/* ------- Article ------- */
+
+h1 {
+  color: #93412b;
+  font-size: 2.7em;
+  margin-bottom: 20px;
+}
+
+#buy_form input[type='button'] {
+  display: inline-block;
+  padding: 1px 20px 3px 20px;
+  background-color: #93412b;
+  color: white;
+  border: 1px solid white;
+  font-size: 1em;
+  height: 32px;
+}
+
+#buy_form input[type='button']:hover {
+  background-color: white;
+  color: #93412b;
+  border: 1px solid #93412b;
+}
+
+#buy_form select {
+  display: inline-block;
+  font-size: 1em;
+  background-color: white;
+  color: #93412b;
+  border: 1px solid #93412b;
+  height: 32px;
+}
+
+/* ------- Chat ------- */
+
+#chat {
+  width: 100%;
+  background-color: white;
+  border: 1px solid #9c352f;
+  height: 20rem;
+  position: relative;
+}
+
+#chat_window {
+  background-color: white;
+  width: 85%;
+  float: left;
+  height: 95%;
+}
+
+#chat_history {
+  position: absolute;
+  bottom: 8%;
+  max-height: 92%;
+  padding: 0px 0px 5px 7px;
+}
+
+#chat_history p {
+  font-size: 0.6em;
+  margin: 0;
+}
+
+#chat_text {
+  height: 8%;
+  position: absolute;
+  bottom: 0;
+  width: 85%;
+}
+
+#chat_text input {
+  width: 98%;
+  display: block;
+  margin: auto;
+}
+
+#chat_members {
+  list-style-type: none;
+  height: 100%;
+  width: 15%;
+  margin-left: 85%;
+  border-left: 1px solid #9c352f;
+  text-align: right;
+  box-sizing: border-box;
+  min-width: 100px;
+  font-size: 0.8em;
+  padding-top: 5px;
+}
+
+#chat_members li {
+  line-height: 1.2em;
+  padding: 5px 10px 2px 15px;
+}
+
+#chat_members .highlighted {
+  background-color: #c14d45;
+  color: white;
+}
+.chat_member {
+  font-weight: bold;
+}
+.chat_member1 {
+  color: #3626c8;
+}
+.chat_member2 {
+  color: #e38d0b;
+}
+
+#member_search {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 15%;
+  height: 8%;
+}
+
+#member_search input {
+  width: 88%;
+  display: block;
+  margin: auto;
+  text-align: right;
+}
--- a/03_dom/uebungen/u06_tasse-01001/assets/img/favicon.ico
+++ b/03_dom/uebungen/u06_tasse-01001/assets/img/favicon.ico
--- a/03_dom/uebungen/u06_tasse-01001/assets/img/js_header.png
+++ b/03_dom/uebungen/u06_tasse-01001/assets/img/js_header.png
--- a/03_dom/uebungen/u06_tasse-01001/assets/img/logo.png
+++ b/03_dom/uebungen/u06_tasse-01001/assets/img/logo.png
--- a/03_dom/uebungen/u06_tasse-01001/assets/img/newsboard_empty.png
+++ b/03_dom/uebungen/u06_tasse-01001/assets/img/newsboard_empty.png
--- a/03_dom/uebungen/u06_tasse-01001/assets/img/newsboard_paperclip.png
+++ b/03_dom/uebungen/u06_tasse-01001/assets/img/newsboard_paperclip.png
--- a/03_dom/uebungen/u06_tasse-01001/assets/img/newsboard_sheets.png
+++ b/03_dom/uebungen/u06_tasse-01001/assets/img/newsboard_sheets.png
--- a/03_dom/uebungen/u06_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif
+++ b/03_dom/uebungen/u06_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif
--- a/03_dom/uebungen/u06_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg
+++ b/03_dom/uebungen/u06_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg
--- a/03_dom/uebungen/u06_tasse-01001/index.html
+++ b/03_dom/uebungen/u06_tasse-01001/index.html
@@ -0,0 +1,115 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+
+    <title>010010000100111101010100</title>
+    <meta name="description" content="JavaScript. HTML mühelos manipuliert" />
+
+    <link rel="stylesheet" href="assets/css/styles.css" type="text/css" media="screen" />
+    <link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon" />
+  </head>
+
+  <body>
+    <header></header>
+
+    <main>
+      <h1 class="article">
+        Hot Binary Heat Changing Mug
+        <span class="keyword">"010010000100111101010100"</span>
+      </h1>
+
+      <img
+        alt="Hot Binary Heat Changing Mug"
+        src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif"
+        class="float_left"
+        id="product_img" />
+
+      <h2>Description</h2>
+
+      <p>
+        Numbers make up
+        <span class="special">everything</span> in our digital world. They flow around us, invisible like the Force or
+        the Matrix, controlling all our many computer-y devices. Two numbers, in particular:
+        <span class="special">0 and 1</span>. <span class="b i">Off and On</span>. Well, we can tell you this: when
+        there's no coffee in our cup, we're completely OFF our game. But when our mug is full of hot coffee, we're
+        totally ON. And now, with the <span class="keyword">Hot Binary Heat Changing Mug</span>, there's a mug that
+        tells us which state our mug is in. In binary!
+      </p>
+
+      <p>
+        See, the
+        <span class="keyword">Hot Binary Heat Changing Mug</span>
+        looks like just a dark mug with binary numbers all over it. That's its OFF or cold state. Add hot coffee (or any
+        liquid) and a series of digits will turn white. Read them continuously from left to right, and you'll read:
+        <span class="keyword">010010000100111101010100</span>. That's <span class="special">in binary</span>. Of course,
+        your
+        <span class="keyword">Hot Binary Heat Changing Mug</span>
+        could just be paying you a compliment. Cheeky, mug.
+      </p>
+
+      <p>
+        <img alt="010010000100111101010100" src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg" />
+      </p>
+
+      <h2>Product Specifications</h2>
+
+      <ul id="product_specification">
+        <li class="keyword">Hot Binary Heat Changing Mug</li>
+        <li>
+          As you add hot liquids, the binary for "HOT" appears (read from left to right in one line, not two:
+          010010000100111101010100)
+        </li>
+        <li>A <span class="keyword">ThinkGeek</span> creation and exclusive!</li>
+        <li>
+          Care Instructions:
+          <span class="i b">Hand wash only. Not microwave or dishwasher safe.</span>
+        </li>
+        <li>Materials: Ceramic</li>
+        <li>Dimensions: approx. 3.15" diameter x 3.75" tall</li>
+      </ul>
+
+      <h3>You wanna buy it?</h3>
+
+      <p class="buy_info_text">If you like to buy this brilliant mug, just do the following steps:</p>
+
+      <ol class="model" data-model="LDV73C-X3">
+        <li>Select how many items do you want.</li>
+        <li>Press "buy".</li>
+      </ol>
+
+      <form id="buy_form">
+        <select>
+          <option>1 item</option>
+          <option>2 items</option>
+          <option>3 items</option>
+          <option>4 items</option>
+        </select>
+        <input type="button" value="buy" />
+      </form>
+    </main>
+
+    <footer>(C) by ThinkGeek &ndash; Produkttext mit freundlicher Genehmigung von ThinkGeek Inc.</footer>
+
+    <script>
+      'use strict';
+      {
+        const $ = (qs) => document.querySelector(qs);
+        const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+        // Übung 6: — Teil 5
+        // Widmen wir uns einmal mehr der Artikelseite der 010010000100111101010100-Tasse.
+
+        // Es besteht der Wunsch, den Text teilweise in grauer Schriftfarbe darzustellen.
+
+        // 1. Schreibe eine Funktion, die allen p-Elementen die CSS-Klasse gray zuordnet.
+
+        // 1. Schreibe eine Funktion, die allen p-Elementen die CSS-Klasse gray zuordnet.
+
+        // 2. Eine Ausnahme soll nur der Fließtext darstellen, der den Kaufvorgang enthält. Die p-Elemente mit der Klasse buy_info_text sollen dementsprechend von dem Vorgang ausgeschlossen werden.
+
+        // 3. Weise nun allen Listenpunkten, die noch keine andere Klasse haben, die Klasse gray zu.
+      }
+    </script>
+  </body>
+</html>
--- a/03_dom/uebungen/u07_content-length/assets/css/main.css
+++ b/03_dom/uebungen/u07_content-length/assets/css/main.css
@@ -0,0 +1,38 @@
+*,
+html {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  font-family: 'Helvetica', 'Arial', sans-serif;
+  color: #444;
+  font-weight: normal;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  padding: 0.5em;
+}
+
+.coffee_break_article {
+  background-color: BurlyWood;
+}
+
+.normal_length_article {
+  background-color: #cafe69;
+}
+
+.lone_weekend_article {
+  background-color: DarkTurquoise;
+}
+
+.container {
+  margin: 0 auto;
+  padding: 1rem;
+  max-width: 1140px;
+}
--- a/03_dom/uebungen/u07_content-length/index.html
+++ b/03_dom/uebungen/u07_content-length/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>Article Detail Page</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" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>Lorem ipsum</h1>
+        <section id="content">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+            ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+            anim id est laborum.
+          </p>
+
+          <p>...</p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+            ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+            anim id est laborum.
+          </p>
+        </section>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // Übung 7: Länge von Artikeln
+      // Einer deiner Kunden wendet sich mit folgendem Wunsch an dich:
+
+      // Leider sind viele unserer Besucher eher kurz angebunden. Im Forum haben sich nun einige gewünscht, dass die Länge des Artikels schon aus der Überschrift (h1) klar hervorgeht. Unser Designer hat sich deswegen drei Stile für Überschriften überlegt und diese auch als entsprechende CSS-Klassen hinterlegt.
+
+      // Miss die Länge eines Artikels in Zeichen und gib den Überschriften automatisch die richtige Klasse.
+
+      // - coffee_break_article bis 3000 Zeichen
+      // - normal_length_article bis 9000 Zeichen
+      // - lone_weekend_article ab 9000 Zeichen
+
+      // Es geht um die Detailseiten der Artikel. Gehe davon aus, dass jede dieser Seiten nur genau eine h1-Überschrift hat und der komplette Artikel, inklusive Bildern und HTML-Struktur, sich in einem Element mit der ID content befindet.
+
+      // Für das Zählen der Zeichen darfst du den kompletten HTML-Code von content auswerten. Es geht nur darum, eine grobe Abschätzung zu bekommen.
+
+      // Durch Duplizieren oder Löschen von Lorem-Ipsum-Absätzen kannst du unterschiedliche Textlängen einfach testen.
+    </script>
+  </body>
+</html>
--- a/03_dom/uebungen/uebungen-6-7.zip
+++ b/03_dom/uebungen/uebungen-6-7.zip
--- a/03_dom/unterricht/tag22/01_dom-selection/index.html
+++ b/03_dom/unterricht/tag22/01_dom-selection/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 Selection</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 id="headline">DOM Selection</h1>
+        <hr />
+        <!-- ul.list>li*4{Listenpunkt 0$} -->
+        <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));
+
+      // DOM Selection
+      console.log($('ul.list li')); //=> <li>Listenpunkt 01</li>
+      console.log($$('ul.list li')); //=> [<li>Listenpunkt 01</li>, ...]
+
+      // document.querySelector('css-selector')
+      console.log(document.querySelector('ul.list li')); //=> <li>Listenpunkt 01</li>
+
+      // document.querySelectorAll('css-selector')
+      console.log(Array.from(document.querySelectorAll('ul.list li'))); //=>  [<li>Listenpunkt 01</li>, ...]
+
+      // =======================
+
+      // document.getElementById('ID');
+      console.log(document.getElementById('headline')); //=> <h1 id="headline">DOM Selection</h1>
+
+      // =============================
+
+      // document.getElementsByClassName('className')
+      console.log(document.getElementsByClassName('container')); //=> HTMLCollection [div.container.py-5]
+
+      // document.getElementsByTagName('li')
+      console.log(document.getElementsByTagName('li')); //=> HTMLCollection(4) [li, li, li, li]
+    </script>
+  </body>
+</html>
--- a/03_dom/unterricht/tag22/02_class-list-chat/assets/css/styles.css
+++ b/03_dom/unterricht/tag22/02_class-list-chat/assets/css/styles.css
@@ -0,0 +1,368 @@
+/* -------------------------------------------- Haupt CSS fuer alle Seiten -------------------------------------------- */
+
+/* ---------------- CSS-Reset ------------------- */
+html,
+body,
+a,
+div,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+span,
+p,
+img,
+strong,
+ul,
+li,
+table,
+th,
+td,
+tr {
+  margin: 0px;
+  padding: 0px;
+  border: 0px none;
+  font-weight: normal;
+  font-style: inherit;
+  font-family: inherit;
+  font-variant: inherit;
+  text-decoration: none;
+  table-layout: inherit;
+}
+
+/* ---------------- Body / HTML ------------------- */
+
+html {
+  font-size: 100%;
+  background-color: #fffef7;
+}
+
+body {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 1.2em;
+  font-weight: normal;
+  color: black;
+  margin: 0rem auto 2rem auto;
+}
+
+/* ---------------- layout ------------------- */
+
+header {
+  background: url(../img/js_header.png) left top no-repeat transparent;
+  background-size: cover;
+  height: 250px;
+  min-width: 850px;
+}
+
+header:after {
+  content: ' ';
+  display: block;
+  height: 250px;
+  background: rgba(255, 254, 247, 0);
+  background: -moz-linear-gradient(
+    top,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  background: -webkit-gradient(
+    left top,
+    left bottom,
+    color-stop(0%, rgba(255, 254, 247, 0)),
+    color-stop(22%, rgba(255, 254, 247, 0.55)),
+    color-stop(42%, rgba(255, 254, 247, 0.7)),
+    color-stop(43%, rgba(255, 254, 247, 0.71)),
+    color-stop(61%, rgba(255, 254, 247, 0.78)),
+    color-stop(75%, rgba(255, 254, 247, 0.92)),
+    color-stop(87%, rgba(255, 254, 247, 1)),
+    color-stop(100%, rgba(255, 254, 247, 1))
+  );
+  background: -webkit-linear-gradient(
+    top,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  background: -o-linear-gradient(
+    top,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  background: -ms-linear-gradient(
+    top,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  background: linear-gradient(
+    to bottom,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
+}
+
+main,
+footer {
+  width: 70%;
+  margin: 3rem auto;
+  min-width: 850px;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+
+/* ---------------- Content ------------------- */
+
+h1 {
+  color: #93412b;
+  font-size: 3em;
+  margin-bottom: 20px;
+  font-weight: bold;
+}
+
+h2 {
+  color: #93412b;
+  font-size: 2.5em;
+  margin-bottom: 15px;
+}
+
+h3 {
+  color: #93412b;
+  font-size: 2em;
+  margin-bottom: 10px;
+}
+
+p {
+  line-height: 15px;
+  margin-bottom: 15px;
+  line-height: 1.7em;
+}
+
+.cited {
+  font-style: italic;
+  font-size: 0.8em;
+}
+
+.u {
+  text-decoration: underline;
+}
+.b {
+  font-weight: bold;
+}
+.i {
+  font-style: italic;
+}
+.align_right {
+  text-align: right;
+}
+.align_left {
+  text-align: left;
+  margin-right: 10px;
+}
+.align_center {
+  text-align: center;
+}
+.float_left {
+  float: left;
+}
+.float_right {
+  float: right;
+}
+.clear_both {
+  clear: both;
+}
+strong {
+  font-weight: bold;
+}
+.special {
+  color: #b7595b;
+  font-weight: bold;
+}
+.keyword {
+  color: #db6f50;
+  font-weight: bold;
+  font-style: italic;
+}
+.gray {
+  color: gray;
+}
+
+/* Links */
+main a:link,
+main a:visited {
+  color: #eb690b;
+  font-weight: bold;
+}
+
+main a:focus,
+main a:hover,
+main a:active {
+  color: #eb690b;
+}
+
+ul {
+  list-style-position: outside;
+  margin-bottom: 20px;
+  padding-left: 22px;
+}
+
+ol {
+  margin-bottom: 20px;
+  padding-left: 30px;
+}
+
+li {
+  line-height: 1.4em;
+}
+
+/* ------- Article ------- */
+
+h1 {
+  color: #93412b;
+  font-size: 2.7em;
+  margin-bottom: 20px;
+}
+
+#buy_form input[type='button'] {
+  display: inline-block;
+  padding: 1px 20px 3px 20px;
+  background-color: #93412b;
+  color: white;
+  border: 1px solid white;
+  font-size: 1em;
+  height: 32px;
+}
+
+#buy_form input[type='button']:hover {
+  background-color: white;
+  color: #93412b;
+  border: 1px solid #93412b;
+}
+
+#buy_form select {
+  display: inline-block;
+  font-size: 1em;
+  background-color: white;
+  color: #93412b;
+  border: 1px solid #93412b;
+  height: 32px;
+}
+
+/* ------- Chat ------- */
+
+#chat {
+  width: 100%;
+  background-color: white;
+  border: 1px solid #9c352f;
+  height: 20rem;
+  position: relative;
+}
+
+#chat_window {
+  background-color: white;
+  width: 85%;
+  float: left;
+  height: 95%;
+}
+
+#chat_history {
+  position: absolute;
+  bottom: 8%;
+  max-height: 92%;
+  padding: 0px 0px 5px 7px;
+}
+
+#chat_history p {
+  font-size: 0.6em;
+  margin: 0;
+}
+
+#chat_text {
+  height: 8%;
+  position: absolute;
+  bottom: 0;
+  width: 85%;
+}
+
+#chat_text input {
+  width: 98%;
+  display: block;
+  margin: auto;
+}
+
+#chat_members {
+  list-style-type: none;
+  height: 100%;
+  width: 15%;
+  margin-left: 85%;
+  border-left: 1px solid #9c352f;
+  text-align: right;
+  box-sizing: border-box;
+  min-width: 100px;
+  font-size: 0.8em;
+  padding-top: 5px;
+}
+
+#chat_members li {
+  line-height: 1.2em;
+  padding: 5px 10px 2px 15px;
+}
+
+#chat_members .highlighted {
+  background-color: #c14d45;
+  color: white;
+}
+.chat_member {
+  font-weight: bold;
+}
+.chat_member1 {
+  color: #3626c8;
+}
+.chat_member2 {
+  color: #e38d0b;
+}
+
+#member_search {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 15%;
+  height: 8%;
+}
+
+#member_search input {
+  width: 88%;
+  display: block;
+  margin: auto;
+  text-align: right;
+}
--- a/03_dom/unterricht/tag22/02_class-list-chat/assets/img/favicon.icon
+++ b/03_dom/unterricht/tag22/02_class-list-chat/assets/img/favicon.icon
--- a/03_dom/unterricht/tag22/02_class-list-chat/assets/img/js_header.png
+++ b/03_dom/unterricht/tag22/02_class-list-chat/assets/img/js_header.png
--- a/03_dom/unterricht/tag22/02_class-list-chat/index.html
+++ b/03_dom/unterricht/tag22/02_class-list-chat/index.html
@@ -0,0 +1,123 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>classList - DOMTokenList</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/styles.css" />
+    <link rel="shortcut icon" href="assets/img/favicon.icon" type="image/x-icon" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>classList - <a href="https://developer.mozilla.org/de/docs/Web/API/DOMTokenList">DOMTokenList</a></h1>
+        <hr />
+        <h2>The Chat</h2>
+        <div id="chat">
+          <div id="chat_window">
+            <div id="chat_history">
+              <p>
+                <span class="chat_member chat_member1">Ladislaus:</span>
+                Anybody there?
+              </p>
+              <p>
+                <span class="chat_member chat_member2">Friedlinde</span>
+                Yes, me!
+              </p>
+            </div>
+
+            <div id="chat_text">
+              <input type="text" placeholder="...new message..." />
+            </div>
+          </div>
+
+          <ul id="chat_members">
+            <li class="admin">Heribert</li>
+            <li>Friedlinde</li>
+            <li>Tusnelda</li>
+            <li>Berthold</li>
+            <li>Oswine</li>
+            <li>Ladislaus</li>
+          </ul>
+
+          <div id="member_search">
+            <input type="text" placeholder="...Find a member..." />
+          </div>
+        </div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const $ = (qs) => document.querySelector(qs);
+      const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+      const listItemsChat = $$('#chat_members li');
+
+      console.log(listItemsChat); //=> (6) [li.admin, li, li, li, li, li]
+      console.log(listItemsChat[0]); //=> <li class="admin">Heribert</li>
+
+      // Die meisten Attribute in HTML können als Eigenschaft in JS direkt angesprochen werden (IDL)
+
+      console.log($('#member_search input').type); //=> "text"
+      console.log($('#member_search input').placeholder); //=> "...Find a member..."
+      console.log($('#member_search').id); //=> "member_search"
+
+      // class Attribut kann nicht direkt als Eigenschaft angesprochen werden, sondern classList
+      console.log($('#chat_members li').class); // => undefined
+      console.log($('#chat_members li').classList); // => DOMTokenList ['admin', value: 'admin']
+      console.log($('#chat_history span').classList); // => DOMTokenList ['chat_member', 'chat_member1', value: "chat_member chat_member1"]
+
+      console.log($('#chat_members li').classList.value); // => 'admin'
+
+      // DOMTokenList - .classList
+      console.log($('#chat_members li').classList[0]); //=> 'admin'
+
+      // DOMTokenList - Eigenschaft - length
+      console.log($('#chat_members li').classList.length); //=> 1
+      console.log($('div').classList.length); //=> 2
+
+      // DOMTokenList - Methode - .add()
+      $('#chat_members li').classList.add('highlighted');
+      $('#chat_members li').classList.add('highlighted', 'admin');
+
+      // DOMTokenList - Methode - .remove()
+      $('#chat_members li').classList.remove('highlighted');
+      $('#chat_members li').classList.remove('highlighted', 'admin');
+
+      // DOMTokenList - Methode - .toggle()
+      $('#chat_members li').classList.toggle('highlighted'); // Klasse 'highlighted' wird hinzugefügt, wenn NICHT vorhanden.
+      $('#chat_members li').classList.toggle('highlighted'); // Klasse 'highlighted' wird entfernt, wenn vorhanden.
+
+      // DOMTokenList - Methode - .contains()
+      console.log($('#chat_members li').classList.contains('highlighted')); // false
+      $('#chat_members li').classList.add('admin');
+      console.log($('#chat_members li').classList.contains('admin')); // true
+
+      // DOMTokenList - Methode - .replace() - kein IE11
+      $('#chat_members li').classList.replace('admin', 'guest');
+      $('#chat_members li').classList.replace('guest', 'admin');
+
+      // $('#chat_members li').classList.remove('admin');
+      // $('#chat_members li').classList.add('guest');
+
+      // DOMTokenList - Methode - .item()
+      console.log($('#chat_members li').classList.item(0)); //=> 'admin'
+      console.log($('#chat_members li').classList[0]); //=> 'admin'
+
+      // ===========
+
+      const searchFor = 'ert'; // TODO: search value from input
+
+      const liNodes = $$('#chat_members li');
+      const liNodesFound = liNodes.filter((liNode) => {
+        return liNode.textContent.includes(searchFor); // liNode.textContent === searchFor
+      });
+
+      liNodesFound.forEach((liNode) => {
+        liNode.classList.add('highlighted');
+      });
+    </script>
+  </body>
+</html>
--- a/03_dom/unterricht/tag22/03_js-auslagern-defer/assets/img/defer_async.png
+++ b/03_dom/unterricht/tag22/03_js-auslagern-defer/assets/img/defer_async.png
--- a/03_dom/unterricht/tag22/03_js-auslagern-defer/assets/js/main.js
+++ b/03_dom/unterricht/tag22/03_js-auslagern-defer/assets/js/main.js
@@ -0,0 +1,17 @@
+'use strict';
+
+console.log('Datei wurde eingebunden.');
+
+const h1El = document.querySelector('h1'); // => <h1>...</h1> - mit "defer" Attribut | null - ohne "defer" Attribut
+
+console.log('h1El: ', h1El);
+
+const onReady = () => {
+  const h1El = document.querySelector('h1');
+  h1El.style.color = 'tomato';
+
+  console.log('h1El: ', h1El);
+};
+
+// Eventlauscher - EventHandler wird ausgelöst, wenn Dokument komplett initialisiert wurde.
+document.addEventListener('DOMContentLoaded', onReady);
--- a/03_dom/unterricht/tag22/03_js-auslagern-defer/index.html
+++ b/03_dom/unterricht/tag22/03_js-auslagern-defer/index.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JS Dateien auslagern und Attribut "defer"</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>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>JS Dateien auslagern und Attribut "defer"</h1>
+        <img src="assets/img/defer_async.png" alt="" class="img-thumbnail" />
+      </div>
+    </main>
+    <script>
+      'use strict';
+    </script>
+  </body>
+</html>
--- a/03_dom/unterricht/tag22/04_chat-lernheft/assets/css/styles.css
+++ b/03_dom/unterricht/tag22/04_chat-lernheft/assets/css/styles.css
@@ -0,0 +1,368 @@
+/* -------------------------------------------- Haupt CSS fuer alle Seiten -------------------------------------------- */
+
+/* ---------------- CSS-Reset ------------------- */
+html,
+body,
+a,
+div,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+span,
+p,
+img,
+strong,
+ul,
+li,
+table,
+th,
+td,
+tr {
+  margin: 0px;
+  padding: 0px;
+  border: 0px none;
+  font-weight: normal;
+  font-style: inherit;
+  font-family: inherit;
+  font-variant: inherit;
+  text-decoration: none;
+  table-layout: inherit;
+}
+
+/* ---------------- Body / HTML ------------------- */
+
+html {
+  font-size: 100%;
+  background-color: #fffef7;
+}
+
+body {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 1.2em;
+  font-weight: normal;
+  color: black;
+  margin: 0rem auto 2rem auto;
+}
+
+/* ---------------- layout ------------------- */
+
+header {
+  background: url(../img/js_header.png) left top no-repeat transparent;
+  background-size: cover;
+  height: 250px;
+  min-width: 850px;
+}
+
+header:after {
+  content: ' ';
+  display: block;
+  height: 250px;
+  background: rgba(255, 254, 247, 0);
+  background: -moz-linear-gradient(
+    top,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  background: -webkit-gradient(
+    left top,
+    left bottom,
+    color-stop(0%, rgba(255, 254, 247, 0)),
+    color-stop(22%, rgba(255, 254, 247, 0.55)),
+    color-stop(42%, rgba(255, 254, 247, 0.7)),
+    color-stop(43%, rgba(255, 254, 247, 0.71)),
+    color-stop(61%, rgba(255, 254, 247, 0.78)),
+    color-stop(75%, rgba(255, 254, 247, 0.92)),
+    color-stop(87%, rgba(255, 254, 247, 1)),
+    color-stop(100%, rgba(255, 254, 247, 1))
+  );
+  background: -webkit-linear-gradient(
+    top,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  background: -o-linear-gradient(
+    top,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  background: -ms-linear-gradient(
+    top,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  background: linear-gradient(
+    to bottom,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
+}
+
+main,
+footer {
+  width: 70%;
+  margin: 3rem auto;
+  min-width: 850px;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+
+/* ---------------- Content ------------------- */
+
+h1 {
+  color: #93412b;
+  font-size: 3em;
+  margin-bottom: 20px;
+  font-weight: bold;
+}
+
+h2 {
+  color: #93412b;
+  font-size: 2.5em;
+  margin-bottom: 15px;
+}
+
+h3 {
+  color: #93412b;
+  font-size: 2em;
+  margin-bottom: 10px;
+}
+
+p {
+  line-height: 15px;
+  margin-bottom: 15px;
+  line-height: 1.7em;
+}
+
+.cited {
+  font-style: italic;
+  font-size: 0.8em;
+}
+
+.u {
+  text-decoration: underline;
+}
+.b {
+  font-weight: bold;
+}
+.i {
+  font-style: italic;
+}
+.align_right {
+  text-align: right;
+}
+.align_left {
+  text-align: left;
+  margin-right: 10px;
+}
+.align_center {
+  text-align: center;
+}
+.float_left {
+  float: left;
+}
+.float_right {
+  float: right;
+}
+.clear_both {
+  clear: both;
+}
+strong {
+  font-weight: bold;
+}
+.special {
+  color: #b7595b;
+  font-weight: bold;
+}
+.keyword {
+  color: #db6f50;
+  font-weight: bold;
+  font-style: italic;
+}
+.gray {
+  color: gray;
+}
+
+/* Links */
+main a:link,
+main a:visited {
+  color: #eb690b;
+  font-weight: bold;
+}
+
+main a:focus,
+main a:hover,
+main a:active {
+  color: #eb690b;
+}
+
+ul {
+  list-style-position: outside;
+  margin-bottom: 20px;
+  padding-left: 22px;
+}
+
+ol {
+  margin-bottom: 20px;
+  padding-left: 30px;
+}
+
+li {
+  line-height: 1.4em;
+}
+
+/* ------- Article ------- */
+
+h1 {
+  color: #93412b;
+  font-size: 2.7em;
+  margin-bottom: 20px;
+}
+
+#buy_form input[type='button'] {
+  display: inline-block;
+  padding: 1px 20px 3px 20px;
+  background-color: #93412b;
+  color: white;
+  border: 1px solid white;
+  font-size: 1em;
+  height: 32px;
+}
+
+#buy_form input[type='button']:hover {
+  background-color: white;
+  color: #93412b;
+  border: 1px solid #93412b;
+}
+
+#buy_form select {
+  display: inline-block;
+  font-size: 1em;
+  background-color: white;
+  color: #93412b;
+  border: 1px solid #93412b;
+  height: 32px;
+}
+
+/* ------- Chat ------- */
+
+#chat {
+  width: 100%;
+  background-color: white;
+  border: 1px solid #9c352f;
+  height: 20rem;
+  position: relative;
+}
+
+#chat_window {
+  background-color: white;
+  width: 85%;
+  float: left;
+  height: 95%;
+}
+
+#chat_history {
+  position: absolute;
+  bottom: 8%;
+  max-height: 92%;
+  padding: 0px 0px 5px 7px;
+}
+
+#chat_history p {
+  font-size: 0.6em;
+  margin: 0;
+}
+
+#chat_text {
+  height: 8%;
+  position: absolute;
+  bottom: 0;
+  width: 85%;
+}
+
+#chat_text input {
+  width: 98%;
+  display: block;
+  margin: auto;
+}
+
+#chat_members {
+  list-style-type: none;
+  height: 100%;
+  width: 15%;
+  margin-left: 85%;
+  border-left: 1px solid #9c352f;
+  text-align: right;
+  box-sizing: border-box;
+  min-width: 100px;
+  font-size: 0.8em;
+  padding-top: 5px;
+}
+
+#chat_members li {
+  line-height: 1.2em;
+  padding: 5px 10px 2px 15px;
+}
+
+#chat_members .highlighted {
+  background-color: #c14d45;
+  color: white;
+}
+.chat_member {
+  font-weight: bold;
+}
+.chat_member1 {
+  color: #3626c8;
+}
+.chat_member2 {
+  color: #e38d0b;
+}
+
+#member_search {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 15%;
+  height: 8%;
+}
+
+#member_search input {
+  width: 88%;
+  display: block;
+  margin: auto;
+  text-align: right;
+}
--- a/03_dom/unterricht/tag22/04_chat-lernheft/assets/img/favicon.icon
+++ b/03_dom/unterricht/tag22/04_chat-lernheft/assets/img/favicon.icon
--- a/03_dom/unterricht/tag22/04_chat-lernheft/assets/img/js_header.png
+++ b/03_dom/unterricht/tag22/04_chat-lernheft/assets/img/js_header.png
--- a/03_dom/unterricht/tag22/04_chat-lernheft/assets/js/main.js
+++ b/03_dom/unterricht/tag22/04_chat-lernheft/assets/js/main.js
@@ -0,0 +1,19 @@
+'use strict';
+
+{
+  const highlightChatMembersBy = (partOfMemberName) => {
+    chatMembers()
+      .filter((member) => doesMemberMatch(partOfMemberName, member))
+      .forEach(highlight);
+  };
+
+  const doesMemberMatch = (partOfMemberName, member) =>
+    member.innerHTML.toLowerCase().includes(partOfMemberName.toLowerCase());
+
+  const chatMembers = () => $$('#chat_members li');
+  const highlight = (el) => el.classList.add('highlighted');
+
+  const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+  highlightChatMembersBy('ert');
+}
--- a/03_dom/unterricht/tag22/04_chat-lernheft/index.html
+++ b/03_dom/unterricht/tag22/04_chat-lernheft/index.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>classList - DOMTokenList</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/styles.css" />
+    <link rel="shortcut icon" href="assets/img/favicon.icon" type="image/x-icon" />
+    <script src="assets/js/main.js" defer></script>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h2>The Chat</h2>
+        <div id="chat">
+          <div id="chat_window">
+            <div id="chat_history">
+              <p>
+                <span class="chat_member chat_member1">Ladislaus:</span>
+                Anybody there?
+              </p>
+              <p>
+                <span class="chat_member chat_member2">Friedlinde</span>
+                Yes, me!
+              </p>
+            </div>
+
+            <div id="chat_text">
+              <input type="text" placeholder="...new message..." />
+            </div>
+          </div>
+
+          <ul id="chat_members">
+            <li class="admin">Heribert</li>
+            <li>Friedlinde</li>
+            <li>Tusnelda</li>
+            <li>Berthold</li>
+            <li>Oswine</li>
+            <li>Ladislaus</li>
+          </ul>
+
+          <div id="member_search">
+            <input type="text" placeholder="...Find a member..." />
+          </div>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
--- a/03_dom/unterricht/tag22/05_chat-refactored/assets/css/styles.css
+++ b/03_dom/unterricht/tag22/05_chat-refactored/assets/css/styles.css
@@ -0,0 +1,368 @@
+/* -------------------------------------------- Haupt CSS fuer alle Seiten -------------------------------------------- */
+
+/* ---------------- CSS-Reset ------------------- */
+html,
+body,
+a,
+div,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+span,
+p,
+img,
+strong,
+ul,
+li,
+table,
+th,
+td,
+tr {
+  margin: 0px;
+  padding: 0px;
+  border: 0px none;
+  font-weight: normal;
+  font-style: inherit;
+  font-family: inherit;
+  font-variant: inherit;
+  text-decoration: none;
+  table-layout: inherit;
+}
+
+/* ---------------- Body / HTML ------------------- */
+
+html {
+  font-size: 100%;
+  background-color: #fffef7;
+}
+
+body {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 1.2em;
+  font-weight: normal;
+  color: black;
+  margin: 0rem auto 2rem auto;
+}
+
+/* ---------------- layout ------------------- */
+
+header {
+  background: url(../img/js_header.png) left top no-repeat transparent;
+  background-size: cover;
+  height: 250px;
+  min-width: 850px;
+}
+
+header:after {
+  content: ' ';
+  display: block;
+  height: 250px;
+  background: rgba(255, 254, 247, 0);
+  background: -moz-linear-gradient(
+    top,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  background: -webkit-gradient(
+    left top,
+    left bottom,
+    color-stop(0%, rgba(255, 254, 247, 0)),
+    color-stop(22%, rgba(255, 254, 247, 0.55)),
+    color-stop(42%, rgba(255, 254, 247, 0.7)),
+    color-stop(43%, rgba(255, 254, 247, 0.71)),
+    color-stop(61%, rgba(255, 254, 247, 0.78)),
+    color-stop(75%, rgba(255, 254, 247, 0.92)),
+    color-stop(87%, rgba(255, 254, 247, 1)),
+    color-stop(100%, rgba(255, 254, 247, 1))
+  );
+  background: -webkit-linear-gradient(
+    top,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  background: -o-linear-gradient(
+    top,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  background: -ms-linear-gradient(
+    top,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  background: linear-gradient(
+    to bottom,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
+}
+
+main,
+footer {
+  width: 70%;
+  margin: 3rem auto;
+  min-width: 850px;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+
+/* ---------------- Content ------------------- */
+
+h1 {
+  color: #93412b;
+  font-size: 3em;
+  margin-bottom: 20px;
+  font-weight: bold;
+}
+
+h2 {
+  color: #93412b;
+  font-size: 2.5em;
+  margin-bottom: 15px;
+}
+
+h3 {
+  color: #93412b;
+  font-size: 2em;
+  margin-bottom: 10px;
+}
+
+p {
+  line-height: 15px;
+  margin-bottom: 15px;
+  line-height: 1.7em;
+}
+
+.cited {
+  font-style: italic;
+  font-size: 0.8em;
+}
+
+.u {
+  text-decoration: underline;
+}
+.b {
+  font-weight: bold;
+}
+.i {
+  font-style: italic;
+}
+.align_right {
+  text-align: right;
+}
+.align_left {
+  text-align: left;
+  margin-right: 10px;
+}
+.align_center {
+  text-align: center;
+}
+.float_left {
+  float: left;
+}
+.float_right {
+  float: right;
+}
+.clear_both {
+  clear: both;
+}
+strong {
+  font-weight: bold;
+}
+.special {
+  color: #b7595b;
+  font-weight: bold;
+}
+.keyword {
+  color: #db6f50;
+  font-weight: bold;
+  font-style: italic;
+}
+.gray {
+  color: gray;
+}
+
+/* Links */
+main a:link,
+main a:visited {
+  color: #eb690b;
+  font-weight: bold;
+}
+
+main a:focus,
+main a:hover,
+main a:active {
+  color: #eb690b;
+}
+
+ul {
+  list-style-position: outside;
+  margin-bottom: 20px;
+  padding-left: 22px;
+}
+
+ol {
+  margin-bottom: 20px;
+  padding-left: 30px;
+}
+
+li {
+  line-height: 1.4em;
+}
+
+/* ------- Article ------- */
+
+h1 {
+  color: #93412b;
+  font-size: 2.7em;
+  margin-bottom: 20px;
+}
+
+#buy_form input[type='button'] {
+  display: inline-block;
+  padding: 1px 20px 3px 20px;
+  background-color: #93412b;
+  color: white;
+  border: 1px solid white;
+  font-size: 1em;
+  height: 32px;
+}
+
+#buy_form input[type='button']:hover {
+  background-color: white;
+  color: #93412b;
+  border: 1px solid #93412b;
+}
+
+#buy_form select {
+  display: inline-block;
+  font-size: 1em;
+  background-color: white;
+  color: #93412b;
+  border: 1px solid #93412b;
+  height: 32px;
+}
+
+/* ------- Chat ------- */
+
+#chat {
+  width: 100%;
+  background-color: white;
+  border: 1px solid #9c352f;
+  height: 20rem;
+  position: relative;
+}
+
+#chat_window {
+  background-color: white;
+  width: 85%;
+  float: left;
+  height: 95%;
+}
+
+#chat_history {
+  position: absolute;
+  bottom: 8%;
+  max-height: 92%;
+  padding: 0px 0px 5px 7px;
+}
+
+#chat_history p {
+  font-size: 0.6em;
+  margin: 0;
+}
+
+#chat_text {
+  height: 8%;
+  position: absolute;
+  bottom: 0;
+  width: 85%;
+}
+
+#chat_text input {
+  width: 98%;
+  display: block;
+  margin: auto;
+}
+
+#chat_members {
+  list-style-type: none;
+  height: 100%;
+  width: 15%;
+  margin-left: 85%;
+  border-left: 1px solid #9c352f;
+  text-align: right;
+  box-sizing: border-box;
+  min-width: 100px;
+  font-size: 0.8em;
+  padding-top: 5px;
+}
+
+#chat_members li {
+  line-height: 1.2em;
+  padding: 5px 10px 2px 15px;
+}
+
+#chat_members .highlighted {
+  background-color: #c14d45;
+  color: white;
+}
+.chat_member {
+  font-weight: bold;
+}
+.chat_member1 {
+  color: #3626c8;
+}
+.chat_member2 {
+  color: #e38d0b;
+}
+
+#member_search {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 15%;
+  height: 8%;
+}
+
+#member_search input {
+  width: 88%;
+  display: block;
+  margin: auto;
+  text-align: right;
+}
--- a/03_dom/unterricht/tag22/05_chat-refactored/assets/img/favicon.icon
+++ b/03_dom/unterricht/tag22/05_chat-refactored/assets/img/favicon.icon
--- a/03_dom/unterricht/tag22/05_chat-refactored/assets/img/js_header.png
+++ b/03_dom/unterricht/tag22/05_chat-refactored/assets/img/js_header.png
--- a/03_dom/unterricht/tag22/05_chat-refactored/assets/js/main.js
+++ b/03_dom/unterricht/tag22/05_chat-refactored/assets/js/main.js
@@ -0,0 +1,35 @@
+'use strict';
+
+// IIFE
+(() => {
+  // === DOM & VARS =======
+  const module = document.querySelector('#chat') || console.error('Element not found');
+
+  const DOM = {
+    listItems: Array.from(module.querySelectorAll('#chat_members li')),
+  };
+
+  console.log(DOM);
+
+  // === INIT =============
+  const init = () => {
+    // Funktionsaufrufe zu beginn der Anwendung
+    highlightListItemBy('ert');
+  };
+
+  // === EVENTHANDLER =====
+
+  // === XHR/FETCH ========
+
+  // === FUNCTIONS ========
+  const highlightListItemBy = (searchValue = '') => {
+    DOM.listItems.forEach((el) => {
+      const text = el.textContent.trim().toLowerCase();
+      if (text.includes(searchValue.trim().toLowerCase())) {
+        el.classList.add('highlighted');
+      }
+    });
+  };
+
+  init();
+})();
--- a/03_dom/unterricht/tag22/05_chat-refactored/index.html
+++ b/03_dom/unterricht/tag22/05_chat-refactored/index.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>classList - DOMTokenList</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/styles.css" />
+    <link rel="shortcut icon" href="assets/img/favicon.icon" type="image/x-icon" />
+    <script src="assets/js/main.js" defer></script>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h2>The Chat</h2>
+        <div id="chat">
+          <div id="chat_window">
+            <div id="chat_history">
+              <p>
+                <span class="chat_member chat_member1">Ladislaus:</span>
+                Anybody there?
+              </p>
+              <p>
+                <span class="chat_member chat_member2">Friedlinde</span>
+                Yes, me!
+              </p>
+            </div>
+
+            <div id="chat_text">
+              <input type="text" placeholder="...new message..." />
+            </div>
+          </div>
+
+          <ul id="chat_members">
+            <li class="admin">Heribert</li>
+            <li>Friedlinde</li>
+            <li>Tusnelda</li>
+            <li>Berthold</li>
+            <li>Oswine</li>
+            <li>Ladislaus</li>
+          </ul>
+
+          <div id="member_search">
+            <input type="text" placeholder="...Find a member..." />
+          </div>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
--- a/03_dom/unterricht/tag22/06_event-mouse/index.html
+++ b/03_dom/unterricht/tag22/06_event-mouse/index.html
@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Events - MouseEvent | PointerEvent</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <style>
+      .box {
+        background-color: tomato;
+        padding: 2rem;
+        display: block;
+        width: 200px;
+      }
+
+      .box .inner {
+        background-color: orange;
+        color: white;
+        display: inline-block;
+        padding: 0.5rem;
+      }
+
+      .content-box {
+        width: 600px;
+        height: 250px;
+        border: 5px solid #ccc;
+        margin: 2rem;
+        position: relative;
+      }
+
+      .mouse-follower {
+        width: 20px;
+        height: 20px;
+        margin: -10px 0 0 -10px;
+        border-radius: 50%;
+        background-color: tomato;
+        position: absolute;
+        top: 0;
+        left: 0;
+        user-select: none;
+        pointer-events: none;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>Events - MouseEvent | PointerEvent</h1>
+        <p><a href="https://developer.mozilla.org/de/docs/Web/API/Document_Object_Model/Events">Standard Events</a></p>
+        <p><a href="https://www.w3schools.com/jsref/dom_obj_event.asp">JS Events in W3Schools</a></p>
+        <hr />
+
+        <!-- .mb-3>img[src="https://dummyimage.com/600x300/f90/fff.jpg"].img-thumbnail -->
+        <div class="mb-3"><img src="https://dummyimage.com/600x300/f90/fff.jpg" alt="" class="img-thumbnail" /></div>
+
+        <!-- button.btn.btn-primary.button-click.mb-3>span{Klick Mich} -->
+        <button class="btn btn-primary button-click mb-3"><span>Klick Mich</span></button>
+
+        <!-- .box>span.inner{Content} -->
+        <div class="box"><span class="inner">Content</span></div>
+
+        <div class="content-box">
+          <div class="mouse-follower"></div>
+        </div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const $ = (qs) => document.querySelector(qs);
+      const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+      // PointerEvent - click - Ereignis wird ausgelöst, wenn der Anwender auf ein Element klickt
+      $('.button-click').addEventListener('click', (e) => {
+        const btn = e.currentTarget;
+        console.log('CLICK');
+        console.log('PointerEvent: ', e);
+        console.log('e.target: ', e.target); // verschachtelte angeklickte Element
+
+        // BITTE BEI POINTER/MOUSEVENT e.currentTarget VERWENDEN!!!
+        console.log('e.currentTarget: ', e.currentTarget); // gibt das Element zurück , worauf der Ereignis-Lauscher angelegt wurde.
+      });
+
+      // PointerEvent - dblclick - Ereignis wird ausgelöst, wenn der Anwender auf ein Element doppelt klickt
+      $('.button-click').addEventListener('dblclick', (e) => {
+        const btn = e.currentTarget;
+        console.log('DOUBLE CLICK');
+
+        console.log('PointerEvent: ', e);
+        console.log('e.target: ', e.target); // verschachtelte angeklickte Element
+
+        // BITTE BEI POINTER/MOUSEVENT e.currentTarget VERWENDEN!!!
+        console.log('e.currentTarget: ', e.currentTarget); // gibt das Element zurück , worauf der Ereignis-Lauscher angelegt wurde.
+      });
+
+      // MouseEvent - mouseenter - Ereignis wird ausgelöst, wenn der Benutzer über ein Element fährt. (einmalig)
+      $('img').addEventListener('mouseenter', (e) => {
+        console.log('MouseEvent: ', e);
+        console.log('MOUSE ENTER');
+
+        console.log('e.currentTarget: ', e.currentTarget);
+      });
+
+      // MouseEvent - mouseleave - Ereignis wird ausgelöst, wenn der Benutzer ein Element verlässst. (einmalig)
+      $('img').addEventListener('mouseleave', (e) => {
+        console.log('MouseEvent: ', e);
+        console.log('MOUSE LEAVE');
+
+        console.log('e.currentTarget: ', e.currentTarget);
+      });
+
+      // MouseEvent - mouseover - Ereignis wird ausgelöst, wenn der Benutzer über ein Element oder ein verschachteltes Element fährt. (mehrfach)
+      $('.box').addEventListener('mouseover', (e) => {
+        console.log('MouseEvent: ', e);
+        console.log('MOUSE OVER');
+
+        console.log('e.currentTarget: ', e.currentTarget);
+      });
+
+      // MouseEvent - mouseout - Ereignis wird ausgelöst, wenn der Benutzer  ein Element oder ein verschachteltes Element verlässt. (mehrfach)
+      $('.box').addEventListener('mouseout', (e) => {
+        console.log('MouseEvent: ', e);
+        console.log('MOUSE OUT');
+
+        console.log('e.currentTarget: ', e.currentTarget);
+      });
+
+      $('.content-box').addEventListener('mousemove', (e) => {
+        console.log('MOUSE MOVE');
+        console.log('screenX: ', e.screenX);
+        console.log('screenY: ', e.screenY);
+        $('.mouse-follower').style.top = `${e.offsetY}px`;
+        $('.mouse-follower').style.left = `${e.offsetX}px`;
+      });
+    </script>
+  </body>
+</html>
--- a/03_dom/unterricht/tag22/07_event-keyboard/index.html
+++ b/03_dom/unterricht/tag22/07_event-keyboard/index.html
@@ -0,0 +1,145 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Events - KeyboardEvent | InputEvent | FocusEvent</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>Events - KeyboardEvent | InputEvent | FocusEvent</h1>
+        <p><a href="https://developer.mozilla.org/de/docs/Web/API/Document_Object_Model/Events">Standard Events</a></p>
+        <p><a href="https://www.w3schools.com/jsref/dom_obj_event.asp">JS Events in W3Schools</a></p>
+        <hr />
+        <!-- .member-search.my-3>label.form-label+input:search.form-control#input-search.input-search -->
+        <div class="member-search my-3">
+          <label for="input-search" class="form-label">Suchfeld</label>
+          <input type="search" name="" id="input-search" class="form-control input-search" />
+        </div>
+
+        <!-- .percent-scale.mb-3>label.form-label{Regler}+input:range#input-range.form-range.input-range -->
+        <div class="percent-scale mb-3">
+          <label for="input-range" class="form-label">Regler</label>
+          <input
+            type="range"
+            name="percent"
+            min="0"
+            max="100"
+            value="0"
+            id="input-range"
+            class="form-range input-range" />
+        </div>
+
+        <!-- .country-selection.mb-3>label.form-label{Select Country}+select#select-country.select-country.form-select>option*4 -->
+        <div class="country-selection mb-3">
+          <label for="select-country" class="form-label">Select Country</label>
+          <select name="country" id="select-country" class="select-country form-select">
+            <option value="de">Deutschland</option>
+            <option value="es">Spanien</option>
+            <option value="fr">Frankreich</option>
+            <option value="it">Italien</option>
+          </select>
+        </div>
+
+        <div class="checkbox mb-3">
+          <input type="checkbox" name="agb" id="cb-agb" />
+          <label for="cb-agb" class="form-check-label">AGB akzeptieren</label>
+        </div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const $ = (qs) => document.querySelector(qs);
+      const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+      // KeyboardEvent ============================
+
+      // KeyboardEvent - keyup - wird ausgelöst, wenn Taste logelassen wird.
+      // $('#input-search').addEventListener('keyup', (e) => {
+      //   console.log('=======');
+      //   console.log('KeyboardEvent: ', e);
+
+      //   console.log('e.target:', e.target);
+      //   console.log('KEY UP');
+
+      //   console.log('e.code:', e.code); //spezifischere Angabe
+      //   console.log('e.key:', e.key);
+
+      //   const value = e.target.value;
+      //   console.log('input: ', value);
+      // });
+
+      // // KeyboardEvent - keydown- wird ausgelöst, wenn Taste gedrückt (mehrfach).
+      // $('#input-search').addEventListener('keydown', (e) => {
+      //   console.log('=======');
+      //   console.log('KEY DOWN');
+
+      //   console.log('e.code:', e.code); //spezifischere Angabe
+      //   console.log('e.key:', e.key);
+
+      //   const value = e.target.value;
+      //   console.log('input: ', value);
+      // });
+
+      // // KeyboardEvent - keypress - wird ausgelöst, wenn Taste gedrückt (einmalig und später als keydown).
+      // $('#input-search').addEventListener('keypress', (e) => {
+      //   console.log('=======');
+      //   console.log('KEY PRESS');
+
+      //   console.log('e.code:', e.code); //spezifischere Angabe
+      //   console.log('e.key:', e.key);
+
+      //   const value = e.target.value;
+      //   console.log('input: ', value);
+      // });
+
+      // InputEvent =============================
+      $('#input-search').addEventListener('input', (e) => {
+        console.log('=======');
+        console.log('InputEvent: ', e);
+        console.log('INPUT');
+
+        console.log('e.data:', e.data);
+        console.log('e.target.value', e.target.value);
+      });
+
+      // InputEvent - input - wird ausgelöst, bei jeder Veränderung (range, input, textarea)
+      $('#input-range').addEventListener('input', (e) => {
+        console.log('=======');
+        console.log('INPUT');
+        console.log('e.target.value', e.target.value);
+      });
+
+      // InputEvent - change - wird ausgelöst, bei jeder Bestätigung (select, checkbox, radio)
+      $('#select-country').addEventListener('change', (e) => {
+        console.log('=======');
+        console.log('CHANGE');
+        console.log('e.target.value', e.target.value);
+      });
+
+      // InputEvent - change - wird ausgelöst, bei jeder Bestätigung (select, checkbox, radio)
+      $('#cb-agb').addEventListener('change', (e) => {
+        console.log('=======');
+        console.log('CHANGE');
+        console.log('e.target.checked', e.target.checked);
+      });
+
+      // FocusEvent - focus - wird ausgelöst, wenn ein Element den "Fokus" erhält
+      $('#input-search').addEventListener('focus', (e) => {
+        console.log('=======');
+        console.log('FocusEvent: ', e);
+        console.log('FOCUS');
+      });
+
+      // FocusEvent - blue - wird ausgelöst, wenn ein Element den "Fokus" verliert
+      $('#input-search').addEventListener('blur', (e) => {
+        console.log('=======');
+        console.log('FocusEvent: ', e);
+        console.log('BLUR');
+      });
+    </script>
+  </body>
+</html>