diff --git a/03_dom/agenda.md b/03_dom/agenda.md index 1ec384d..4d0058e 100644 --- a/03_dom/agenda.md +++ b/03_dom/agenda.md @@ -336,13 +336,6 @@ Projektarbeit #### Tag 22 -- **Exkurs: Webseite mit Gulp, SASS, HTML/CSS, JS** -- **Wetter API auslesen** - ---- - -#### Tag 23 - - Defer & Async - JS Dateien auslagern - Chat Gestaltung (DOMTokenList Objekt) diff --git a/03_dom/uebungen/u01_almost-quotes/index.html b/03_dom/uebungen/u01_almost-quotes/index.html index ee1d05f..e447c66 100644 --- a/03_dom/uebungen/u01_almost-quotes/index.html +++ b/03_dom/uebungen/u01_almost-quotes/index.html @@ -1,4 +1,4 @@ - + @@ -20,10 +20,17 @@ // 1 // Ändern Sie mit Hilfe von JS die Überschrift (h1) der HTML-Seite in Almost Famous Quotes. + const h1El = document.querySelector('h1'); + h1El.innerHTML = 'Almost Famous Quotes'; // 2 // Die Seite enthält ein leeres blockquote-Element. Öffnen Sie die HTML-Seite in Chrome. Geben Sie in der Konsole eine Zeile JS-Code ein, die das Element mit folgendem Inhalt befüllt: + // Code für die Browser-Konsole: + + document.querySelector('blockquote').innerHTML = + '

I have always wished for my computer to be as easy to use as my telephone;my wish has come true because I can no longer figure out how to use mytelephone.

'; + //

// I have always wished for my computer to be as easy to use as my telephone; // my wish has come true because I can no longer figure out how to use my diff --git a/03_dom/uebungen/u02_tasse-01001/index.html b/03_dom/uebungen/u02_tasse-01001/index.html index 1994999..b95f009 100644 --- a/03_dom/uebungen/u02_tasse-01001/index.html +++ b/03_dom/uebungen/u02_tasse-01001/index.html @@ -1,4 +1,4 @@ - + @@ -96,8 +96,17 @@ (() => { // Tippen Sie eine Abfrage in die Konsole, die: // 1. das h1-Element findet. + const h1El = document.querySelector('h1'); + // 2.das Element mit der id buy_form findet. + const buyForm = document.querySelector('#buy_form'); + // 3. das Element mit der id product_img findet. + const productImg = document.querySelector('#product_img'); + + console.log(h1El); + console.log(buyForm); + console.log(productImg); })(); diff --git a/03_dom/uebungen/u03_tasse-01001/index.html b/03_dom/uebungen/u03_tasse-01001/index.html index 4469b6c..ce64d50 100644 --- a/03_dom/uebungen/u03_tasse-01001/index.html +++ b/03_dom/uebungen/u03_tasse-01001/index.html @@ -1,4 +1,4 @@ - + @@ -94,12 +94,31 @@ diff --git a/03_dom/uebungen/u04_tasse-01001/index.html b/03_dom/uebungen/u04_tasse-01001/index.html index 694e4fa..64bba5d 100644 --- a/03_dom/uebungen/u04_tasse-01001/index.html +++ b/03_dom/uebungen/u04_tasse-01001/index.html @@ -96,10 +96,22 @@ (() => { // Übung 4: 010010000100111101010100 — Teil 3 // Wenden Sie sich nochmal der 010010000100111101010100-Tasse zu. Benutzen Sie geeignete Selektoren, um + // 1. das erste li zu finden, das sich innerhalb der ul mit der id product_specification befindet. + const liUlProdSpecEl = document.querySelector('#product_specification li'); + console.log(liUlProdSpecEl); + // 2. das erste span-Element zu finden, das sich innerhalb des ersten h1-Elements mit der CSS-Klasse article befindet. + const spanH1ArticleEL = document.querySelector('h1.article span'); + console.log(spanH1ArticleEL); + // 3. alle Elemente mit der Klasse keyword innerhalb von p-Elementen zu finden. + const keywordPEls = Array.from(document.querySelectorAll('p .keyword')); + console.log(keywordPEls); + // 4. alle li-Elemente innerhalb von ul-Elementen zu finden. + const liUls = Array.from(document.querySelectorAll('ul li')); + console.log(liUls); })(); diff --git a/03_dom/uebungen/u05_tasse-01001/index.html b/03_dom/uebungen/u05_tasse-01001/index.html index f8d6c7a..c4b7bbb 100644 --- a/03_dom/uebungen/u05_tasse-01001/index.html +++ b/03_dom/uebungen/u05_tasse-01001/index.html @@ -1,4 +1,4 @@ - + @@ -98,11 +98,28 @@ // Übung 5: 010010000100111101010100 — Teil 4 // Wenden Sie sich nochmal der 010010000100111101010100-Tasse zu. Benutzen Sie geeignete Selektoren, um // 1. alle Bilder zu finden, deren Dateiname auf jpg endet. + const jpgImgEls = Array.from(document.querySelectorAll("img[src$='.jpg'], img[src$='.jpeg']")); + console.log(jpgImgEls); + // 2. alle input-Elemente vom Typ button zu finden, die sich innerhalb von Formularen befinden. + const inpuButtonFormEls = Array.from(document.querySelectorAll('form input[type="button"]')); + console.log(inpuButtonFormEls); + // 3. alle Elemente mit der Klasse model zu finden, die ein Attribut data-model haben, das den Wert V7 enthält. + const dataModelEls = Array.from(document.querySelectorAll('.model[data-model*="V7"]')); + console.log(dataModelEls); + // 4. alle Bilder zu finden, die nicht die Klasse float_left enthalten. + const imgNoFloatLeftEls = Array.from(document.querySelectorAll('img:not(.float_left)')); + console.log(imgNoFloatLeftEls); + // 5. alle zweiten Listenpunkte zu finden. + const allSecondLiEls = Array.from(document.querySelectorAll('li:nth-child(2n)')); + console.log(Array.from(allSecondLiEls)); + // 6. alle Listen (ul) zu finden, die unmittelbar nach "einer Überschrift zweiter Ordnung" (h2) folgen. + const ulH2Els = Array.from(document.querySelectorAll('h2 + ul')); + console.log(ulH2Els); })(); diff --git a/03_dom/uebungen/u06_tasse-01001/assets/css/styles.css b/03_dom/uebungen/u06_tasse-01001/assets/css/styles.css new file mode 100644 index 0000000..6da8361 --- /dev/null +++ b/03_dom/uebungen/u06_tasse-01001/assets/css/styles.css @@ -0,0 +1,369 @@ +/* -------------------------------------------- Haupt CSS fuer alle Seiten -------------------------------------------- */ + +/* ---------------- CSS-Reset ------------------- */ +html, +body, +a, +div, +h1, +h2, +h3, +h4, +h5, +h6, +span, +p, +img, +strong, +ul, +li, +table, +th, +td, +tr { + margin: 0px; + padding: 0px; + border: 0px none; + font-weight: normal; + font-style: inherit; + font-family: inherit; + font-variant: inherit; + text-decoration: none; + table-layout: inherit; +} + +/* ---------------- Body / HTML ------------------- */ + +html { + font-size: 100%; + background-color: #fffef7; +} + +body { + font-family: Helvetica, Arial, sans-serif; + font-size: 1.2em; + font-weight: normal; + color: black; + margin: 0rem auto 2rem auto; +} + +/* ---------------- layout ------------------- */ + +header { + background: url(../img/js_header.png) left top no-repeat transparent; + background-size: cover; + height: 250px; + min-width: 850px; +} + +header:after { + content: ' '; + display: block; + height: 250px; + background: rgba(255, 254, 247, 0); + background: -moz-linear-gradient( + top, + rgba(255, 254, 247, 0) 0%, + rgba(255, 254, 247, 0.55) 22%, + rgba(255, 254, 247, 0.7) 42%, + rgba(255, 254, 247, 0.71) 43%, + rgba(255, 254, 247, 0.78) 61%, + rgba(255, 254, 247, 0.92) 75%, + rgba(255, 254, 247, 1) 87%, + rgba(255, 254, 247, 1) 100% + ); + background: -webkit-gradient( + left top, + left bottom, + color-stop(0%, rgba(255, 254, 247, 0)), + color-stop(22%, rgba(255, 254, 247, 0.55)), + color-stop(42%, rgba(255, 254, 247, 0.7)), + color-stop(43%, rgba(255, 254, 247, 0.71)), + color-stop(61%, rgba(255, 254, 247, 0.78)), + color-stop(75%, rgba(255, 254, 247, 0.92)), + color-stop(87%, rgba(255, 254, 247, 1)), + color-stop(100%, rgba(255, 254, 247, 1)) + ); + background: -webkit-linear-gradient( + top, + rgba(255, 254, 247, 0) 0%, + rgba(255, 254, 247, 0.55) 22%, + rgba(255, 254, 247, 0.7) 42%, + rgba(255, 254, 247, 0.71) 43%, + rgba(255, 254, 247, 0.78) 61%, + rgba(255, 254, 247, 0.92) 75%, + rgba(255, 254, 247, 1) 87%, + rgba(255, 254, 247, 1) 100% + ); + background: -o-linear-gradient( + top, + rgba(255, 254, 247, 0) 0%, + rgba(255, 254, 247, 0.55) 22%, + rgba(255, 254, 247, 0.7) 42%, + rgba(255, 254, 247, 0.71) 43%, + rgba(255, 254, 247, 0.78) 61%, + rgba(255, 254, 247, 0.92) 75%, + rgba(255, 254, 247, 1) 87%, + rgba(255, 254, 247, 1) 100% + ); + background: -ms-linear-gradient( + top, + rgba(255, 254, 247, 0) 0%, + rgba(255, 254, 247, 0.55) 22%, + rgba(255, 254, 247, 0.7) 42%, + rgba(255, 254, 247, 0.71) 43%, + rgba(255, 254, 247, 0.78) 61%, + rgba(255, 254, 247, 0.92) 75%, + rgba(255, 254, 247, 1) 87%, + rgba(255, 254, 247, 1) 100% + ); + background: linear-gradient( + to bottom, + rgba(255, 254, 247, 0) 0%, + rgba(255, 254, 247, 0.55) 22%, + rgba(255, 254, 247, 0.7) 42%, + rgba(255, 254, 247, 0.71) 43%, + rgba(255, 254, 247, 0.78) 61%, + rgba(255, 254, 247, 0.92) 75%, + rgba(255, 254, 247, 1) 87%, + rgba(255, 254, 247, 1) 100% + ); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 ); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 ); +} + +main, +footer { + width: 70%; + margin: 3rem auto; + min-width: 850px; + padding: 0 20px; + box-sizing: border-box; +} + +/* ---------------- Content ------------------- */ + +h1 { + color: #93412b; + font-size: 3em; + margin-bottom: 20px; + font-weight: bold; +} + +h2 { + color: #93412b; + font-size: 2.5em; + margin-bottom: 15px; +} + +h3 { + color: #93412b; + font-size: 2em; + margin-bottom: 10px; +} + +p { + line-height: 15px; + margin-bottom: 15px; + line-height: 1.7em; +} + +.cited { + font-style: italic; + font-size: 0.8em; +} + +.u { + text-decoration: underline; +} +.b { + font-weight: bold; +} +.i { + font-style: italic; +} +.align_right { + text-align: right; +} +.align_left { + text-align: left; + margin-right: 10px; +} +.align_center { + text-align: center; +} +.float_left { + float: left; +} +.float_right { + float: right; +} +.clear_both { + clear: both; +} +strong { + font-weight: bold; +} +.special { + color: #b7595b; + font-weight: bold; +} +.keyword { + color: #db6f50; + font-weight: bold; + font-style: italic; +} +.gray, +.grey { + color: gray; +} + +/* Links */ +main a:link, +main a:visited { + color: #eb690b; + font-weight: bold; +} + +main a:focus, +main a:hover, +main a:active { + color: #eb690b; +} + +ul { + list-style-position: outside; + margin-bottom: 20px; + padding-left: 22px; +} + +ol { + margin-bottom: 20px; + padding-left: 30px; +} + +li { + line-height: 1.4em; +} + +/* ------- Article ------- */ + +h1 { + color: #93412b; + font-size: 2.7em; + margin-bottom: 20px; +} + +#buy_form input[type='button'] { + display: inline-block; + padding: 1px 20px 3px 20px; + background-color: #93412b; + color: white; + border: 1px solid white; + font-size: 1em; + height: 32px; +} + +#buy_form input[type='button']:hover { + background-color: white; + color: #93412b; + border: 1px solid #93412b; +} + +#buy_form select { + display: inline-block; + font-size: 1em; + background-color: white; + color: #93412b; + border: 1px solid #93412b; + height: 32px; +} + +/* ------- Chat ------- */ + +#chat { + width: 100%; + background-color: white; + border: 1px solid #9c352f; + height: 20rem; + position: relative; +} + +#chat_window { + background-color: white; + width: 85%; + float: left; + height: 95%; +} + +#chat_history { + position: absolute; + bottom: 8%; + max-height: 92%; + padding: 0px 0px 5px 7px; +} + +#chat_history p { + font-size: 0.6em; + margin: 0; +} + +#chat_text { + height: 8%; + position: absolute; + bottom: 0; + width: 85%; +} + +#chat_text input { + width: 98%; + display: block; + margin: auto; +} + +#chat_members { + list-style-type: none; + height: 100%; + width: 15%; + margin-left: 85%; + border-left: 1px solid #9c352f; + text-align: right; + box-sizing: border-box; + min-width: 100px; + font-size: 0.8em; + padding-top: 5px; +} + +#chat_members li { + line-height: 1.2em; + padding: 5px 10px 2px 15px; +} + +#chat_members .highlighted { + background-color: #c14d45; + color: white; +} +.chat_member { + font-weight: bold; +} +.chat_member1 { + color: #3626c8; +} +.chat_member2 { + color: #e38d0b; +} + +#member_search { + position: absolute; + right: 0; + bottom: 0; + width: 15%; + height: 8%; +} + +#member_search input { + width: 88%; + display: block; + margin: auto; + text-align: right; +} diff --git a/03_dom/uebungen/u06_tasse-01001/assets/img/favicon.ico b/03_dom/uebungen/u06_tasse-01001/assets/img/favicon.ico new file mode 100644 index 0000000..bd2cd28 Binary files /dev/null and b/03_dom/uebungen/u06_tasse-01001/assets/img/favicon.ico differ diff --git a/03_dom/uebungen/u06_tasse-01001/assets/img/js_header.png b/03_dom/uebungen/u06_tasse-01001/assets/img/js_header.png new file mode 100644 index 0000000..4d14ceb Binary files /dev/null and b/03_dom/uebungen/u06_tasse-01001/assets/img/js_header.png differ diff --git a/03_dom/uebungen/u06_tasse-01001/assets/img/logo.png b/03_dom/uebungen/u06_tasse-01001/assets/img/logo.png new file mode 100644 index 0000000..bbd9fcc Binary files /dev/null and b/03_dom/uebungen/u06_tasse-01001/assets/img/logo.png differ diff --git a/03_dom/uebungen/u06_tasse-01001/assets/img/newsboard_empty.png b/03_dom/uebungen/u06_tasse-01001/assets/img/newsboard_empty.png new file mode 100644 index 0000000..d650b1b Binary files /dev/null and b/03_dom/uebungen/u06_tasse-01001/assets/img/newsboard_empty.png differ diff --git a/03_dom/uebungen/u06_tasse-01001/assets/img/newsboard_paperclip.png b/03_dom/uebungen/u06_tasse-01001/assets/img/newsboard_paperclip.png new file mode 100644 index 0000000..7f24721 Binary files /dev/null and b/03_dom/uebungen/u06_tasse-01001/assets/img/newsboard_paperclip.png differ diff --git a/03_dom/uebungen/u06_tasse-01001/assets/img/newsboard_sheets.png b/03_dom/uebungen/u06_tasse-01001/assets/img/newsboard_sheets.png new file mode 100644 index 0000000..14680cb Binary files /dev/null and b/03_dom/uebungen/u06_tasse-01001/assets/img/newsboard_sheets.png differ diff --git a/03_dom/uebungen/u06_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif b/03_dom/uebungen/u06_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_dom/uebungen/u06_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif differ diff --git a/03_dom/uebungen/u06_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg b/03_dom/uebungen/u06_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_dom/uebungen/u06_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg differ diff --git a/03_dom/uebungen/u06_tasse-01001/index.html b/03_dom/uebungen/u06_tasse-01001/index.html new file mode 100644 index 0000000..e92dee4 --- /dev/null +++ b/03_dom/uebungen/u06_tasse-01001/index.html @@ -0,0 +1,115 @@ + + + + + + 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_dom/uebungen/u07_content-length/assets/css/main.css b/03_dom/uebungen/u07_content-length/assets/css/main.css new file mode 100644 index 0000000..18d1085 --- /dev/null +++ b/03_dom/uebungen/u07_content-length/assets/css/main.css @@ -0,0 +1,38 @@ +*, +html { + box-sizing: border-box; +} + +html, +body { + font-family: 'Helvetica', 'Arial', sans-serif; + color: #444; + font-weight: normal; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + padding: 0.5em; +} + +.coffee_break_article { + background-color: BurlyWood; +} + +.normal_length_article { + background-color: #cafe69; +} + +.lone_weekend_article { + background-color: DarkTurquoise; +} + +.container { + margin: 0 auto; + padding: 1rem; + max-width: 1140px; +} diff --git a/03_dom/uebungen/u07_content-length/index.html b/03_dom/uebungen/u07_content-length/index.html new file mode 100644 index 0000000..038e29c --- /dev/null +++ b/03_dom/uebungen/u07_content-length/index.html @@ -0,0 +1,55 @@ + + + + + + Article Detail Page + + + + +
+
+

Lorem ipsum

+
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex + ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat + nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit + anim id est laborum. +

+ +

...

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex + ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat + nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit + anim id est laborum. +

+
+
+
+ + + diff --git a/03_dom/uebungen/uebungen-6-7.zip b/03_dom/uebungen/uebungen-6-7.zip new file mode 100644 index 0000000..d5bd32f Binary files /dev/null and b/03_dom/uebungen/uebungen-6-7.zip differ diff --git a/03_dom/unterricht/tag22/01_dom-selection/index.html b/03_dom/unterricht/tag22/01_dom-selection/index.html new file mode 100644 index 0000000..a09950a --- /dev/null +++ b/03_dom/unterricht/tag22/01_dom-selection/index.html @@ -0,0 +1,53 @@ + + + + + + DOM Selection + + + +
+
+

DOM Selection

+
+ + +
+
+ + + diff --git a/03_dom/unterricht/tag22/02_class-list-chat/assets/css/styles.css b/03_dom/unterricht/tag22/02_class-list-chat/assets/css/styles.css new file mode 100644 index 0000000..d904e6a --- /dev/null +++ b/03_dom/unterricht/tag22/02_class-list-chat/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_dom/unterricht/tag22/02_class-list-chat/assets/img/favicon.icon b/03_dom/unterricht/tag22/02_class-list-chat/assets/img/favicon.icon new file mode 100644 index 0000000..bd2cd28 Binary files /dev/null and b/03_dom/unterricht/tag22/02_class-list-chat/assets/img/favicon.icon differ diff --git a/03_dom/unterricht/tag22/02_class-list-chat/assets/img/js_header.png b/03_dom/unterricht/tag22/02_class-list-chat/assets/img/js_header.png new file mode 100644 index 0000000..4d14ceb Binary files /dev/null and b/03_dom/unterricht/tag22/02_class-list-chat/assets/img/js_header.png differ diff --git a/03_dom/unterricht/tag22/02_class-list-chat/index.html b/03_dom/unterricht/tag22/02_class-list-chat/index.html new file mode 100644 index 0000000..a51cad3 --- /dev/null +++ b/03_dom/unterricht/tag22/02_class-list-chat/index.html @@ -0,0 +1,123 @@ + + + + + + classList - DOMTokenList + + + + + +
+
+

classList - DOMTokenList

+
+

The Chat

+
+
+
+

+ Ladislaus: + Anybody there? +

+

+ Friedlinde + Yes, me! +

+
+ +
+ +
+
+ +
    +
  • Heribert
    • +
  • Friedlinde
    • +
  • Tusnelda
    • +
  • Berthold
    • +
  • Oswine
    • +
  • Ladislaus
    • +
+ + +
+
+
+ + + diff --git a/03_dom/unterricht/tag22/03_js-auslagern-defer/assets/img/defer_async.png b/03_dom/unterricht/tag22/03_js-auslagern-defer/assets/img/defer_async.png new file mode 100644 index 0000000..d7bf779 Binary files /dev/null and b/03_dom/unterricht/tag22/03_js-auslagern-defer/assets/img/defer_async.png differ diff --git a/03_dom/unterricht/tag22/03_js-auslagern-defer/assets/js/main.js b/03_dom/unterricht/tag22/03_js-auslagern-defer/assets/js/main.js new file mode 100644 index 0000000..6501a56 --- /dev/null +++ b/03_dom/unterricht/tag22/03_js-auslagern-defer/assets/js/main.js @@ -0,0 +1,17 @@ +'use strict'; + +console.log('Datei wurde eingebunden.'); + +const h1El = document.querySelector('h1'); // =>

...

- mit "defer" Attribut | null - ohne "defer" Attribut + +console.log('h1El: ', h1El); + +const onReady = () => { + const h1El = document.querySelector('h1'); + h1El.style.color = 'tomato'; + + console.log('h1El: ', h1El); +}; + +// Eventlauscher - EventHandler wird ausgelöst, wenn Dokument komplett initialisiert wurde. +document.addEventListener('DOMContentLoaded', onReady); diff --git a/03_dom/unterricht/tag22/03_js-auslagern-defer/index.html b/03_dom/unterricht/tag22/03_js-auslagern-defer/index.html new file mode 100644 index 0000000..8c6f3a4 --- /dev/null +++ b/03_dom/unterricht/tag22/03_js-auslagern-defer/index.html @@ -0,0 +1,21 @@ + + + + + + JS Dateien auslagern und Attribut "defer" + + + + +
+
+

JS Dateien auslagern und Attribut "defer"

+ +
+
+ + + diff --git a/03_dom/unterricht/tag22/04_chat-lernheft/assets/css/styles.css b/03_dom/unterricht/tag22/04_chat-lernheft/assets/css/styles.css new file mode 100644 index 0000000..d904e6a --- /dev/null +++ b/03_dom/unterricht/tag22/04_chat-lernheft/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_dom/unterricht/tag22/04_chat-lernheft/assets/img/favicon.icon b/03_dom/unterricht/tag22/04_chat-lernheft/assets/img/favicon.icon new file mode 100644 index 0000000..bd2cd28 Binary files /dev/null and b/03_dom/unterricht/tag22/04_chat-lernheft/assets/img/favicon.icon differ diff --git a/03_dom/unterricht/tag22/04_chat-lernheft/assets/img/js_header.png b/03_dom/unterricht/tag22/04_chat-lernheft/assets/img/js_header.png new file mode 100644 index 0000000..4d14ceb Binary files /dev/null and b/03_dom/unterricht/tag22/04_chat-lernheft/assets/img/js_header.png differ diff --git a/03_dom/unterricht/tag22/04_chat-lernheft/assets/js/main.js b/03_dom/unterricht/tag22/04_chat-lernheft/assets/js/main.js new file mode 100644 index 0000000..4871b12 --- /dev/null +++ b/03_dom/unterricht/tag22/04_chat-lernheft/assets/js/main.js @@ -0,0 +1,19 @@ +'use strict'; + +{ + const highlightChatMembersBy = (partOfMemberName) => { + chatMembers() + .filter((member) => doesMemberMatch(partOfMemberName, member)) + .forEach(highlight); + }; + + const doesMemberMatch = (partOfMemberName, member) => + member.innerHTML.toLowerCase().includes(partOfMemberName.toLowerCase()); + + const chatMembers = () => $$('#chat_members li'); + const highlight = (el) => el.classList.add('highlighted'); + + const $$ = (qs) => Array.from(document.querySelectorAll(qs)); + + highlightChatMembersBy('ert'); +} diff --git a/03_dom/unterricht/tag22/04_chat-lernheft/index.html b/03_dom/unterricht/tag22/04_chat-lernheft/index.html new file mode 100644 index 0000000..00d705e --- /dev/null +++ b/03_dom/unterricht/tag22/04_chat-lernheft/index.html @@ -0,0 +1,50 @@ + + + + + + classList - DOMTokenList + + + + + + +
+
+

The Chat

+
+
+
+

+ Ladislaus: + Anybody there? +

+

+ Friedlinde + Yes, me! +

+
+ +
+ +
+
+ +
    +
  • Heribert
    • +
  • Friedlinde
    • +
  • Tusnelda
    • +
  • Berthold
    • +
  • Oswine
    • +
  • Ladislaus
    • +
+ + +
+
+
+ + diff --git a/03_dom/unterricht/tag22/05_chat-refactored/assets/css/styles.css b/03_dom/unterricht/tag22/05_chat-refactored/assets/css/styles.css new file mode 100644 index 0000000..d904e6a --- /dev/null +++ b/03_dom/unterricht/tag22/05_chat-refactored/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_dom/unterricht/tag22/05_chat-refactored/assets/img/favicon.icon b/03_dom/unterricht/tag22/05_chat-refactored/assets/img/favicon.icon new file mode 100644 index 0000000..bd2cd28 Binary files /dev/null and b/03_dom/unterricht/tag22/05_chat-refactored/assets/img/favicon.icon differ diff --git a/03_dom/unterricht/tag22/05_chat-refactored/assets/img/js_header.png b/03_dom/unterricht/tag22/05_chat-refactored/assets/img/js_header.png new file mode 100644 index 0000000..4d14ceb Binary files /dev/null and b/03_dom/unterricht/tag22/05_chat-refactored/assets/img/js_header.png differ diff --git a/03_dom/unterricht/tag22/05_chat-refactored/assets/js/main.js b/03_dom/unterricht/tag22/05_chat-refactored/assets/js/main.js new file mode 100644 index 0000000..7fd809d --- /dev/null +++ b/03_dom/unterricht/tag22/05_chat-refactored/assets/js/main.js @@ -0,0 +1,35 @@ +'use strict'; + +// IIFE +(() => { + // === DOM & VARS ======= + const module = document.querySelector('#chat') || console.error('Element not found'); + + const DOM = { + listItems: Array.from(module.querySelectorAll('#chat_members li')), + }; + + console.log(DOM); + + // === INIT ============= + const init = () => { + // Funktionsaufrufe zu beginn der Anwendung + highlightListItemBy('ert'); + }; + + // === EVENTHANDLER ===== + + // === XHR/FETCH ======== + + // === FUNCTIONS ======== + const highlightListItemBy = (searchValue = '') => { + DOM.listItems.forEach((el) => { + const text = el.textContent.trim().toLowerCase(); + if (text.includes(searchValue.trim().toLowerCase())) { + el.classList.add('highlighted'); + } + }); + }; + + init(); +})(); diff --git a/03_dom/unterricht/tag22/05_chat-refactored/index.html b/03_dom/unterricht/tag22/05_chat-refactored/index.html new file mode 100644 index 0000000..00d705e --- /dev/null +++ b/03_dom/unterricht/tag22/05_chat-refactored/index.html @@ -0,0 +1,50 @@ + + + + + + classList - DOMTokenList + + + + + + +
+
+

The Chat

+
+
+
+

+ Ladislaus: + Anybody there? +

+

+ Friedlinde + Yes, me! +

+
+ +
+ +
+
+ +
    +
  • Heribert
    • +
  • Friedlinde
    • +
  • Tusnelda
    • +
  • Berthold
    • +
  • Oswine
    • +
  • Ladislaus
    • +
+ + +
+
+
+ + diff --git a/03_dom/unterricht/tag22/06_event-mouse/index.html b/03_dom/unterricht/tag22/06_event-mouse/index.html new file mode 100644 index 0000000..67fb145 --- /dev/null +++ b/03_dom/unterricht/tag22/06_event-mouse/index.html @@ -0,0 +1,137 @@ + + + + + + Events - MouseEvent | PointerEvent + + + + +
+
+

Events - MouseEvent | PointerEvent

+

Standard Events

+

JS Events in W3Schools

+
+ + +
+ + + + + +
Content
+ +
+
+
+
+
+ + + diff --git a/03_dom/unterricht/tag22/07_event-keyboard/index.html b/03_dom/unterricht/tag22/07_event-keyboard/index.html new file mode 100644 index 0000000..4ec465f --- /dev/null +++ b/03_dom/unterricht/tag22/07_event-keyboard/index.html @@ -0,0 +1,145 @@ + + + + + + Events - KeyboardEvent | InputEvent | FocusEvent + + + +
+
+

Events - KeyboardEvent | InputEvent | FocusEvent

+

Standard Events

+

JS Events in W3Schools

+
+ +
+ + +
+ + +
+ + +
+ + +
+ + +
+ +
+ + +
+
+
+ + +