2026-07-14 14:36:35 +02:00
parent 960451ae4a
commit 3631edde78
39 changed files with 2399 additions and 11 deletions
--- a/03_dom/uebungen/u01_almost-quotes/index.html
+++ b/03_dom/uebungen/u01_almost-quotes/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
@@ -20,10 +20,17 @@

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

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

+      // Code für die Browser-Konsole:
+
+      document.querySelector('blockquote').innerHTML =
+        '<p>I have always wished for my computer to be as easy to use as my telephone;my wish has come true because I can no longer figure out how to use mytelephone.</p><footer>— <cite>Bjarne Stroustrup</cite></footer>';
+
      // <p>
      //     I have always wished for my computer to be as easy to use as my telephone;
      //     my wish has come true because I can no longer figure out how to use my
--- a/03_dom/uebungen/u02_tasse-01001/index.html
+++ b/03_dom/uebungen/u02_tasse-01001/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
@@ -96,8 +96,17 @@
      (() => {
        // Tippen Sie eine Abfrage in die Konsole, die:
        // 1. das h1-Element findet.
+        const h1El = document.querySelector('h1');
+
        // 2.das Element mit der id buy_form findet.
+        const buyForm = document.querySelector('#buy_form');
+
        // 3. das Element mit der id product_img findet.
+        const productImg = document.querySelector('#product_img');
+
+        console.log(h1El);
+        console.log(buyForm);
+        console.log(productImg);
      })();
    </script>
  </body>
--- a/03_dom/uebungen/u03_tasse-01001/index.html
+++ b/03_dom/uebungen/u03_tasse-01001/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
@@ -94,12 +94,31 @@
    <script>
      'use strict';
      (() => {
+        const $ = (qs) => document.querySelector(qs);
+        const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
        // alle li-Elemente findet.
+        const allLiEl = document.querySelectorAll('li'); // => NodeList(8)
+        const allLiElAr = Array.from(document.querySelectorAll('li'));
+
+        console.log(allLiEl);
+        console.log(allLiElAr);
+        console.log($$('li'));
+
        // alle h2-Elemente findet.
+        console.log(Array.from(document.querySelectorAll('h2'))); // => 2
+
        // alle Elemente mit der Klasse special findet.
+        console.log(Array.from(document.querySelectorAll('.special'))); // => 3
+
        // alle li-Elemente mit der Klasse keyword findet.
+        console.log(Array.from(document.querySelectorAll('li.keyword'))); // => 1
+
        // alle span-Elemente mit der Klasse special findet.
+        console.log(Array.from(document.querySelectorAll('span.special'))); // => 3
+
        // alle Elemente findet, die die Klassen i UND b haben.
+        console.log(Array.from(document.querySelectorAll('.i.b'))); // => 2
      })();
    </script>
  </body>
--- a/03_dom/uebungen/u04_tasse-01001/index.html
+++ b/03_dom/uebungen/u04_tasse-01001/index.html
@@ -96,10 +96,22 @@
      (() => {
        // Übung 4: 010010000100111101010100 — Teil 3
        // Wenden Sie sich nochmal der 010010000100111101010100-Tasse zu. Benutzen Sie geeignete Selektoren, um
+
        // 1. das erste li zu finden, das sich innerhalb der ul mit der id product_specification befindet.
+        const liUlProdSpecEl = document.querySelector('#product_specification li');
+        console.log(liUlProdSpecEl);
+
        // 2. das erste span-Element zu finden, das sich innerhalb des ersten h1-Elements mit der CSS-Klasse article befindet.
+        const spanH1ArticleEL = document.querySelector('h1.article span');
+        console.log(spanH1ArticleEL);
+
        // 3. alle Elemente mit der Klasse keyword innerhalb von p-Elementen zu finden.
+        const keywordPEls = Array.from(document.querySelectorAll('p .keyword'));
+        console.log(keywordPEls);
+
        // 4. alle li-Elemente innerhalb von ul-Elementen zu finden.
+        const liUls = Array.from(document.querySelectorAll('ul li'));
+        console.log(liUls);
      })();
    </script>
  </body>
--- a/03_dom/uebungen/u05_tasse-01001/index.html
+++ b/03_dom/uebungen/u05_tasse-01001/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
@@ -98,11 +98,28 @@
        // Übung 5: 010010000100111101010100 — Teil 4
        // Wenden Sie sich nochmal der 010010000100111101010100-Tasse zu. Benutzen Sie geeignete Selektoren, um
        // 1. alle Bilder zu finden, deren Dateiname auf jpg endet.
+        const jpgImgEls = Array.from(document.querySelectorAll("img[src$='.jpg'], img[src$='.jpeg']"));
+        console.log(jpgImgEls);
+
        // 2. alle input-Elemente vom Typ button zu finden, die sich innerhalb von Formularen befinden.
+        const inpuButtonFormEls = Array.from(document.querySelectorAll('form input[type="button"]'));
+        console.log(inpuButtonFormEls);
+
        // 3. alle Elemente mit der Klasse model zu finden, die ein Attribut data-model haben, das den Wert V7 enthält.
+        const dataModelEls = Array.from(document.querySelectorAll('.model[data-model*="V7"]'));
+        console.log(dataModelEls);
+
        // 4. alle Bilder zu finden, die nicht die Klasse float_left enthalten.
+        const imgNoFloatLeftEls = Array.from(document.querySelectorAll('img:not(.float_left)'));
+        console.log(imgNoFloatLeftEls);
+
        // 5. alle zweiten Listenpunkte zu finden.
+        const allSecondLiEls = Array.from(document.querySelectorAll('li:nth-child(2n)'));
+        console.log(Array.from(allSecondLiEls));
+
        // 6. alle Listen (ul) zu finden, die unmittelbar nach "einer Überschrift zweiter Ordnung" (h2) folgen.
+        const ulH2Els = Array.from(document.querySelectorAll('h2 + ul'));
+        console.log(ulH2Els);
      })();
    </script>
  </body>
--- a/03_dom/uebungen/u06_tasse-01001/assets/css/styles.css
+++ b/03_dom/uebungen/u06_tasse-01001/assets/css/styles.css
@@ -0,0 +1,369 @@
+/* -------------------------------------------- Haupt CSS fuer alle Seiten -------------------------------------------- */
+
+/* ---------------- CSS-Reset ------------------- */
+html,
+body,
+a,
+div,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+span,
+p,
+img,
+strong,
+ul,
+li,
+table,
+th,
+td,
+tr {
+  margin: 0px;
+  padding: 0px;
+  border: 0px none;
+  font-weight: normal;
+  font-style: inherit;
+  font-family: inherit;
+  font-variant: inherit;
+  text-decoration: none;
+  table-layout: inherit;
+}
+
+/* ---------------- Body / HTML ------------------- */
+
+html {
+  font-size: 100%;
+  background-color: #fffef7;
+}
+
+body {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 1.2em;
+  font-weight: normal;
+  color: black;
+  margin: 0rem auto 2rem auto;
+}
+
+/* ---------------- layout ------------------- */
+
+header {
+  background: url(../img/js_header.png) left top no-repeat transparent;
+  background-size: cover;
+  height: 250px;
+  min-width: 850px;
+}
+
+header:after {
+  content: ' ';
+  display: block;
+  height: 250px;
+  background: rgba(255, 254, 247, 0);
+  background: -moz-linear-gradient(
+    top,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  background: -webkit-gradient(
+    left top,
+    left bottom,
+    color-stop(0%, rgba(255, 254, 247, 0)),
+    color-stop(22%, rgba(255, 254, 247, 0.55)),
+    color-stop(42%, rgba(255, 254, 247, 0.7)),
+    color-stop(43%, rgba(255, 254, 247, 0.71)),
+    color-stop(61%, rgba(255, 254, 247, 0.78)),
+    color-stop(75%, rgba(255, 254, 247, 0.92)),
+    color-stop(87%, rgba(255, 254, 247, 1)),
+    color-stop(100%, rgba(255, 254, 247, 1))
+  );
+  background: -webkit-linear-gradient(
+    top,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  background: -o-linear-gradient(
+    top,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  background: -ms-linear-gradient(
+    top,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  background: linear-gradient(
+    to bottom,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
+}
+
+main,
+footer {
+  width: 70%;
+  margin: 3rem auto;
+  min-width: 850px;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+
+/* ---------------- Content ------------------- */
+
+h1 {
+  color: #93412b;
+  font-size: 3em;
+  margin-bottom: 20px;
+  font-weight: bold;
+}
+
+h2 {
+  color: #93412b;
+  font-size: 2.5em;
+  margin-bottom: 15px;
+}
+
+h3 {
+  color: #93412b;
+  font-size: 2em;
+  margin-bottom: 10px;
+}
+
+p {
+  line-height: 15px;
+  margin-bottom: 15px;
+  line-height: 1.7em;
+}
+
+.cited {
+  font-style: italic;
+  font-size: 0.8em;
+}
+
+.u {
+  text-decoration: underline;
+}
+.b {
+  font-weight: bold;
+}
+.i {
+  font-style: italic;
+}
+.align_right {
+  text-align: right;
+}
+.align_left {
+  text-align: left;
+  margin-right: 10px;
+}
+.align_center {
+  text-align: center;
+}
+.float_left {
+  float: left;
+}
+.float_right {
+  float: right;
+}
+.clear_both {
+  clear: both;
+}
+strong {
+  font-weight: bold;
+}
+.special {
+  color: #b7595b;
+  font-weight: bold;
+}
+.keyword {
+  color: #db6f50;
+  font-weight: bold;
+  font-style: italic;
+}
+.gray,
+.grey {
+  color: gray;
+}
+
+/* Links */
+main a:link,
+main a:visited {
+  color: #eb690b;
+  font-weight: bold;
+}
+
+main a:focus,
+main a:hover,
+main a:active {
+  color: #eb690b;
+}
+
+ul {
+  list-style-position: outside;
+  margin-bottom: 20px;
+  padding-left: 22px;
+}
+
+ol {
+  margin-bottom: 20px;
+  padding-left: 30px;
+}
+
+li {
+  line-height: 1.4em;
+}
+
+/* ------- Article ------- */
+
+h1 {
+  color: #93412b;
+  font-size: 2.7em;
+  margin-bottom: 20px;
+}
+
+#buy_form input[type='button'] {
+  display: inline-block;
+  padding: 1px 20px 3px 20px;
+  background-color: #93412b;
+  color: white;
+  border: 1px solid white;
+  font-size: 1em;
+  height: 32px;
+}
+
+#buy_form input[type='button']:hover {
+  background-color: white;
+  color: #93412b;
+  border: 1px solid #93412b;
+}
+
+#buy_form select {
+  display: inline-block;
+  font-size: 1em;
+  background-color: white;
+  color: #93412b;
+  border: 1px solid #93412b;
+  height: 32px;
+}
+
+/* ------- Chat ------- */
+
+#chat {
+  width: 100%;
+  background-color: white;
+  border: 1px solid #9c352f;
+  height: 20rem;
+  position: relative;
+}
+
+#chat_window {
+  background-color: white;
+  width: 85%;
+  float: left;
+  height: 95%;
+}
+
+#chat_history {
+  position: absolute;
+  bottom: 8%;
+  max-height: 92%;
+  padding: 0px 0px 5px 7px;
+}
+
+#chat_history p {
+  font-size: 0.6em;
+  margin: 0;
+}
+
+#chat_text {
+  height: 8%;
+  position: absolute;
+  bottom: 0;
+  width: 85%;
+}
+
+#chat_text input {
+  width: 98%;
+  display: block;
+  margin: auto;
+}
+
+#chat_members {
+  list-style-type: none;
+  height: 100%;
+  width: 15%;
+  margin-left: 85%;
+  border-left: 1px solid #9c352f;
+  text-align: right;
+  box-sizing: border-box;
+  min-width: 100px;
+  font-size: 0.8em;
+  padding-top: 5px;
+}
+
+#chat_members li {
+  line-height: 1.2em;
+  padding: 5px 10px 2px 15px;
+}
+
+#chat_members .highlighted {
+  background-color: #c14d45;
+  color: white;
+}
+.chat_member {
+  font-weight: bold;
+}
+.chat_member1 {
+  color: #3626c8;
+}
+.chat_member2 {
+  color: #e38d0b;
+}
+
+#member_search {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 15%;
+  height: 8%;
+}
+
+#member_search input {
+  width: 88%;
+  display: block;
+  margin: auto;
+  text-align: right;
+}
--- a/03_dom/uebungen/u06_tasse-01001/assets/img/favicon.ico
+++ b/03_dom/uebungen/u06_tasse-01001/assets/img/favicon.ico
--- a/03_dom/uebungen/u06_tasse-01001/assets/img/js_header.png
+++ b/03_dom/uebungen/u06_tasse-01001/assets/img/js_header.png
--- a/03_dom/uebungen/u06_tasse-01001/assets/img/logo.png
+++ b/03_dom/uebungen/u06_tasse-01001/assets/img/logo.png
--- a/03_dom/uebungen/u06_tasse-01001/assets/img/newsboard_empty.png
+++ b/03_dom/uebungen/u06_tasse-01001/assets/img/newsboard_empty.png
--- a/03_dom/uebungen/u06_tasse-01001/assets/img/newsboard_paperclip.png
+++ b/03_dom/uebungen/u06_tasse-01001/assets/img/newsboard_paperclip.png
--- a/03_dom/uebungen/u06_tasse-01001/assets/img/newsboard_sheets.png
+++ b/03_dom/uebungen/u06_tasse-01001/assets/img/newsboard_sheets.png
--- a/03_dom/uebungen/u06_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif
+++ b/03_dom/uebungen/u06_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif
--- a/03_dom/uebungen/u06_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg
+++ b/03_dom/uebungen/u06_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg
--- a/03_dom/uebungen/u06_tasse-01001/index.html
+++ b/03_dom/uebungen/u06_tasse-01001/index.html
@@ -0,0 +1,115 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+
+    <title>010010000100111101010100</title>
+    <meta name="description" content="JavaScript. HTML mühelos manipuliert" />
+
+    <link rel="stylesheet" href="assets/css/styles.css" type="text/css" media="screen" />
+    <link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon" />
+  </head>
+
+  <body>
+    <header></header>
+
+    <main>
+      <h1 class="article">
+        Hot Binary Heat Changing Mug
+        <span class="keyword">"010010000100111101010100"</span>
+      </h1>
+
+      <img
+        alt="Hot Binary Heat Changing Mug"
+        src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif"
+        class="float_left"
+        id="product_img" />
+
+      <h2>Description</h2>
+
+      <p>
+        Numbers make up
+        <span class="special">everything</span> in our digital world. They flow around us, invisible like the Force or
+        the Matrix, controlling all our many computer-y devices. Two numbers, in particular:
+        <span class="special">0 and 1</span>. <span class="b i">Off and On</span>. Well, we can tell you this: when
+        there's no coffee in our cup, we're completely OFF our game. But when our mug is full of hot coffee, we're
+        totally ON. And now, with the <span class="keyword">Hot Binary Heat Changing Mug</span>, there's a mug that
+        tells us which state our mug is in. In binary!
+      </p>
+
+      <p>
+        See, the
+        <span class="keyword">Hot Binary Heat Changing Mug</span>
+        looks like just a dark mug with binary numbers all over it. That's its OFF or cold state. Add hot coffee (or any
+        liquid) and a series of digits will turn white. Read them continuously from left to right, and you'll read:
+        <span class="keyword">010010000100111101010100</span>. That's <span class="special">in binary</span>. Of course,
+        your
+        <span class="keyword">Hot Binary Heat Changing Mug</span>
+        could just be paying you a compliment. Cheeky, mug.
+      </p>
+
+      <p>
+        <img alt="010010000100111101010100" src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg" />
+      </p>
+
+      <h2>Product Specifications</h2>
+
+      <ul id="product_specification">
+        <li class="keyword">Hot Binary Heat Changing Mug</li>
+        <li>
+          As you add hot liquids, the binary for "HOT" appears (read from left to right in one line, not two:
+          010010000100111101010100)
+        </li>
+        <li>A <span class="keyword">ThinkGeek</span> creation and exclusive!</li>
+        <li>
+          Care Instructions:
+          <span class="i b">Hand wash only. Not microwave or dishwasher safe.</span>
+        </li>
+        <li>Materials: Ceramic</li>
+        <li>Dimensions: approx. 3.15" diameter x 3.75" tall</li>
+      </ul>
+
+      <h3>You wanna buy it?</h3>
+
+      <p class="buy_info_text">If you like to buy this brilliant mug, just do the following steps:</p>
+
+      <ol class="model" data-model="LDV73C-X3">
+        <li>Select how many items do you want.</li>
+        <li>Press "buy".</li>
+      </ol>
+
+      <form id="buy_form">
+        <select>
+          <option>1 item</option>
+          <option>2 items</option>
+          <option>3 items</option>
+          <option>4 items</option>
+        </select>
+        <input type="button" value="buy" />
+      </form>
+    </main>
+
+    <footer>(C) by ThinkGeek &ndash; Produkttext mit freundlicher Genehmigung von ThinkGeek Inc.</footer>
+
+    <script>
+      'use strict';
+      {
+        const $ = (qs) => document.querySelector(qs);
+        const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+        // Übung 6: — Teil 5
+        // Widmen wir uns einmal mehr der Artikelseite der 010010000100111101010100-Tasse.
+
+        // Es besteht der Wunsch, den Text teilweise in grauer Schriftfarbe darzustellen.
+
+        // 1. Schreibe eine Funktion, die allen p-Elementen die CSS-Klasse gray zuordnet.
+
+        // 1. Schreibe eine Funktion, die allen p-Elementen die CSS-Klasse gray zuordnet.
+
+        // 2. Eine Ausnahme soll nur der Fließtext darstellen, der den Kaufvorgang enthält. Die p-Elemente mit der Klasse buy_info_text sollen dementsprechend von dem Vorgang ausgeschlossen werden.
+
+        // 3. Weise nun allen Listenpunkten, die noch keine andere Klasse haben, die Klasse gray zu.
+      }
+    </script>
+  </body>
+</html>
--- a/03_dom/uebungen/u07_content-length/assets/css/main.css
+++ b/03_dom/uebungen/u07_content-length/assets/css/main.css
@@ -0,0 +1,38 @@
+*,
+html {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  font-family: 'Helvetica', 'Arial', sans-serif;
+  color: #444;
+  font-weight: normal;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  padding: 0.5em;
+}
+
+.coffee_break_article {
+  background-color: BurlyWood;
+}
+
+.normal_length_article {
+  background-color: #cafe69;
+}
+
+.lone_weekend_article {
+  background-color: DarkTurquoise;
+}
+
+.container {
+  margin: 0 auto;
+  padding: 1rem;
+  max-width: 1140px;
+}
--- a/03_dom/uebungen/u07_content-length/index.html
+++ b/03_dom/uebungen/u07_content-length/index.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Article Detail Page</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="assets/css/main.css" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>Lorem ipsum</h1>
+        <section id="content">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+            ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+            anim id est laborum.
+          </p>
+
+          <p>...</p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+            ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+            anim id est laborum.
+          </p>
+        </section>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // Übung 7: Länge von Artikeln
+      // Einer deiner Kunden wendet sich mit folgendem Wunsch an dich:
+
+      // Leider sind viele unserer Besucher eher kurz angebunden. Im Forum haben sich nun einige gewünscht, dass die Länge des Artikels schon aus der Überschrift (h1) klar hervorgeht. Unser Designer hat sich deswegen drei Stile für Überschriften überlegt und diese auch als entsprechende CSS-Klassen hinterlegt.
+
+      // Miss die Länge eines Artikels in Zeichen und gib den Überschriften automatisch die richtige Klasse.
+
+      // - coffee_break_article bis 3000 Zeichen
+      // - normal_length_article bis 9000 Zeichen
+      // - lone_weekend_article ab 9000 Zeichen
+
+      // Es geht um die Detailseiten der Artikel. Gehe davon aus, dass jede dieser Seiten nur genau eine h1-Überschrift hat und der komplette Artikel, inklusive Bildern und HTML-Struktur, sich in einem Element mit der ID content befindet.
+
+      // Für das Zählen der Zeichen darfst du den kompletten HTML-Code von content auswerten. Es geht nur darum, eine grobe Abschätzung zu bekommen.
+
+      // Durch Duplizieren oder Löschen von Lorem-Ipsum-Absätzen kannst du unterschiedliche Textlängen einfach testen.
+    </script>
+  </body>
+</html>
--- a/03_dom/uebungen/uebungen-6-7.zip
+++ b/03_dom/uebungen/uebungen-6-7.zip