This commit is contained in:
Philippe Torrel
@@ -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;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 316 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
@@ -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 – 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>
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
Binary file not shown.
Reference in New Issue
Block a user