03_dom/agenda.md

@@ -344,11 +344,11 @@ Projektarbeit
 
 **Übungen:**
 
-Übungen 06 - 08
+Übungen 06 - 07
 
 ---
 
-#### Tag 24
+#### Tag 23
 
 **Inhalt:**
 

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.
-
+        $$('p').forEach((elem) => {
-        // 1. Schreibe eine Funktion, die allen p-Elementen die CSS-Klasse gray zuordnet.
+          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>

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.

03_dom/unterricht/tag22/04_chat-lernheft/assets/js/main.js

@@ -2,18 +2,18 @@
 
 {
   const highlightChatMembersBy = (partOfMemberName) => {
-    chatMembers()
+    chatMembers() // 2
-      .filter((member) => doesMemberMatch(partOfMemberName, member))
+      .filter((member) => doesMemberMatch(partOfMemberName, member)) //4
-      .forEach(highlight);
+      .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 chatMembers = () => $$('#chat_members li'); // 3
-  const highlight = (el) => el.classList.add('highlighted');
+  const highlight = (el) => el.classList.add('highlighted'); //7
 
   const $$ = (qs) => Array.from(document.querySelectorAll(qs));
 
-  highlightChatMembersBy('ert');
+  highlightChatMembersBy('ert'); // 1
 }

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;

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) => {
+      $('#input-search').addEventListener('keyup', (e) => {
-      //   console.log('=======');
+        console.log('=======');
-      //   console.log('KeyboardEvent: ', e);
+        console.log('KeyboardEvent: ', e);
 
-      //   console.log('e.target:', e.target);
+        console.log('e.target:', e.target);
-      //   console.log('KEY UP');
+        console.log('KEY UP');
 
-      //   console.log('e.code:', e.code); //spezifischere Angabe
+        console.log('e.code:', e.code); //spezifischere Angabe // QWERTY (Amerikanisches Tastatur-Layout)
-      //   console.log('e.key:', e.key);
+        console.log('e.key:', e.key);
 
-      //   const value = e.target.value;
+        const value = e.target.value;
-      //   console.log('input: ', value);
+        console.log('input: ', value);
-      // });
+      });
 
-      // // KeyboardEvent - keydown- wird ausgelöst, wenn Taste gedrückt (mehrfach).
+      // KeyboardEvent - keydown- wird ausgelöst, wenn Taste gedrückt (mehrfach).
-      // $('#input-search').addEventListener('keydown', (e) => {
+      $('#input-search').addEventListener('keydown', (e) => {
-      //   console.log('=======');
+        console.log('=======');
-      //   console.log('KEY DOWN');
+        console.log('KEY DOWN');
 
-      //   console.log('e.code:', e.code); //spezifischere Angabe
+        console.log('e.code:', e.code); //spezifischere Angabe
-      //   console.log('e.key:', e.key);
+        console.log('e.key:', e.key);
 
-      //   const value = e.target.value;
+        const value = e.target.value;
-      //   console.log('input: ', value);
+        console.log('input: ', value);
-      // });
+      });
 
-      // // KeyboardEvent - keypress - wird ausgelöst, wenn Taste gedrückt (einmalig und später als keydown).
+      // KeyboardEvent - keypress - wird ausgelöst, wenn Taste gedrückt (einmalig und später als keydown).
-      // $('#input-search').addEventListener('keypress', (e) => {
+      $('#input-search').addEventListener('keypress', (e) => {
-      //   console.log('=======');
+        console.log('=======');
-      //   console.log('KEY PRESS');
+        console.log('KEY PRESS');
 
-      //   console.log('e.code:', e.code); //spezifischere Angabe
+        console.log('e.code:', e.code); //spezifischere Angabe
-      //   console.log('e.key:', e.key);
+        console.log('e.key:', e.key);
 
-      //   const value = e.target.value;
+        const value = e.target.value;
-      //   console.log('input: ', 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);

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;
+}

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();
+})();

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>

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>

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>

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>

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>

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());

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());

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());

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());

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(/,+$/,'');;
+}

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.';
+}

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>