03_dom/uebungen/u05_tasse-01001/assets/css/styles.css

@@ -0,0 +1,266 @@
+/* -------------------------------------------- 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: .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 {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: .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: .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/u05_tasse-01001/index.html

@@ -0,0 +1,109 @@
+<!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" />
+        <!-- <button type="button">buy</button> -->
+      </form>
+    </main>
+
+    <footer>(C) by ThinkGeek &ndash; Produkttext mit freundlicher Genehmigung von ThinkGeek Inc.</footer>
+
+    <script>
+      'use strict';
+      (() => {
+        // Übung 5: 010010000100111101010100 — Teil 4
+        // Wenden Sie sich nochmal der 010010000100111101010100-Tasse zu. Benutzen Sie geeignete Selektoren, um
+        // 1. alle Bilder zu finden, deren Dateiname auf jpg endet.
+        // 2. alle input-Elemente vom Typ button zu finden, die sich innerhalb von Formularen befinden.
+        // 3. alle Elemente mit der Klasse model zu finden, die ein Attribut data-model haben, das den Wert V7 enthält.
+        // 4. alle Bilder zu finden, die nicht die Klasse float_left enthalten.
+        // 5. alle zweiten Listenpunkte zu finden.
+        // 6. alle Listen (ul) zu finden, die unmittelbar nach "einer Überschrift zweiter Ordnung" (h2) folgen.
+      })();
+    </script>
+  </body>
+</html>