added exercises
This commit is contained in:
Philippe Torrel
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>
|
||||
Reference in New Issue
Block a user