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;
+}

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>