03_js-dom/uebungen/u06_tasse-01001/index.html

@@ -102,14 +102,29 @@
 
         // 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.
+        const makeTextGray = () => {
+            // 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.
 
-        // 1. Schreibe eine Funktion, die allen p-Elementen die CSS-Klasse gray zuordnet.
+          $$('p:not(.buy_info_text)').forEach((paragraph) => {
+            paragraph.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.
+           // 3. Weise nun allen Listenpunkten, die noch keine andere Klasse haben, die Klasse gray zu.
+          $$('li').forEach((listItem) => {
+            if (listItem.classList.length === 0) {
+              listItem.classList.add('gray');
+            }
+          });
 
-        // 3. Weise nun allen Listenpunkten, die noch keine andere Klasse haben, die Klasse gray zu.
+          // $$('li:not([class])').forEach((li) => li.classList.add('gray')); // NICHT SAVE - Element kann "class" Attribut besitzen ohne Klassenzuweisung.
+
+        }
+
+        makeTextGray();
       }
     </script>
+    </script>
   </body>
 </html>

03_js-dom/uebungen/u07_content-length/index.html

@@ -50,6 +50,26 @@
       // 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.
+
+      const setHeadlineClass = () => {
+        const headlineEl = document.querySelector('h1');
+        const contentEl = document.querySelector('#content');
+        const l = contentEl.textContent.length;
+        console.log('Length: ' + l);
+        switch (true) {
+          case l <= 3000:
+            headlineEl.classList.add('coffee_break_article');
+            break;
+          case l > 3000 && l <= 9000:
+            headlineEl.classList.add('normal_length_article');
+            break;
+          default:
+            headlineEl.classList.add('lone_weekend_article');
+            break;
+        }
+      };
+
+      setHeadlineClass();
     </script>
   </body>
 </html>