diff --git a/03_js-dom/agenda.md b/03_js-dom/agenda.md index c5c79e3..930719f 100644 --- a/03_js-dom/agenda.md +++ b/03_js-dom/agenda.md @@ -319,7 +319,7 @@ Projektarbeit - Einführung in JS DOM - DOM Selection (querySelector, querySelectorAll, $ & $$ Helper) - CSS Selektoren -- Type, Attribut-, Kombinator- und Pseudoklassen - Selektoren +- Typ-, Attribut-, Kombinator- und Pseudoklassen - Selektoren **Übungen:** diff --git a/03_js-dom/uebungen/u01_almost-quotes/assets/css/styles.css b/03_js-dom/uebungen/u01_almost-quotes/assets/css/styles.css new file mode 100644 index 0000000..d4c6b71 --- /dev/null +++ b/03_js-dom/uebungen/u01_almost-quotes/assets/css/styles.css @@ -0,0 +1,368 @@ +/* -------------------------------------------- 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 { + 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; +} diff --git a/03_js-dom/uebungen/u01_almost-quotes/assets/img/favicon.icon b/03_js-dom/uebungen/u01_almost-quotes/assets/img/favicon.icon new file mode 100644 index 0000000..bd2cd28 Binary files /dev/null and b/03_js-dom/uebungen/u01_almost-quotes/assets/img/favicon.icon differ diff --git a/03_js-dom/uebungen/u01_almost-quotes/assets/img/js_header.png b/03_js-dom/uebungen/u01_almost-quotes/assets/img/js_header.png new file mode 100644 index 0000000..4d14ceb Binary files /dev/null and b/03_js-dom/uebungen/u01_almost-quotes/assets/img/js_header.png differ diff --git a/03_js-dom/uebungen/u01_almost-quotes/index.html b/03_js-dom/uebungen/u01_almost-quotes/index.html new file mode 100644 index 0000000..ee1d05f --- /dev/null +++ b/03_js-dom/uebungen/u01_almost-quotes/index.html @@ -0,0 +1,35 @@ + + + + + + Übung 1: Almost Famous Quotes 1 + + + + +
+ +
+

Famous Quotes

+ +
+
+ + + diff --git a/03_js-dom/uebungen/u02_tasse-01001/assets/css/styles.css b/03_js-dom/uebungen/u02_tasse-01001/assets/css/styles.css new file mode 100644 index 0000000..c30a2d3 --- /dev/null +++ b/03_js-dom/uebungen/u02_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; +} diff --git a/03_js-dom/uebungen/u02_tasse-01001/assets/img/favicon.ico b/03_js-dom/uebungen/u02_tasse-01001/assets/img/favicon.ico new file mode 100644 index 0000000..bd2cd28 Binary files /dev/null and b/03_js-dom/uebungen/u02_tasse-01001/assets/img/favicon.ico differ diff --git a/03_js-dom/uebungen/u02_tasse-01001/assets/img/js_header.png b/03_js-dom/uebungen/u02_tasse-01001/assets/img/js_header.png new file mode 100644 index 0000000..4d14ceb Binary files /dev/null and b/03_js-dom/uebungen/u02_tasse-01001/assets/img/js_header.png differ diff --git a/03_js-dom/uebungen/u02_tasse-01001/assets/img/logo.png b/03_js-dom/uebungen/u02_tasse-01001/assets/img/logo.png new file mode 100644 index 0000000..bbd9fcc Binary files /dev/null and b/03_js-dom/uebungen/u02_tasse-01001/assets/img/logo.png differ diff --git a/03_js-dom/uebungen/u02_tasse-01001/assets/img/newsboard_empty.png b/03_js-dom/uebungen/u02_tasse-01001/assets/img/newsboard_empty.png new file mode 100644 index 0000000..d650b1b Binary files /dev/null and b/03_js-dom/uebungen/u02_tasse-01001/assets/img/newsboard_empty.png differ diff --git a/03_js-dom/uebungen/u02_tasse-01001/assets/img/newsboard_paperclip.png b/03_js-dom/uebungen/u02_tasse-01001/assets/img/newsboard_paperclip.png new file mode 100644 index 0000000..7f24721 Binary files /dev/null and b/03_js-dom/uebungen/u02_tasse-01001/assets/img/newsboard_paperclip.png differ diff --git a/03_js-dom/uebungen/u02_tasse-01001/assets/img/newsboard_sheets.png b/03_js-dom/uebungen/u02_tasse-01001/assets/img/newsboard_sheets.png new file mode 100644 index 0000000..14680cb Binary files /dev/null and b/03_js-dom/uebungen/u02_tasse-01001/assets/img/newsboard_sheets.png differ diff --git a/03_js-dom/uebungen/u02_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif b/03_js-dom/uebungen/u02_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif new file mode 100644 index 0000000..3a9c8ad Binary files /dev/null and b/03_js-dom/uebungen/u02_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif differ diff --git a/03_js-dom/uebungen/u02_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg b/03_js-dom/uebungen/u02_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg new file mode 100644 index 0000000..4399460 Binary files /dev/null and b/03_js-dom/uebungen/u02_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg differ diff --git a/03_js-dom/uebungen/u02_tasse-01001/index.html b/03_js-dom/uebungen/u02_tasse-01001/index.html new file mode 100644 index 0000000..1994999 --- /dev/null +++ b/03_js-dom/uebungen/u02_tasse-01001/index.html @@ -0,0 +1,104 @@ + + + + + + 010010000100111101010100 + + + + + + + +
+ +
+

+ Hot Binary Heat Changing Mug + "010010000100111101010100" +

+ + Hot Binary Heat Changing Mug + +

Description

+ +

+ Numbers make up + everything 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: + 0 and 1. Off and On. 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 Hot Binary Heat Changing Mug, there's a mug that + tells us which state our mug is in. In binary! +

+ +

+ See, the + Hot Binary Heat Changing Mug + 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: + 010010000100111101010100. That's in binary. Of course, + your + Hot Binary Heat Changing Mug + could just be paying you a compliment. Cheeky, mug. +

+ +

+ 010010000100111101010100 +

+ +

Product Specifications

+ + + +

You wanna buy it?

+ +

If you like to buy this brilliant mug, just do the following steps:

+ +
    +
  1. Select how many items do you want.
    2. +
  2. Press "buy".
    3. +
+ +
+ + +
+
+ + + + + + diff --git a/03_js-dom/uebungen/u03_tasse-01001/assets/css/styles.css b/03_js-dom/uebungen/u03_tasse-01001/assets/css/styles.css new file mode 100644 index 0000000..c30a2d3 --- /dev/null +++ b/03_js-dom/uebungen/u03_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; +} diff --git a/03_js-dom/uebungen/u03_tasse-01001/assets/img/favicon.ico b/03_js-dom/uebungen/u03_tasse-01001/assets/img/favicon.ico new file mode 100644 index 0000000..bd2cd28 Binary files /dev/null and b/03_js-dom/uebungen/u03_tasse-01001/assets/img/favicon.ico differ diff --git a/03_js-dom/uebungen/u03_tasse-01001/assets/img/js_header.png b/03_js-dom/uebungen/u03_tasse-01001/assets/img/js_header.png new file mode 100644 index 0000000..4d14ceb Binary files /dev/null and b/03_js-dom/uebungen/u03_tasse-01001/assets/img/js_header.png differ diff --git a/03_js-dom/uebungen/u03_tasse-01001/assets/img/logo.png b/03_js-dom/uebungen/u03_tasse-01001/assets/img/logo.png new file mode 100644 index 0000000..bbd9fcc Binary files /dev/null and b/03_js-dom/uebungen/u03_tasse-01001/assets/img/logo.png differ diff --git a/03_js-dom/uebungen/u03_tasse-01001/assets/img/newsboard_empty.png b/03_js-dom/uebungen/u03_tasse-01001/assets/img/newsboard_empty.png new file mode 100644 index 0000000..d650b1b Binary files /dev/null and b/03_js-dom/uebungen/u03_tasse-01001/assets/img/newsboard_empty.png differ diff --git a/03_js-dom/uebungen/u03_tasse-01001/assets/img/newsboard_paperclip.png b/03_js-dom/uebungen/u03_tasse-01001/assets/img/newsboard_paperclip.png new file mode 100644 index 0000000..7f24721 Binary files /dev/null and b/03_js-dom/uebungen/u03_tasse-01001/assets/img/newsboard_paperclip.png differ diff --git a/03_js-dom/uebungen/u03_tasse-01001/assets/img/newsboard_sheets.png b/03_js-dom/uebungen/u03_tasse-01001/assets/img/newsboard_sheets.png new file mode 100644 index 0000000..14680cb Binary files /dev/null and b/03_js-dom/uebungen/u03_tasse-01001/assets/img/newsboard_sheets.png differ diff --git a/03_js-dom/uebungen/u03_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif b/03_js-dom/uebungen/u03_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif new file mode 100644 index 0000000..3a9c8ad Binary files /dev/null and b/03_js-dom/uebungen/u03_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif differ diff --git a/03_js-dom/uebungen/u03_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg b/03_js-dom/uebungen/u03_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg new file mode 100644 index 0000000..4399460 Binary files /dev/null and b/03_js-dom/uebungen/u03_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg differ diff --git a/03_js-dom/uebungen/u03_tasse-01001/index.html b/03_js-dom/uebungen/u03_tasse-01001/index.html new file mode 100644 index 0000000..4469b6c --- /dev/null +++ b/03_js-dom/uebungen/u03_tasse-01001/index.html @@ -0,0 +1,106 @@ + + + + + + 010010000100111101010100 + + + + + + + +
+ +
+

+ Hot Binary Heat Changing Mug + "010010000100111101010100" +

+ + Hot Binary Heat Changing Mug + +

Description

+ +

+ Numbers make up + everything 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: + 0 and 1. Off and On. 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 Hot Binary Heat Changing Mug, there's a mug that + tells us which state our mug is in. In binary! +

+ +

+ See, the + Hot Binary Heat Changing Mug + 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: + 010010000100111101010100. That's in binary. Of course, + your + Hot Binary Heat Changing Mug + could just be paying you a compliment. Cheeky, mug. +

+ +

+ 010010000100111101010100 +

+ +

Product Specifications

+ + + +

You wanna buy it?

+ +

If you like to buy this brilliant mug, just do the following steps:

+ +
    +
  1. Select how many items do you want.
    2. +
  2. Press "buy".
    3. +
+ +
+ + +
+
+ + + + + + diff --git a/03_js-dom/uebungen/u04_tasse-01001/assets/css/styles.css b/03_js-dom/uebungen/u04_tasse-01001/assets/css/styles.css new file mode 100644 index 0000000..c30a2d3 --- /dev/null +++ b/03_js-dom/uebungen/u04_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; +} diff --git a/03_js-dom/uebungen/u04_tasse-01001/assets/img/favicon.ico b/03_js-dom/uebungen/u04_tasse-01001/assets/img/favicon.ico new file mode 100644 index 0000000..bd2cd28 Binary files /dev/null and b/03_js-dom/uebungen/u04_tasse-01001/assets/img/favicon.ico differ diff --git a/03_js-dom/uebungen/u04_tasse-01001/assets/img/js_header.png b/03_js-dom/uebungen/u04_tasse-01001/assets/img/js_header.png new file mode 100644 index 0000000..4d14ceb Binary files /dev/null and b/03_js-dom/uebungen/u04_tasse-01001/assets/img/js_header.png differ diff --git a/03_js-dom/uebungen/u04_tasse-01001/assets/img/logo.png b/03_js-dom/uebungen/u04_tasse-01001/assets/img/logo.png new file mode 100644 index 0000000..bbd9fcc Binary files /dev/null and b/03_js-dom/uebungen/u04_tasse-01001/assets/img/logo.png differ diff --git a/03_js-dom/uebungen/u04_tasse-01001/assets/img/newsboard_empty.png b/03_js-dom/uebungen/u04_tasse-01001/assets/img/newsboard_empty.png new file mode 100644 index 0000000..d650b1b Binary files /dev/null and b/03_js-dom/uebungen/u04_tasse-01001/assets/img/newsboard_empty.png differ diff --git a/03_js-dom/uebungen/u04_tasse-01001/assets/img/newsboard_paperclip.png b/03_js-dom/uebungen/u04_tasse-01001/assets/img/newsboard_paperclip.png new file mode 100644 index 0000000..7f24721 Binary files /dev/null and b/03_js-dom/uebungen/u04_tasse-01001/assets/img/newsboard_paperclip.png differ diff --git a/03_js-dom/uebungen/u04_tasse-01001/assets/img/newsboard_sheets.png b/03_js-dom/uebungen/u04_tasse-01001/assets/img/newsboard_sheets.png new file mode 100644 index 0000000..14680cb Binary files /dev/null and b/03_js-dom/uebungen/u04_tasse-01001/assets/img/newsboard_sheets.png differ diff --git a/03_js-dom/uebungen/u04_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif b/03_js-dom/uebungen/u04_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif new file mode 100644 index 0000000..3a9c8ad Binary files /dev/null and b/03_js-dom/uebungen/u04_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif differ diff --git a/03_js-dom/uebungen/u04_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg b/03_js-dom/uebungen/u04_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg new file mode 100644 index 0000000..4399460 Binary files /dev/null and b/03_js-dom/uebungen/u04_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg differ diff --git a/03_js-dom/uebungen/u04_tasse-01001/index.html b/03_js-dom/uebungen/u04_tasse-01001/index.html new file mode 100644 index 0000000..f1f4dfa --- /dev/null +++ b/03_js-dom/uebungen/u04_tasse-01001/index.html @@ -0,0 +1,106 @@ + + + + + + 010010000100111101010100 + + + + + + + +
+ +
+

+ Hot Binary Heat Changing Mug + "010010000100111101010100" +

+ + Hot Binary Heat Changing Mug + +

Description

+ +

+ Numbers make up + everything 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: + 0 and 1. Off and On. 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 Hot Binary Heat Changing Mug, there's a mug that + tells us which state our mug is in. In binary! +

+ +

+ See, the + Hot Binary Heat Changing Mug + 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: + 010010000100111101010100. That's in binary. Of course, + your + Hot Binary Heat Changing Mug + could just be paying you a compliment. Cheeky, mug. +

+ +

+ 010010000100111101010100 +

+ +

Product Specifications

+ + + +

You wanna buy it?

+ +

If you like to buy this brilliant mug, just do the following steps:

+ +
    +
  1. Select how many items do you want.
    2. +
  2. Press "buy".
    3. +
+ +
+ + +
+
+ + + + + + diff --git a/03_js-dom/uebungen/u05_tasse-01001/assets/css/styles.css b/03_js-dom/uebungen/u05_tasse-01001/assets/css/styles.css new file mode 100644 index 0000000..c30a2d3 --- /dev/null +++ b/03_js-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; +} diff --git a/03_js-dom/uebungen/u05_tasse-01001/assets/img/favicon.ico b/03_js-dom/uebungen/u05_tasse-01001/assets/img/favicon.ico new file mode 100644 index 0000000..bd2cd28 Binary files /dev/null and b/03_js-dom/uebungen/u05_tasse-01001/assets/img/favicon.ico differ diff --git a/03_js-dom/uebungen/u05_tasse-01001/assets/img/js_header.png b/03_js-dom/uebungen/u05_tasse-01001/assets/img/js_header.png new file mode 100644 index 0000000..4d14ceb Binary files /dev/null and b/03_js-dom/uebungen/u05_tasse-01001/assets/img/js_header.png differ diff --git a/03_js-dom/uebungen/u05_tasse-01001/assets/img/logo.png b/03_js-dom/uebungen/u05_tasse-01001/assets/img/logo.png new file mode 100644 index 0000000..bbd9fcc Binary files /dev/null and b/03_js-dom/uebungen/u05_tasse-01001/assets/img/logo.png differ diff --git a/03_js-dom/uebungen/u05_tasse-01001/assets/img/newsboard_empty.png b/03_js-dom/uebungen/u05_tasse-01001/assets/img/newsboard_empty.png new file mode 100644 index 0000000..d650b1b Binary files /dev/null and b/03_js-dom/uebungen/u05_tasse-01001/assets/img/newsboard_empty.png differ diff --git a/03_js-dom/uebungen/u05_tasse-01001/assets/img/newsboard_paperclip.png b/03_js-dom/uebungen/u05_tasse-01001/assets/img/newsboard_paperclip.png new file mode 100644 index 0000000..7f24721 Binary files /dev/null and b/03_js-dom/uebungen/u05_tasse-01001/assets/img/newsboard_paperclip.png differ diff --git a/03_js-dom/uebungen/u05_tasse-01001/assets/img/newsboard_sheets.png b/03_js-dom/uebungen/u05_tasse-01001/assets/img/newsboard_sheets.png new file mode 100644 index 0000000..14680cb Binary files /dev/null and b/03_js-dom/uebungen/u05_tasse-01001/assets/img/newsboard_sheets.png differ diff --git a/03_js-dom/uebungen/u05_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif b/03_js-dom/uebungen/u05_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif new file mode 100644 index 0000000..3a9c8ad Binary files /dev/null and b/03_js-dom/uebungen/u05_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif differ diff --git a/03_js-dom/uebungen/u05_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg b/03_js-dom/uebungen/u05_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg new file mode 100644 index 0000000..4399460 Binary files /dev/null and b/03_js-dom/uebungen/u05_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg differ diff --git a/03_js-dom/uebungen/u05_tasse-01001/index.html b/03_js-dom/uebungen/u05_tasse-01001/index.html new file mode 100644 index 0000000..f8d6c7a --- /dev/null +++ b/03_js-dom/uebungen/u05_tasse-01001/index.html @@ -0,0 +1,109 @@ + + + + + + 010010000100111101010100 + + + + + + + +
+ +
+

+ Hot Binary Heat Changing Mug + "010010000100111101010100" +

+ + Hot Binary Heat Changing Mug + +

Description

+ +

+ Numbers make up + everything 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: + 0 and 1. Off and On. 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 Hot Binary Heat Changing Mug, there's a mug that + tells us which state our mug is in. In binary! +

+ +

+ See, the + Hot Binary Heat Changing Mug + 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: + 010010000100111101010100. That's in binary. Of course, + your + Hot Binary Heat Changing Mug + could just be paying you a compliment. Cheeky, mug. +

+ +

+ 010010000100111101010100 +

+ +

Product Specifications

+ + + +

You wanna buy it?

+ +

If you like to buy this brilliant mug, just do the following steps:

+ +
    +
  1. Select how many items do you want.
    2. +
  2. Press "buy".
    3. +
+ +
+ + + +
+
+ + + + + + diff --git a/03_js-dom/unterricht/tag19/06_css-combinator-selektoren/index.html b/03_js-dom/unterricht/tag19/06_css-combinator-selektoren/index.html new file mode 100644 index 0000000..2a5800f --- /dev/null +++ b/03_js-dom/unterricht/tag19/06_css-combinator-selektoren/index.html @@ -0,0 +1,92 @@ + + + + + + CSS Kombinator Selektoren + + + + +
+
+

CSS Kombinator Selektoren

+ +
+ + + +

Bilder

+

Erstellte Bilder über Dummyimage.com

+

+ Lorem, ipsum dolor sit amet consectetur Zur GFN Webseite adipisicing elit. + Veniam quisquam quidem ut eos dolorem corrupti aut Link sed rerum voluptate dolore quod unde + explicabo architecto numquam eaque in, qui possimus voluptatem? +

+ +

+ Lorem, ipsum dolor sit amet consectetur Zur GFN Webseite adipisicing elit. + Veniam quisquam quidem ut eos dolorem corrupti aut Link sed rerum voluptate dolore quod unde + explicabo architecto numquam eaque in, qui possimus voluptatem? +

+
+
+ + + diff --git a/03_js-dom/unterricht/tag19/07_css-pseudoklassen/index.html b/03_js-dom/unterricht/tag19/07_css-pseudoklassen/index.html new file mode 100644 index 0000000..dc8cbc7 --- /dev/null +++ b/03_js-dom/unterricht/tag19/07_css-pseudoklassen/index.html @@ -0,0 +1,196 @@ + + + + + + CSS Selektor - Pseudoklassen + + + + + +
+
+

CSS Selektor - Pseudoklassen

+
+

+ Eine + Pseudoklasse + in CSS ist ein Schlüsselbegriff, welcher hinter einen Selektor gestellt wird, um einen besonderen Zustand + abzufragen. So steht beispielsweise :hover für Elemente, die gerade mit dem Mauszeiger berührt + werden. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameBeschreibung
:nth-child + Die Pseudo-Klasse spricht das x-te Kind-Element an — im Beispiel das fünfte Element innerhalb von ul, + falls es vom Tag-Typ li ist. +
:first-childDie Pseudo-Klasse selektiert das erste Kind-Element, sofern es vom richtigen Tag-Typ ist..
:last-child + Äquivalent zu :first-child selektieren Sie hier das letzte Kind-Element, sofern es vom richtigen Tag-Typ + ist. +
:empty + Mit dieser Pseudo-Klasse sprechen Sie nur Elemente an, die ohne Kind-Elemente sind. Inhalt in Form von + Text wird dabei ebenfalls als Kind-Element betrachtet. +
:not(selector) + Negation. Wählt Elemente aus, wenn sie nicht dem in Klammern angegebenen Selektor entsprechen. Im + Beispiel würde alles außer span-Elementen ausgewählt. +
:only-child + Diese Klasse selektiert ein Element nur, wenn es sich um das einzige Kind eines angegebenen + Eltern-Elementes handelt. +
:checkedDiese Klasse selektiert eine Checkbox oder ein Radio-button nur, wenn es ausgewählt wurde.
+ +
+ + +
+
+
+ + + diff --git a/03_js-dom/unterricht/tag19/08_document-vs-element-selektion/index.html b/03_js-dom/unterricht/tag19/08_document-vs-element-selektion/index.html new file mode 100644 index 0000000..4e3cbf0 --- /dev/null +++ b/03_js-dom/unterricht/tag19/08_document-vs-element-selektion/index.html @@ -0,0 +1,38 @@ + + + + + + document.querySelector() vs. element.querySelector() + + + +
+
+

document.querySelector() vs. element.querySelector()

+
+ + +
+
+ + + diff --git a/03_js-dom/unterricht/tag19/09_$-$$-helper/index.html b/03_js-dom/unterricht/tag19/09_$-$$-helper/index.html new file mode 100644 index 0000000..508d14b --- /dev/null +++ b/03_js-dom/unterricht/tag19/09_$-$$-helper/index.html @@ -0,0 +1,45 @@ + + + + + + Helferfunktion $ und $$ + + + + +
+
+

Helferfunktion $ und $$

+
+

Lorem ipsum dolor sit amet.

+

Quod eligendi saepe voluptates eveniet.

+

Architecto reiciendis magnam modi inventore.

+

Modi ipsum, velit rem ipsam.

+

Provident, officia quisquam aliquam deserunt!

+
+
+ + + diff --git a/03_js-dom/unterricht/tag19/10_dom-selection/index.html b/03_js-dom/unterricht/tag19/10_dom-selection/index.html new file mode 100644 index 0000000..bdacaad --- /dev/null +++ b/03_js-dom/unterricht/tag19/10_dom-selection/index.html @@ -0,0 +1,112 @@ + + + + + + DOM Selection + + + +
+
+

DOM Selection

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Methode / EigenschaftBeschreibungInterface/API
querySelector() + Gibt das erste Element zurück, das zum angegebenen Selektor passt. Durchsucht nur Elemente innerhalb des + HTML-Teilbaums, auf dessen Wurzelelement querySelector aufgerufen wurde. + Element
querySelectorAll() + Gibt alle Elemente zurück, die zum angegebenen Selektor passen. Durchsucht nur Elemente innerhalb des + HTML-Teilbaums, auf dessen Wurzelelement querySelectorAll aufgerufen wurde. + Element
document.querySelector() (aka $) + Gibt das erste Element zurück, das zum angegebenen Selektor passt. Durchsucht das gesamte HTML-Dokument. + Sollte das Element nicht gefunden werden, ist das Ergebnis null. + Document
document.querySelectorAll() (aka $$) + Gibt alle Elemente zurück, die zum angegebenen Selektor passen. Durchsucht das gesamte HTML-Dokument. + Die $$-Funktion gibt die gefundenen Elemente als Array mit ebendiesen Elementen zurück. Sollte kein + Element gefunden werden, ist das Ergebnis ein leeres Array. + Document
document.getElementById() + Gibt ein Element-Objekt zurück, das dem Element entspricht, dessen id-Attribut + mit dem angegebenen String übereinstimmt. Durchsucht das gesamte Dokument; wird kein Element gefunden, + ist der Rückgabewert null. + Document
document.bodyGibt das <body>-Element des aktuellen Dokuments zurück.Document
+
+ + +
+
+ + +