added exercises
This commit is contained in:
Philippe Torrel
369
03_dom/uebungen/u15_tasse-01001/assets/css/styles.css
Normal file
369
03_dom/uebungen/u15_tasse-01001/assets/css/styles.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
BIN
03_dom/uebungen/u15_tasse-01001/assets/img/favicon.ico
Normal file
BIN
03_dom/uebungen/u15_tasse-01001/assets/img/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 316 B |
BIN
03_dom/uebungen/u15_tasse-01001/assets/img/js_header.png
Normal file
BIN
03_dom/uebungen/u15_tasse-01001/assets/img/js_header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
03_dom/uebungen/u15_tasse-01001/assets/img/logo.png
Normal file
BIN
03_dom/uebungen/u15_tasse-01001/assets/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
BIN
03_dom/uebungen/u15_tasse-01001/assets/img/newsboard_empty.png
Normal file
BIN
03_dom/uebungen/u15_tasse-01001/assets/img/newsboard_empty.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
03_dom/uebungen/u15_tasse-01001/assets/img/newsboard_sheets.png
Normal file
BIN
03_dom/uebungen/u15_tasse-01001/assets/img/newsboard_sheets.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
110
03_dom/uebungen/u15_tasse-01001/index.html
Normal file
110
03_dom/uebungen/u15_tasse-01001/index.html
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
<!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 15: — Teil 7
|
||||||
|
// Verändere die Produktseite der Binär-Tasse mithilfe von JavaScript. Du kannst wieder die JS-Konsole verwenden.
|
||||||
|
|
||||||
|
// 1. Füge in der Liste der Product Specifications mithilfe von JavaScript folgenden Listenpunkt hinzu:
|
||||||
|
// Capacity: 11 oz.
|
||||||
|
|
||||||
|
// 2. Erweitere die Select-Box neben dem buy-Button mithilfe von JavaScript um den Eintrag: 5 items.
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
369
03_dom/uebungen/u16_tasse-01001/assets/css/styles.css
Normal file
369
03_dom/uebungen/u16_tasse-01001/assets/css/styles.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
BIN
03_dom/uebungen/u16_tasse-01001/assets/img/favicon.ico
Normal file
BIN
03_dom/uebungen/u16_tasse-01001/assets/img/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 316 B |
BIN
03_dom/uebungen/u16_tasse-01001/assets/img/js_header.png
Normal file
BIN
03_dom/uebungen/u16_tasse-01001/assets/img/js_header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
03_dom/uebungen/u16_tasse-01001/assets/img/logo.png
Normal file
BIN
03_dom/uebungen/u16_tasse-01001/assets/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
BIN
03_dom/uebungen/u16_tasse-01001/assets/img/newsboard_empty.png
Normal file
BIN
03_dom/uebungen/u16_tasse-01001/assets/img/newsboard_empty.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
03_dom/uebungen/u16_tasse-01001/assets/img/newsboard_sheets.png
Normal file
BIN
03_dom/uebungen/u16_tasse-01001/assets/img/newsboard_sheets.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
109
03_dom/uebungen/u16_tasse-01001/index.html
Normal file
109
03_dom/uebungen/u16_tasse-01001/index.html
Normal file
@@ -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" />
|
||||||
|
</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 16: — Teil 8
|
||||||
|
// Verändere erneut die Produktseite der Binär-Tasse mithilfe von JavaScript. Du kannst auch hier wieder die JS-Konsole verwenden.
|
||||||
|
|
||||||
|
// 1. Entferne die Überschrift Description mit der remove-Methode.
|
||||||
|
|
||||||
|
// 2. Entferne mit der remove-Methode den Text "010010000100111101010100" aus der Hauptüberschrift.
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
369
03_dom/uebungen/u17_tasse-01001/assets/css/styles.css
Normal file
369
03_dom/uebungen/u17_tasse-01001/assets/css/styles.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
BIN
03_dom/uebungen/u17_tasse-01001/assets/img/favicon.ico
Normal file
BIN
03_dom/uebungen/u17_tasse-01001/assets/img/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 316 B |
BIN
03_dom/uebungen/u17_tasse-01001/assets/img/js_header.png
Normal file
BIN
03_dom/uebungen/u17_tasse-01001/assets/img/js_header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
03_dom/uebungen/u17_tasse-01001/assets/img/logo.png
Normal file
BIN
03_dom/uebungen/u17_tasse-01001/assets/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
BIN
03_dom/uebungen/u17_tasse-01001/assets/img/newsboard_empty.png
Normal file
BIN
03_dom/uebungen/u17_tasse-01001/assets/img/newsboard_empty.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
03_dom/uebungen/u17_tasse-01001/assets/img/newsboard_sheets.png
Normal file
BIN
03_dom/uebungen/u17_tasse-01001/assets/img/newsboard_sheets.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
111
03_dom/uebungen/u17_tasse-01001/index.html
Normal file
111
03_dom/uebungen/u17_tasse-01001/index.html
Normal file
@@ -0,0 +1,111 @@
|
|||||||
|
<!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 17: — Teil 9
|
||||||
|
// Verändere die Produktseite der Binär-Tasse mithilfe von JavaScript.
|
||||||
|
|
||||||
|
// Füge noch einmal den folgenden Listenpunkt zur Liste der Product Specifications hinzu:
|
||||||
|
|
||||||
|
// Capacity: 11 oz.
|
||||||
|
|
||||||
|
// Füge den Listenpunkt aber dieses Mal nicht am Ende der Liste ein, sondern vor dem Eintrag Materials: Ceramic.
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
03_dom/uebungen/uebungen-15-17.zip
Normal file
BIN
03_dom/uebungen/uebungen-15-17.zip
Normal file
Binary file not shown.
Reference in New Issue
Block a user