ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
Philippe Torrel
2026-07-14 14:36:35 +02:00
parent 960451ae4a
commit 3631edde78
39 changed files with 2399 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
03_dom/uebungen/u07_content-length/index.html Normal file
View File

@@ -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>