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.