diff --git a/03_dom/agenda.md b/03_dom/agenda.md
index 4d0058e..3f1d6a6 100644
--- a/03_dom/agenda.md
+++ b/03_dom/agenda.md
@@ -344,11 +344,11 @@ Projektarbeit
 
 **Übungen:**
 
-Übungen 06 - 08
+Übungen 06 - 07
 
 ---
 
-#### Tag 24
+#### Tag 23
 
 **Inhalt:**
 
diff --git a/03_dom/uebungen/u06_tasse-01001/index.html b/03_dom/uebungen/u06_tasse-01001/index.html
index e92dee4..f3adfb6 100644
--- a/03_dom/uebungen/u06_tasse-01001/index.html
+++ b/03_dom/uebungen/u06_tasse-01001/index.html
@@ -103,12 +103,30 @@
         // 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.
+        $$('p').forEach((elem) => {
+          if (elem.classList.contains('buy_info_text')) return;
+          elem.classList.add('gray');
+        });
 
         // 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.
+        $$('p.buy_info_text').forEach((elem) => {
+          elem.classList.remove('gray');
+        });
+
+        $$('p:not(.buy_info_text)').forEach((elem) => {
+          elem.classList.add('gray');
+        });
 
         // 3. Weise nun allen Listenpunkten, die noch keine andere Klasse haben, die Klasse gray zu.
+        $$('li:not([class])').forEach((elem) => {
+          elem.classList.add('gray');
+        });
+
+        $$('li').forEach((elem) => {
+          if (elem.classList.length === 0) {
+            elem.classList.add('gray');
+          }
+        });
       }
     </script>
   </body>
diff --git a/03_dom/uebungen/u07_content-length/index.html b/03_dom/uebungen/u07_content-length/index.html
index 038e29c..eea3a24 100644
--- a/03_dom/uebungen/u07_content-length/index.html
+++ b/03_dom/uebungen/u07_content-length/index.html
@@ -34,7 +34,28 @@
     <script>
       'use strict';
 
+      const $ = (qs) => document.querySelector(qs);
+      const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+      // ermitteln der Artikel Länge
+      const articleLength = $('#content').textContent.length;
+      console.log(articleLength);
+
+      // Funktion, um zu evaluieren welche klasse basierend auf der Artikellänge zugewiesne werden soll - Rückgabe String mit dem passenden Klassennamen
+      const addArticleLengthCssClass = (articleLength) => {
+        if (articleLength <= 3000) {
+          return 'coffee_break_article';
+        } else if (articleLength <= 9000) {
+          return 'normal_length_article';
+        } else {
+          return 'lone_weekend_article';
+        }
+      };
+
+      $('h1').classList.add(addArticleLengthCssClass(articleLength));
+
       // Ü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.
diff --git a/03_dom/unterricht/tag22/04_chat-lernheft/assets/js/main.js b/03_dom/unterricht/tag22/04_chat-lernheft/assets/js/main.js
index 4871b12..b5232d3 100644
--- a/03_dom/unterricht/tag22/04_chat-lernheft/assets/js/main.js
+++ b/03_dom/unterricht/tag22/04_chat-lernheft/assets/js/main.js
@@ -2,18 +2,18 @@
 
 {
   const highlightChatMembersBy = (partOfMemberName) => {
-    chatMembers()
-      .filter((member) => doesMemberMatch(partOfMemberName, member))
-      .forEach(highlight);
+    chatMembers() // 2
+      .filter((member) => doesMemberMatch(partOfMemberName, member)) //4
+      .forEach(highlight); // 6
   };
 
   const doesMemberMatch = (partOfMemberName, member) =>
-    member.innerHTML.toLowerCase().includes(partOfMemberName.toLowerCase());
+    member.innerHTML.toLowerCase().includes(partOfMemberName.toLowerCase()); // 5
 
-  const chatMembers = () => $$('#chat_members li');
-  const highlight = (el) => el.classList.add('highlighted');
+  const chatMembers = () => $$('#chat_members li'); // 3
+  const highlight = (el) => el.classList.add('highlighted'); //7
 
   const $$ = (qs) => Array.from(document.querySelectorAll(qs));
 
-  highlightChatMembersBy('ert');
+  highlightChatMembersBy('ert'); // 1
 }
diff --git a/03_dom/unterricht/tag22/06_event-mouse/index.html b/03_dom/unterricht/tag22/06_event-mouse/index.html
index 67fb145..f2a8a8a 100644
--- a/03_dom/unterricht/tag22/06_event-mouse/index.html
+++ b/03_dom/unterricht/tag22/06_event-mouse/index.html
@@ -21,6 +21,7 @@
       }
 
       .content-box {
+        cursor: none !important;
         width: 600px;
         height: 250px;
         border: 5px solid #ccc;
diff --git a/03_dom/unterricht/tag22/07_event-keyboard/index.html b/03_dom/unterricht/tag22/07_event-keyboard/index.html
index 4ec465f..2486ade 100644
--- a/03_dom/unterricht/tag22/07_event-keyboard/index.html
+++ b/03_dom/unterricht/tag22/07_event-keyboard/index.html
@@ -58,43 +58,43 @@
       // KeyboardEvent ============================
 
       // KeyboardEvent - keyup - wird ausgelöst, wenn Taste logelassen wird.
-      // $('#input-search').addEventListener('keyup', (e) => {
-      //   console.log('=======');
-      //   console.log('KeyboardEvent: ', e);
+      $('#input-search').addEventListener('keyup', (e) => {
+        console.log('=======');
+        console.log('KeyboardEvent: ', e);
 
-      //   console.log('e.target:', e.target);
-      //   console.log('KEY UP');
+        console.log('e.target:', e.target);
+        console.log('KEY UP');
 
-      //   console.log('e.code:', e.code); //spezifischere Angabe
-      //   console.log('e.key:', e.key);
+        console.log('e.code:', e.code); //spezifischere Angabe // QWERTY (Amerikanisches Tastatur-Layout)
+        console.log('e.key:', e.key);
 
-      //   const value = e.target.value;
-      //   console.log('input: ', value);
-      // });
+        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');
+      // 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);
+        console.log('e.code:', e.code); //spezifischere Angabe
+        console.log('e.key:', e.key);
 
-      //   const value = e.target.value;
-      //   console.log('input: ', value);
-      // });
+        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');
+      // 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);
+        console.log('e.code:', e.code); //spezifischere Angabe
+        console.log('e.key:', e.key);
 
-      //   const value = e.target.value;
-      //   console.log('input: ', value);
-      // });
+        const value = e.target.value;
+        console.log('input: ', value);
+      });
 
       // InputEvent =============================
       $('#input-search').addEventListener('input', (e) => {
@@ -134,7 +134,7 @@
         console.log('FOCUS');
       });
 
-      // FocusEvent - blue - wird ausgelöst, wenn ein Element den "Fokus" verliert
+      // FocusEvent - blur - wird ausgelöst, wenn ein Element den "Fokus" verliert
       $('#input-search').addEventListener('blur', (e) => {
         console.log('=======');
         console.log('FocusEvent: ', e);
diff --git a/03_dom/unterricht/tag23/01_chat-final/assets/css/styles.css b/03_dom/unterricht/tag23/01_chat-final/assets/css/styles.css
new file mode 100644
index 0000000..d904e6a
--- /dev/null
+++ b/03_dom/unterricht/tag23/01_chat-final/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;
+}
diff --git a/03_dom/unterricht/tag23/01_chat-final/assets/img/favicon.icon b/03_dom/unterricht/tag23/01_chat-final/assets/img/favicon.icon
new file mode 100644
index 0000000..bd2cd28
Binary files /dev/null and b/03_dom/unterricht/tag23/01_chat-final/assets/img/favicon.icon differ
diff --git a/03_dom/unterricht/tag23/01_chat-final/assets/img/js_header.png b/03_dom/unterricht/tag23/01_chat-final/assets/img/js_header.png
new file mode 100644
index 0000000..4d14ceb
Binary files /dev/null and b/03_dom/unterricht/tag23/01_chat-final/assets/img/js_header.png differ
diff --git a/03_dom/unterricht/tag23/01_chat-final/assets/js/main.js b/03_dom/unterricht/tag23/01_chat-final/assets/js/main.js
new file mode 100644
index 0000000..ce93bac
--- /dev/null
+++ b/03_dom/unterricht/tag23/01_chat-final/assets/js/main.js
@@ -0,0 +1,43 @@
+'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')),
+    inputSearch: module.querySelector('#member_search input'),
+  };
+
+  console.log(DOM);
+
+  // === INIT =============
+  const init = () => {
+    // Funktionsaufrufe zu beginn der Anwendung
+    // highlightListItemBy('ert');
+    // Eventhandler zu beginn der Anwendung
+    DOM.inputSearch.addEventListener('input', onInputSearch);
+  };
+
+  // === EVENTHANDLER =====
+  const onInputSearch = (e) => {
+    const value = e.target.value; // aktuelle Eingabe von input
+    highlightListItemBy(value);
+  };
+
+  // === XHR/FETCH ========
+
+  // === FUNCTIONS ========
+  const highlightListItemBy = (searchValue = '') => {
+    DOM.listItems.forEach((el) => {
+      el.classList.remove('highlighted');
+      const text = el.textContent.trim().toLowerCase();
+      if (searchValue !== '' && text.includes(searchValue.trim().toLowerCase())) {
+        el.classList.add('highlighted');
+      }
+    });
+  };
+
+  init();
+})();
diff --git a/03_dom/unterricht/tag23/01_chat-final/index.html b/03_dom/unterricht/tag23/01_chat-final/index.html
new file mode 100644
index 0000000..00d705e
--- /dev/null
+++ b/03_dom/unterricht/tag23/01_chat-final/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>
diff --git a/03_dom/unterricht/tag23/02_defer-examples/01_example_defer.html b/03_dom/unterricht/tag23/02_defer-examples/01_example_defer.html
new file mode 100644
index 0000000..10247ec
--- /dev/null
+++ b/03_dom/unterricht/tag23/02_defer-examples/01_example_defer.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>01 Example Defer</title>
+    <script src="assets/js/helper.js"></script>
+
+    <script src="assets/js/file01.js"></script>
+    <script src="assets/js/file02.js"></script>
+    <script src="assets/js/file03.js" defer></script>
+    <script src="assets/js/file04.js" defer></script>
+  </head>
+
+  <body>
+    <script>
+      'use strict';
+
+      console.log('File intern: ');
+
+      const i = 'i';
+
+      console.log(output());
+    </script>
+  </body>
+</html>
diff --git a/03_dom/unterricht/tag23/02_defer-examples/02_example_defer.html b/03_dom/unterricht/tag23/02_defer-examples/02_example_defer.html
new file mode 100644
index 0000000..e9e57a4
--- /dev/null
+++ b/03_dom/unterricht/tag23/02_defer-examples/02_example_defer.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>02 Example Defer</title>
+    <script src="assets/js/helper.js"></script>
+
+    <script src="assets/js/file02.js" defer="defer"></script>
+    <script src="assets/js/file01.js" defer></script>
+  </head>
+
+  <body>
+    <script src="assets/js/file04.js"></script>
+    <script src="assets/js/file03.js" defer="defer"></script>
+
+    <script>
+      'use strict';
+
+      console.log('File intern');
+      const i = 'i';
+
+      console.log(output());
+    </script>
+  </body>
+</html>
diff --git a/03_dom/unterricht/tag23/02_defer-examples/03_example_defer.html b/03_dom/unterricht/tag23/02_defer-examples/03_example_defer.html
new file mode 100644
index 0000000..46de993
--- /dev/null
+++ b/03_dom/unterricht/tag23/02_defer-examples/03_example_defer.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>03 Example Defer</title>
+    <script src="assets/js/helper.js"></script>
+
+    <script src="assets/js/file03.js" defer></script>
+    <script src="assets/js/file04.js" defer></script>
+  </head>
+
+  <body>
+    <script>
+      'use strict';
+
+      console.log('File intern');
+      const i = 'i';
+
+      console.log(output());
+    </script>
+    <script src="assets/js/file01.js"></script>
+    <script src="assets/js/file02.js"></script>
+  </body>
+</html>
diff --git a/03_dom/unterricht/tag23/02_defer-examples/04_dom-laden.html b/03_dom/unterricht/tag23/02_defer-examples/04_dom-laden.html
new file mode 100644
index 0000000..8863249
--- /dev/null
+++ b/03_dom/unterricht/tag23/02_defer-examples/04_dom-laden.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DOM Laden - Event DOMContentLoaded</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <script>
+      document.addEventListener('DOMContentLoaded', (e) => {
+        console.log(document.querySelector('h1'));
+
+        document.querySelector('h1').textContent = 'Hello World';
+      });
+    </script>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>DOM Laden - Event DOMContentLoaded</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+    </script>
+  </body>
+</html>
diff --git a/03_dom/unterricht/tag23/02_defer-examples/assets/js/file01.js b/03_dom/unterricht/tag23/02_defer-examples/assets/js/file01.js
new file mode 100644
index 0000000..ffde053
--- /dev/null
+++ b/03_dom/unterricht/tag23/02_defer-examples/assets/js/file01.js
@@ -0,0 +1,7 @@
+'use strict';
+
+console.log('File 01: ');
+
+const a = 'a';
+
+console.log(output());
diff --git a/03_dom/unterricht/tag23/02_defer-examples/assets/js/file02.js b/03_dom/unterricht/tag23/02_defer-examples/assets/js/file02.js
new file mode 100644
index 0000000..28b3deb
--- /dev/null
+++ b/03_dom/unterricht/tag23/02_defer-examples/assets/js/file02.js
@@ -0,0 +1,7 @@
+"use strict";
+
+console.log('File 02: ');
+
+const b = 'b';
+
+console.log(output());
\ No newline at end of file
diff --git a/03_dom/unterricht/tag23/02_defer-examples/assets/js/file03.js b/03_dom/unterricht/tag23/02_defer-examples/assets/js/file03.js
new file mode 100644
index 0000000..427161f
--- /dev/null
+++ b/03_dom/unterricht/tag23/02_defer-examples/assets/js/file03.js
@@ -0,0 +1,7 @@
+"use strict";
+
+console.log('File 03: ');
+
+const c = 'c';
+
+console.log(output());
\ No newline at end of file
diff --git a/03_dom/unterricht/tag23/02_defer-examples/assets/js/file04.js b/03_dom/unterricht/tag23/02_defer-examples/assets/js/file04.js
new file mode 100644
index 0000000..b07391c
--- /dev/null
+++ b/03_dom/unterricht/tag23/02_defer-examples/assets/js/file04.js
@@ -0,0 +1,7 @@
+"use strict";
+
+console.log('File 04: ');
+
+const d = 'd';
+
+console.log(output());
\ No newline at end of file
diff --git a/03_dom/unterricht/tag23/02_defer-examples/assets/js/helper.js b/03_dom/unterricht/tag23/02_defer-examples/assets/js/helper.js
new file mode 100644
index 0000000..8be183f
--- /dev/null
+++ b/03_dom/unterricht/tag23/02_defer-examples/assets/js/helper.js
@@ -0,0 +1,22 @@
+const output = () => {
+  let outputText = '\t';
+  try{
+    outputText += a + ',';
+  } catch(err) {}
+  try{
+    outputText += b + ',';
+  } catch(err) {}
+    try{
+    outputText += c + ',';
+  } catch(err) {}
+    try{
+    outputText += d + ',';
+  } catch(err) {}
+    try{
+    outputText += e + ',';
+  } catch(err) {}
+    try{
+    outputText += i + ',';
+  } catch(err) {}
+  return outputText.replace(/,+$/,'');;
+}
\ No newline at end of file
diff --git a/03_dom/unterricht/tag23/03_newsboard-lernheft/assets/css/main.css b/03_dom/unterricht/tag23/03_newsboard-lernheft/assets/css/main.css
new file mode 100644
index 0000000..58fcd5a
--- /dev/null
+++ b/03_dom/unterricht/tag23/03_newsboard-lernheft/assets/css/main.css
@@ -0,0 +1,227 @@
+* {
+  margin: 0;
+}
+html {
+  font-size: 100%;
+  padding: 0;
+  background-attachment: fixed;
+  background-image: -webkit-linear-gradient(top, #eef0f2, #d3d5d9);
+  background-image: -moz-linear-gradient(top, #eef0f2, #d3d5d9);
+  background-image: linear-gradient(to bottom, #eef0f2, #d3d5d9);
+}
+body {
+  color: #333;
+  font-size: 1em;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  text-align: left;
+  margin: 1em;
+  padding: 0;
+}
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-bottom: 1rem;
+}
+p {
+  line-height: 1.5em;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  hyphens: auto;
+}
+p:last-child {
+  margin-bottom: 0;
+}
+a {
+  color: #2f83e8;
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+strong,
+b {
+  font-weight: bold;
+}
+em,
+i {
+  font-style: italic;
+}
+.float_left {
+  float: left;
+}
+.float_right {
+  float: right;
+}
+.disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.message_number {
+  color: #fff;
+  font-size: 0.8em;
+  font-weight: bold;
+  text-align: center;
+  line-height: 1em;
+  position: absolute;
+  top: -0.5em;
+  left: -0.5em;
+  display: block;
+  padding-top: 0.3em;
+  min-width: 2em;
+  height: 2em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  cursor: default;
+  background-color: #ea2314;
+  background-image: -webkit-linear-gradient(top, #f78f91, #c50404);
+  background-image: -moz-linear-gradient(top, #f78f91, #c50404);
+  background-image: linear-gradient(to bottom, #f78f91, #c50404);
+  border: 2px solid #fff;
+  -webkit-border-radius: 1em;
+  -moz-border-radius: 1em;
+  border-radius: 1em;
+  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
+}
+.newsboard_wrapper {
+  margin: 0 auto 2em auto;
+  padding: 13px 0 0 17px;
+  max-width: 550px;
+  position: relative;
+  background: url('../img/sheets.png') no-repeat;
+}
+.newsboard_wrapper:before {
+  content: url('../img/paperclip.png');
+  position: absolute;
+  top: 5px;
+  right: 35px;
+  z-index: 1;
+}
+.newsboard_wrapper .newsboard {
+  padding: 29px 1.25rem 4rem 1.25rem;
+  min-height: 20em;
+  position: relative;
+  border: 1px solid #ccc;
+  background-color: #fff;
+  background-image: -webkit-linear-gradient(#dddddd, #ffffff 1px);
+  background-image: -moz-linear-gradient(#dddddd, #ffffff 1px);
+  background-image: linear-gradient(#dddddd, #ffffff 1px);
+  background-position: 0 1.3em;
+  -webkit-background-size: 100% 1.5em;
+  -moz-background-size: 100% 1.5em;
+  background-size: 100% 1.5em;
+  -webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
+}
+.newsboard_wrapper .newsboard .close_button {
+  color: #777;
+  font-size: 1.2em;
+  text-decoration: none;
+  line-height: 1em;
+  position: absolute;
+  top: 10px;
+  right: 14px;
+  display: block;
+}
+.newsboard_wrapper .newsboard .close_button:hover {
+  color: #444;
+}
+.newsboard_wrapper .newsboard .newsboard_footer {
+  color: #999;
+  font-size: 0.8em;
+}
+.newsboard_wrapper .newsboard .paging_bar {
+  font-size: 1.8em;
+  padding: 0 1.25rem;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 1rem;
+  white-space: nowrap;
+}
+.newsboard_wrapper .newsboard .paging_bar .float_left a,
+.newsboard_wrapper .newsboard .paging_bar .float_right a {
+  color: #777;
+  text-decoration: none;
+}
+.newsboard_wrapper .newsboard .paging_bar .float_left a {
+  margin-right: 0.3em;
+}
+.newsboard_wrapper .newsboard .paging_bar .float_right a {
+  margin-left: 0.3em;
+}
+.newsboard_wrapper .newsboard .paging_bar .progressbar {
+  display: block;
+  width: 40%;
+  margin: 0 auto;
+}
+.newsboard_wrapper .newsboard .paging_bar progress {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  vertical-align: 0;
+  line-height: normal;
+  color: #2f83e8;
+  width: 100%;
+  height: 0.6rem;
+  border-style: none;
+  padding: 0;
+  background-color: #eee;
+  -webkit-border-radius: 0.3rem;
+  -moz-border-radius: 0.3rem;
+  border-radius: 0.3rem;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
+  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
+}
+.newsboard_wrapper .newsboard .paging_bar progress::-webkit-progress-bar {
+  padding: 0;
+  border-style: none;
+  background-color: transparent;
+}
+.newsboard_wrapper .newsboard .paging_bar progress::-webkit-progress-value {
+  -webkit-border-radius: 0.3rem;
+  border-radius: 0.3rem;
+  background-color: #2f83e8;
+  background-image: -webkit-linear-gradient(top, #8bbaf2, #176acd);
+  background-image: linear-gradient(to bottom, #8bbaf2, #176acd);
+}
+.newsboard_wrapper .newsboard .paging_bar progress::-moz-progress-bar {
+  -moz-border-radius: 0.3rem;
+  border-radius: 0.3rem;
+  background-color: #2f83e8;
+  background-image: -moz-linear-gradient(top, #8bbaf2, #176acd);
+  background-image: linear-gradient(to bottom, #8bbaf2, #176acd);
+}
+.newsboard_wrapper .newsboard .newsboard_content h1,
+.newsboard_wrapper .newsboard .newsboard_content h2 {
+  font-weight: normal;
+  font-family:
+    'Helvetica Neue Light', 'HelveticaNeue-Light', 'Helvetica Light', 'Helvetica-Light', Helvetica, Arial, sans-serif;
+  letter-spacing: 0.03em;
+}
+.newsboard_wrapper .newsboard .newsboard_content h1 {
+  font-size: 1.75em;
+}
+.newsboard_wrapper .newsboard .newsboard_content h2 {
+  color: #2f83e8;
+  font-size: 1.2em;
+  line-height: 1.4em;
+}
+.newsboard_wrapper .newsboard .newsboard_content:empty {
+  color: #999;
+  font-size: 1.15em;
+  text-align: center;
+  padding-top: 10.5rem;
+  background: url('../img/empty.png') no-repeat center 3.75rem;
+}
+.newsboard_wrapper .newsboard .newsboard_content:empty:after {
+  content: 'Keine neuen Mitteilungen.';
+}
diff --git a/03_dom/unterricht/tag23/03_newsboard-lernheft/assets/img/empty.png b/03_dom/unterricht/tag23/03_newsboard-lernheft/assets/img/empty.png
new file mode 100644
index 0000000..d650b1b
Binary files /dev/null and b/03_dom/unterricht/tag23/03_newsboard-lernheft/assets/img/empty.png differ
diff --git a/03_dom/unterricht/tag23/03_newsboard-lernheft/assets/img/paperclip.png b/03_dom/unterricht/tag23/03_newsboard-lernheft/assets/img/paperclip.png
new file mode 100644
index 0000000..7f24721
Binary files /dev/null and b/03_dom/unterricht/tag23/03_newsboard-lernheft/assets/img/paperclip.png differ
diff --git a/03_dom/unterricht/tag23/03_newsboard-lernheft/assets/img/sheets.png b/03_dom/unterricht/tag23/03_newsboard-lernheft/assets/img/sheets.png
new file mode 100644
index 0000000..14680cb
Binary files /dev/null and b/03_dom/unterricht/tag23/03_newsboard-lernheft/assets/img/sheets.png differ
diff --git a/03_dom/unterricht/tag23/03_newsboard-lernheft/assets/js/main.js b/03_dom/unterricht/tag23/03_newsboard-lernheft/assets/js/main.js
new file mode 100644
index 0000000..e69de29
diff --git a/03_dom/unterricht/tag23/03_newsboard-lernheft/index.html b/03_dom/unterricht/tag23/03_newsboard-lernheft/index.html
new file mode 100644
index 0000000..be24e1e
--- /dev/null
+++ b/03_dom/unterricht/tag23/03_newsboard-lernheft/index.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+
+    <title>Newsboard</title>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" type="text/css" href="assets/css/main.css" />
+    <script src="assets/js/main.js" defer></script>
+  </head>
+
+  <body>
+    <div class="newsboard_wrapper">
+      <div class="newsboard">
+        <span class="message_number">3</span>
+
+        <a href="#" class="close_button" title="Delete message">&times;</a>
+
+        <div class="newsboard_content"></div>
+
+        <div class="paging_bar">
+          <span class="float_left">
+            <a href="#" title="first">«</a>
+            <a href="http://example.com" title="prev">‹</a>
+          </span>
+
+          <span class="float_right">
+            <a href="http://example.com" title="next">›</a>
+            <a href="#" title="last">»</a>
+          </span>
+
+          <span class="progressbar">
+            <progress max="3" value="1" id="messages_progress"></progress>
+          </span>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>