2026-07-14 14:36:35 +02:00
parent 960451ae4a
commit 3631edde78
39 changed files with 2399 additions and 11 deletions
--- 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>