diff --git a/03_dom/faq/ordered-list.html b/03_dom/faq/ordered-list.html new file mode 100644 index 0000000..57190f9 --- /dev/null +++ b/03_dom/faq/ordered-list.html @@ -0,0 +1,41 @@ + + + + + + Ordered List + + + +
+
+

Ordered List

+ +
    +
  1. Eintrag 01
    2. +
  2. Eintrag 02
    3. +
  3. + Eintrag 03 +
      +
    1. Unterpunkt 01
      2. +
    2. Unterpunkt 02
      3. +
    3. Unterpunkt 03
      4. +
    4. Unterpunkt 04
      5. +
    +
    4. +
  4. Eintrag 04
    5. +
  5. Eintrag 05
    6. +
  6. Eintrag 06
    7. +
+
+
+ + + diff --git a/03_dom/uebungen/u08-09_newsboard/assets/css/main.css b/03_dom/uebungen/u08-09_newsboard/assets/css/main.css new file mode 100644 index 0000000..60e194c --- /dev/null +++ b/03_dom/uebungen/u08-09_newsboard/assets/css/main.css @@ -0,0 +1,239 @@ +* { + margin: 0; +} +html { + font-size: 100%; + padding: 0; + background-attachment: fixed; + background-image: -webkit-linear-gradient(top, #eef0f2, #d3d5d9); + background-image: -moz-linear-gradient(top, #eef0f2, #d3d5d9); + background-image: linear-gradient(to bottom, #eef0f2, #d3d5d9); +} +body { + color: #333; + font-size: 1em; + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + text-align: left; + margin: 1em; + padding: 0; +} +p, +h1, +h2, +h3, +h4, +h5, +h6 { + margin-bottom: 1rem; +} +p { + line-height: 1.5em; + -webkit-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; +} +p:last-child { + margin-bottom: 0; +} +a { + color: #2f83e8; + text-decoration: none; +} +a:hover { + text-decoration: underline; +} +strong, +b { + font-weight: bold; +} +em, +i { + font-style: italic; +} +.float_left { + float: left; +} +.float_right { + float: right; +} +.disabled { + opacity: 0.4; + cursor: default; +} +.message_number { + color: #fff; + font-size: 0.8em; + font-weight: bold; + text-align: center; + line-height: 1em; + position: absolute; + top: -0.5em; + left: -0.5em; + display: block; + padding-top: 0.3em; + min-width: 2em; + height: 2em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + cursor: default; + background-color: #ea2314; + background-image: -webkit-linear-gradient(top, #f78f91, #c50404); + background-image: -moz-linear-gradient(top, #f78f91, #c50404); + background-image: linear-gradient(to bottom, #f78f91, #c50404); + border: 2px solid #fff; + -webkit-border-radius: 1em; + -moz-border-radius: 1em; + border-radius: 1em; + -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); + box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); +} +.newsboard_wrapper { + margin: 0 auto 2em auto; + padding: 13px 0 0 17px; + max-width: 550px; + position: relative; + background: url('../img/sheets.png') no-repeat; +} +.newsboard_wrapper:before { + content: url('../img/paperclip.png'); + position: absolute; + top: 5px; + right: 35px; + z-index: 1; +} +.newsboard_wrapper .newsboard { + padding: 29px 1.25rem 4rem 1.25rem; + min-height: 20em; + position: relative; + border: 1px solid #ccc; + background-color: #fff; + background-image: -webkit-linear-gradient(#dddddd, #ffffff 1px); + background-image: -moz-linear-gradient(#dddddd, #ffffff 1px); + background-image: linear-gradient(#dddddd, #ffffff 1px); + background-position: 0 1.3em; + -webkit-background-size: 100% 1.5em; + -moz-background-size: 100% 1.5em; + background-size: 100% 1.5em; + -webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3); +} +.newsboard_wrapper .newsboard .close_button { + color: #777; + font-size: 1.2em; + text-decoration: none; + line-height: 1em; + position: absolute; + top: 10px; + right: 14px; + display: block; +} +.newsboard_wrapper .newsboard .close_button:hover { + color: #444; +} +.newsboard_wrapper .newsboard .newsboard_footer { + color: #999; + font-size: 0.8em; +} +.newsboard_wrapper .newsboard .paging_bar { + font-size: 1.8em; + padding: 0 1.25rem; + position: absolute; + left: 0; + right: 0; + bottom: 1rem; + white-space: nowrap; +} +.newsboard_wrapper .newsboard .paging_bar .float_left a, +.newsboard_wrapper .newsboard .paging_bar .float_right a { + color: #777; + text-decoration: none; +} +.newsboard_wrapper .newsboard .paging_bar .float_left a { + margin-right: 0.3em; +} +.newsboard_wrapper .newsboard .paging_bar .float_right a { + margin-left: 0.3em; +} +.newsboard_wrapper .newsboard .paging_bar .progressbar { + display: block; + width: 40%; + margin: 0 auto; +} +.newsboard_wrapper .newsboard .paging_bar progress { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + vertical-align: 0; + line-height: normal; + color: #2f83e8; + width: 100%; + height: 0.6rem; + border-style: none; + padding: 0; + background-color: #eee; + -webkit-border-radius: 0.3rem; + -moz-border-radius: 0.3rem; + border-radius: 0.3rem; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); +} +.newsboard_wrapper .newsboard .paging_bar progress::-webkit-progress-bar { + padding: 0; + border-style: none; + background-color: transparent; +} +.newsboard_wrapper .newsboard .paging_bar progress::-webkit-progress-value { + -webkit-border-radius: 0.3rem; + border-radius: 0.3rem; + background-color: #2f83e8; + background-image: -webkit-linear-gradient(top, #8bbaf2, #176acd); + background-image: linear-gradient(to bottom, #8bbaf2, #176acd); +} +.newsboard_wrapper .newsboard .paging_bar progress::-moz-progress-bar { + -moz-border-radius: 0.3rem; + border-radius: 0.3rem; + background-color: #2f83e8; + background-image: -moz-linear-gradient(top, #8bbaf2, #176acd); + background-image: linear-gradient(to bottom, #8bbaf2, #176acd); +} +.newsboard_wrapper .newsboard .newsboard_content h1, +.newsboard_wrapper .newsboard .newsboard_content h2 { + font-weight: normal; + font-family: + 'Helvetica Neue Light', 'HelveticaNeue-Light', 'Helvetica Light', 'Helvetica-Light', Helvetica, Arial, sans-serif; + letter-spacing: 0.03em; +} +.newsboard_wrapper .newsboard .newsboard_content h1 { + font-size: 1.75em; +} +.newsboard_wrapper .newsboard .newsboard_content h2 { + color: #2f83e8; + font-size: 1.2em; + line-height: 1.4em; +} +.newsboard_wrapper .newsboard .newsboard_content:empty { + color: #999; + font-size: 1.15em; + text-align: center; + padding-top: 10.5rem; + background: url('../img/empty.png') no-repeat center 3.75rem; +} +.newsboard_wrapper .newsboard .newsboard_content:empty:after { + content: 'Keine neuen Mitteilungen.'; +} + +.sr-only { + width: 1px !important; + height: 1px !important; + padding: 0 !important; + margin: -1px !important; + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; + white-space: nowrap !important; + border: 0 !important; + display: inline-block !important; +} diff --git a/03_dom/uebungen/u08-09_newsboard/assets/img/empty.png b/03_dom/uebungen/u08-09_newsboard/assets/img/empty.png new file mode 100644 index 0000000..d650b1b Binary files /dev/null and b/03_dom/uebungen/u08-09_newsboard/assets/img/empty.png differ diff --git a/03_dom/uebungen/u08-09_newsboard/assets/img/paperclip.png b/03_dom/uebungen/u08-09_newsboard/assets/img/paperclip.png new file mode 100644 index 0000000..7f24721 Binary files /dev/null and b/03_dom/uebungen/u08-09_newsboard/assets/img/paperclip.png differ diff --git a/03_dom/uebungen/u08-09_newsboard/assets/img/sheets.png b/03_dom/uebungen/u08-09_newsboard/assets/img/sheets.png new file mode 100644 index 0000000..14680cb Binary files /dev/null and b/03_dom/uebungen/u08-09_newsboard/assets/img/sheets.png differ diff --git a/03_dom/uebungen/u08-09_newsboard/assets/js/main.js b/03_dom/uebungen/u08-09_newsboard/assets/js/main.js new file mode 100644 index 0000000..d5f6676 --- /dev/null +++ b/03_dom/uebungen/u08-09_newsboard/assets/js/main.js @@ -0,0 +1,73 @@ +'use strict'; + +(() => { + // === DOM & VARS ======= + const module = document.querySelector('.newsboard') || console.error('newsboard not found'); + const DOM = { + messageNumber: module.querySelector('.message_number'), + newsboardContent: module.querySelector('.newsboard_content'), + buttonNext: module.querySelector('.button-next'), + buttonLast: module.querySelector('.button-last'), + buttonPrev: module.querySelector('.button-prev'), + buttonFirst: module.querySelector('.button-first'), + progressBar: module.querySelector('.progressbar progress'), + }; + + console.log(DOM); + + // === INIT ============= + const init = () => { + // Funktionaufrufe zu beginn der Anwendung + showMessageByNumber(1); + initProgressbar(); + + // Eventlauscher zu beginn der Anwendung + DOM.buttonNext.addEventListener('click', onClickNext); + DOM.buttonPrev.addEventListener('click', onClickPrev); + window.addEventListener('keyup', onKeyUp); + }; + + // === EVENTHANDLER ===== + const onKeyUp = (e) => { + // Übung 8.3 && 8.4 Tastatursteuerung + }; + + const onClickNext = (e) => { + showMessageByNumber((DOM.progressBar.value += 1)); + }; + const onClickPrev = (e) => { + showMessageByNumber((DOM.progressBar.value -= 1)); + }; + // === XHR/FETCH ======== + + // === FUNCTIONS ======== + const showMessageByNumber = (n) => { + DOM.newsboardContent.innerHTML = MESSAGES[n - 1]; + }; + + const initProgressbar = () => { + DOM.progressBar.max = MESSAGES.length; + DOM.progressBar.value = 1; + }; + + init(); +})(); + +// Übung 8: Newsboard: Das geht noch besser +// Das Newsboard wartet noch auf das Vervollständigen seiner Funktionen. + +// 1. Belege die Links » und « mit Funktionalität. Der Link mit der Aufschrift « soll es erlauben, zur ersten Nachricht zu springen, der Link » zur letzten. + +// 2. Der bisher eher sinnlose rote Kreis in der linken oberen Ecke soll nun die Gesamtanzahl der Nachrichten anzeigen. Schreibe eine Funktion, die diese Anzahl ausliest und in das mit der Klasse message_number einträgt. + +// 3. Unterstütze ab sofort das Navigieren durch die News mit der Tastatur. Die Pfeiltasten nach links und rechts sollen dabei jeweils die gleiche Funktionalität wie die Buttons < und > ermöglichen. + +// 4. Auch das Springen auf die erste bzw. letzte Position soll nun mit Tastatur möglich sein. Die Tastenkombination dafür ist alt und die Pfeiltaste nach links (zur ersten Nachricht) bzw. rechts (zur letzten Nachricht). + +// Übung 9: Newsboard: Jetzt ist aber Schluss! + +// Die neuen Features des Newsboards sind schon fast fertig. Problematisch ist aber, dass die Vorwärts- und Rückwärts-Buttons auch aktiv sind, wenn es keine vorige bzw. nächste Nachricht mehr gibt. Dies führt zu einem sehr unschönen Fehler. + +// 2. Sorge dafür, dass die Vor- und Rückwärts-Buttons jeweils deaktiviert werden, sobald der Anwender am Anfang bzw. Ende der Nachrichtenliste angekommen ist. + +// 3. Auch die Buttons, die den Anwender zur ersten bzw. zur letzten Nachricht führen, sollen deaktiviert sein, sobald sich der Anwender bei der ersten bzw. letzten Nachricht befindet. diff --git a/03_dom/uebungen/u08-09_newsboard/assets/js/messages.js b/03_dom/uebungen/u08-09_newsboard/assets/js/messages.js new file mode 100644 index 0000000..0b78d36 --- /dev/null +++ b/03_dom/uebungen/u08-09_newsboard/assets/js/messages.js @@ -0,0 +1,19 @@ +// Konfigurationsvariablen + +const MESSAGES = [ + `

Tutors are on a strike!!!

+

All assignmnent are automatically graded with 0 points

+

Duis pretium ornare odio nec cursus. Nulla quis dolor vitae nulla condimentum maximus nec vitae purus. Curabitur ut mi non nulla molestie porta. Curabitur dignissim lacinia condimentum. In hac habitasse platea dictumst. Mauris ut urna magna. Mauris venenatis eu quam nec posuere. Nulla facilisi. Donec convallis sodales massa, et consequat nunc vehicula malesuada.

+

9/25/2015 by N. O'body

`, + + `

Madness!

+

How to earn a fortune, with a complete stupid idea

+

Ut molestie elementum risus, eget rutrum dui tristique id. Duis ac elit a mi convallis lacinia. Sed at ultricies magna. Pellentesque nisl est, mattis eget porta eu, rhoncus in urna. Integer faucibus lectus nec malesuada tempus. Duis consectetur sollicitudin ultricies. Cras massa nulla, aliquet vitae interdum quis, venenatis at quam.

+

08/13/2019 by Dr. Ken Hurt

`, + + `

I did something, and you will never guess what happened next...

+

Donec tristique, leo at suscipit pellentesque, mauris neque congue leo!

+

Aenean egestas mauris at neque egestas hendrerit id ut erat. Donec iaculis ornare gravida. Vestibulum condimentum, tortor nec eleifend consectetur, justo lacus dignissim ante, eget commodo enim urna sollicitudin arcu. Odio eu leo pulvinar rutrum sed a turpis. Nunc dui tortor, rutrum vitae gravida quis, hendrerit a massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas

+

Integer non venenatis tellus. Phasellus tellus leo, suscipit ac vulputate non, varius nec eros. Etiam scelerisque nisi arcu, interdum tempus dui volutpat vel. Donec eget posuere nulla. Etiam ornare dapibus tortor, ac sollicitudin nisi porta a. Donec tristique, leo at suscipit pellentesque, mauris neque congue leo, sed tempor massa justo a ligula. Curabitur vitae rhoncus lacus, quis varius felis. Ut tincidunt sit amet nisl finibus tempus. Curabitur mollis sit amet leo a sagittis.

+

2015/06/02 by Chris P. Bacon

`, +]; diff --git a/03_dom/uebungen/u08-09_newsboard/index.html b/03_dom/uebungen/u08-09_newsboard/index.html new file mode 100644 index 0000000..d4137ff --- /dev/null +++ b/03_dom/uebungen/u08-09_newsboard/index.html @@ -0,0 +1,54 @@ + + + + + + Newsboard + + + + + + + + + +
+
+ X + + × + +
+ +
+ + + + + + + + + + + + + +
+
+
+ + diff --git a/03_dom/uebungen/u10_running-lights/assets/css/main.css b/03_dom/uebungen/u10_running-lights/assets/css/main.css new file mode 100644 index 0000000..0a9dcdd --- /dev/null +++ b/03_dom/uebungen/u10_running-lights/assets/css/main.css @@ -0,0 +1,4 @@ +.light-bulbs{ + padding: 1rem; + border: 2px solid #555; +} \ No newline at end of file diff --git a/03_dom/uebungen/u10_running-lights/assets/img/light_off.png b/03_dom/uebungen/u10_running-lights/assets/img/light_off.png new file mode 100644 index 0000000..4043472 Binary files /dev/null and b/03_dom/uebungen/u10_running-lights/assets/img/light_off.png differ diff --git a/03_dom/uebungen/u10_running-lights/assets/img/light_on.png b/03_dom/uebungen/u10_running-lights/assets/img/light_on.png new file mode 100644 index 0000000..0230d78 Binary files /dev/null and b/03_dom/uebungen/u10_running-lights/assets/img/light_on.png differ diff --git a/03_dom/uebungen/u10_running-lights/assets/js/libs/helpers.js b/03_dom/uebungen/u10_running-lights/assets/js/libs/helpers.js new file mode 100644 index 0000000..097d2c2 --- /dev/null +++ b/03_dom/uebungen/u10_running-lights/assets/js/libs/helpers.js @@ -0,0 +1,92 @@ +// Helper DOM Selektion mit $ & $$ +const $ = (qs) => document.querySelector(qs); +const $$ = (qs) => Array.from(document.querySelectorAll(qs)); + +Node.prototype.on = function(name, fn) { + this.addEventListener(name, fn); + return this; +}; + +// // anstatt +// document.querySelector('button').addEventListener('click', (event) => { }); +// // wird zu: +// document.querySelector('button').on('click', (event) => { }); + +Array.prototype.on = Array.prototype.addEventListener = function(name, fn) { + this.forEach((elem) => elem.on(name, fn)); + return this; +}; + +// anstatt +// Array.from(document.querySelectorAll('.menu-main li a')).forEach((elem) => +// elem.addEventListener('click', (event) => { +// console.log(event); +// }) +// ); +// // wird zu +// Array.from(document.querySelectorAll('.menu-main li a')).on( +// 'click', +// (event) => { +// console.log(event); +// } +// ); + + + +// helper +const $on = (el, ev, fn) => { + Array.isArray(el) ? el.forEach(ae => $on(ae, ev, fn)) : + el.addEventListener(ev, fn); + return el; +}; + +// times - funktion +function times(n, fn) { + const result = Array(n); + for (let i = 0; i < n; i++) { + result[i] = fn(i); + } + return result; +} +// oder von lodash +function baseTimes(n, iteratee) { + var index = -1, + result = Array(n); + + while (++index < n) { + result[index] = iteratee(index); + } + return result; +} + +/* + * range(zahl bis wohin array befüllt werden soll) : array + * - array von 0 bis + parameterzahl (nicht inklusive) + * + * range(anfangswert, endwert) : array + * - array von anfangswert bis endwert (nicht inklusive) + * + * range(nfangswert, endwert, übersprungswert) : : array + * - array von anfangswert bis endwert (nicht inklusive), zwischenwerte durch übersprungswert entfallen +*/ +function rangeFromStartToEnd(start, end, step = 1) { + const length = Math.max(Math.ceil((end - start) / step), 0); + const result = new Array(length); + const sign = step / Math.abs(step); + + let index = 0; + for (let value = start; value * sign < end * sign; value += step) { + result[index++] = value; + } + return result; +}; + + +function range(startOrEnd, end, step) { + if (end) { + return rangeFromStartToEnd(startOrEnd, end, step); + } else { + return rangeFromStartToEnd(0, startOrEnd); + } +}; diff --git a/03_dom/uebungen/u10_running-lights/assets/js/libs/jquery.min.js b/03_dom/uebungen/u10_running-lights/assets/js/libs/jquery.min.js new file mode 100644 index 0000000..b061403 --- /dev/null +++ b/03_dom/uebungen/u10_running-lights/assets/js/libs/jquery.min.js @@ -0,0 +1,2 @@ +/*! jQuery v3.5.1 | (c) JS Foundation and other contributors | jquery.org/license */ +!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,g=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType},x=function(e){return null!=e&&e===e.window},E=C.document,c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.5.1",S=function(e,t){return new S.fn.init(e,t)};function p(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp(F),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+F),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+R+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\[\\da-fA-F]{1,6}"+M+"?|\\\\([^\\r\\n\\f])","g"),ne=function(e,t){var n="0x"+e.slice(1)-65536;return t||(n<0?String.fromCharCode(n+65536):String.fromCharCode(n>>10|55296,1023&n|56320))},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){T()},ae=be(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{H.apply(t=O.call(p.childNodes),p.childNodes),t[p.childNodes.length].nodeType}catch(e){H={apply:t.length?function(e,t){L.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&(T(e),e=e||C,E)){if(11!==p&&(u=Z.exec(t)))if(i=u[1]){if(9===p){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return H.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&d.getElementsByClassName&&e.getElementsByClassName)return H.apply(n,e.getElementsByClassName(i)),n}if(d.qsa&&!N[t+" "]&&(!v||!v.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===p&&(U.test(t)||z.test(t))){(f=ee.test(t)&&ye(e.parentNode)||e)===e&&d.scope||((s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=S)),o=(l=h(t)).length;while(o--)l[o]=(s?"#"+s:":scope")+" "+xe(l[o]);c=l.join(",")}try{return H.apply(n,f.querySelectorAll(c)),n}catch(e){N(t,!0)}finally{s===S&&e.removeAttribute("id")}}}return g(t.replace($,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[S]=!0,e}function ce(e){var t=C.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)b.attrHandle[n[r]]=t}function pe(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function de(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in d=se.support={},i=se.isXML=function(e){var t=e.namespaceURI,n=(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},T=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:p;return r!=C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,E=!i(C),p!=C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.scope=ce(function(e){return a.appendChild(e).appendChild(C.createElement("div")),"undefined"!=typeof e.querySelectorAll&&!e.querySelectorAll(":scope fieldset div").length}),d.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),d.getElementsByTagName=ce(function(e){return e.appendChild(C.createComment("")),!e.getElementsByTagName("*").length}),d.getElementsByClassName=K.test(C.getElementsByClassName),d.getById=ce(function(e){return a.appendChild(e).id=S,!C.getElementsByName||!C.getElementsByName(S).length}),d.getById?(b.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=d.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):d.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},b.find.CLASS=d.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(d.qsa=K.test(C.querySelectorAll))&&(ce(function(e){var t;a.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+S+"-]").length||v.push("~="),(t=C.createElement("input")).setAttribute("name",""),e.appendChild(t),e.querySelectorAll("[name='']").length||v.push("\\["+M+"*name"+M+"*="+M+"*(?:''|\"\")"),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+S+"+*").length||v.push(".#.+[+~]"),e.querySelectorAll("\\\f"),v.push("[\\r\\n\\f]")}),ce(function(e){e.innerHTML="";var t=C.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(d.matchesSelector=K.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){d.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",F)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=K.test(a.compareDocumentPosition),y=t||K.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},D=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)==(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!d.sortDetached&&t.compareDocumentPosition(e)===n?e==C||e.ownerDocument==p&&y(p,e)?-1:t==C||t.ownerDocument==p&&y(p,t)?1:u?P(u,e)-P(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e==C?-1:t==C?1:i?-1:o?1:u?P(u,e)-P(u,t):0;if(i===o)return pe(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?pe(a[r],s[r]):a[r]==p?-1:s[r]==p?1:0}),C},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if(T(e),d.matchesSelector&&E&&!N[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{var n=c.call(e,t);if(n||d.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){N(t,!0)}return 0":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return G.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=m[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&m(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function D(e,n,r){return m(n)?S.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?S.grep(e,function(e){return e===n!==r}):"string"!=typeof n?S.grep(e,function(e){return-1)[^>]*|#([\w-]+))$/;(S.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||j,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:q.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof S?t[0]:t,S.merge(this,S.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:E,!0)),N.test(r[1])&&S.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=E.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(S):S.makeArray(e,this)}).prototype=S.fn,j=S(E);var L=/^(?:parents|prev(?:Until|All))/,H={children:!0,contents:!0,next:!0,prev:!0};function O(e,t){while((e=e[t])&&1!==e.nodeType);return e}S.fn.extend({has:function(e){var t=S(e,this),n=t.length;return this.filter(function(){for(var e=0;e\x20\t\r\n\f]*)/i,he=/^$|^module$|\/(?:java|ecma)script/i;ce=E.createDocumentFragment().appendChild(E.createElement("div")),(fe=E.createElement("input")).setAttribute("type","radio"),fe.setAttribute("checked","checked"),fe.setAttribute("name","t"),ce.appendChild(fe),y.checkClone=ce.cloneNode(!0).cloneNode(!0).lastChild.checked,ce.innerHTML="",y.noCloneChecked=!!ce.cloneNode(!0).lastChild.defaultValue,ce.innerHTML="",y.option=!!ce.lastChild;var ge={thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};function ve(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&A(e,t)?S.merge([e],n):n}function ye(e,t){for(var n=0,r=e.length;n",""]);var me=/<|&#?\w+;/;function xe(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),p=[],d=0,h=e.length;d\s*$/g;function qe(e,t){return A(e,"table")&&A(11!==t.nodeType?t:t.firstChild,"tr")&&S(e).children("tbody")[0]||e}function Le(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function He(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Oe(e,t){var n,r,i,o,a,s;if(1===t.nodeType){if(Y.hasData(e)&&(s=Y.get(e).events))for(i in Y.remove(t,"handle events"),s)for(n=0,r=s[i].length;n").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on("load error",i=function(e){r.remove(),i=null,e&&t("error"===e.type?404:200,e.type)}),E.head.appendChild(r[0])},abort:function(){i&&i()}}});var Ut,Xt=[],Vt=/(=)\?(?=&|$)|\?\?/;S.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=Xt.pop()||S.expando+"_"+Ct.guid++;return this[e]=!0,e}}),S.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Vt.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Vt.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return r=e.jsonpCallback=m(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Vt,"$1"+r):!1!==e.jsonp&&(e.url+=(Et.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||S.error(r+" was not called"),o[0]},e.dataTypes[0]="json",i=C[r],C[r]=function(){o=arguments},n.always(function(){void 0===i?S(C).removeProp(r):C[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,Xt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),"script"}),y.createHTMLDocument=((Ut=E.implementation.createHTMLDocument("").body).innerHTML="
",2===Ut.childNodes.length),S.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(y.createHTMLDocument?((r=(t=E.implementation.createHTMLDocument("")).createElement("base")).href=E.location.href,t.head.appendChild(r)):t=E),o=!n&&[],(i=N.exec(e))?[t.createElement(i[1])]:(i=xe([e],t,o),o&&o.length&&S(o).remove(),S.merge([],i.childNodes)));var r,i,o},S.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1").append(S.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},S.expr.pseudos.animated=function(t){return S.grep(S.timers,function(e){return t===e.elem}).length},S.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=S.css(e,"position"),c=S(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=S.css(e,"top"),u=S.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),m(t)&&(t=t.call(e,n,S.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):("number"==typeof f.top&&(f.top+="px"),"number"==typeof f.left&&(f.left+="px"),c.css(f))}},S.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){S.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===S.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===S.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=S(e).offset()).top+=S.css(e,"borderTopWidth",!0),i.left+=S.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-S.css(r,"marginTop",!0),left:t.left-i.left-S.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===S.css(e,"position"))e=e.offsetParent;return e||re})}}),S.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;S.fn[t]=function(e){return $(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),S.each(["top","left"],function(e,n){S.cssHooks[n]=$e(y.pixelPosition,function(e,t){if(t)return t=Be(e,n),Me.test(t)?S(e).position()[n]+"px":t})}),S.each({Height:"height",Width:"width"},function(a,s){S.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){S.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return $(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?S.css(e,t,i):S.style(e,t,n,i)},s,n?e:void 0,n)}})}),S.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){S.fn[t]=function(e){return this.on(t,e)}}),S.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),S.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){S.fn[n]=function(e,t){return 0 { + // === DOM & VARS ======= + const DOM = {}; + + const LIGHT_PATH_ON = 'assets/img/light_on.png'; + const LIGHT_PATH_OFF = 'assets/img/light_off.png'; + + // === INIT ============= + const init = () => {}; + + // === EVENTHANDLER ===== + + // === XHR/FETCH ======== + + // === FUNCTIONS ======== + + init(); +})(); diff --git a/03_dom/uebungen/u10_running-lights/index.html b/03_dom/uebungen/u10_running-lights/index.html new file mode 100644 index 0000000..203d0ee --- /dev/null +++ b/03_dom/uebungen/u10_running-lights/index.html @@ -0,0 +1,41 @@ + + + + + + Übung 10 - Chasing Lights + + + + + +
+
+

Übung 10 - Chasing Lights

+ +

+ Eine erste Variante sind die chasing Lights. Dabei muss der Anwender das Lauflicht mit der Maus »jagen«. Immer + wenn der Mauszeiger sich über einer Glühbirne befindet, schaltet sich die nächste Birne ein und die aktuelle + aus. Versucht der Benutzer, mit dem Mauszeiger die leuchtende Glühbirne zu berühren, springt das Licht auf die + nächste über. Er »jagt« quasi das Lauflicht. Bei der letzten Lampe beginnt das Spiel wieder von vorn! +

+

+ Programmiere ein weiteres Lauflicht. Diesmal soll das Lauflicht weiterspringen, wenn der Benutzer auf eine der + Lampen klickt. Auch hier gilt: Nach der letzten Lampe fängt das Licht wieder von vorn an zu laufen. +

+
+
+ lightbulb + lightbulb + lightbulb + lightbulb + lightbulb + lightbulb + lightbulb + lightbulb + lightbulb + lightbulb +
+
+ + diff --git a/03_dom/uebungen/uebungen-8-10.zip b/03_dom/uebungen/uebungen-8-10.zip new file mode 100644 index 0000000..04046be Binary files /dev/null and b/03_dom/uebungen/uebungen-8-10.zip differ diff --git a/03_dom/unterricht/tag23/03_newsboard-lernheft/assets/js/main.js b/03_dom/unterricht/tag23/03_newsboard-lernheft/assets/js/main.js index e69de29..0ed6caa 100644 --- a/03_dom/unterricht/tag23/03_newsboard-lernheft/assets/js/main.js +++ b/03_dom/unterricht/tag23/03_newsboard-lernheft/assets/js/main.js @@ -0,0 +1,50 @@ +'use strict'; + +{ + const init = () => { + showFirstMessage(); + $('[title=next]').addEventListener('click', nextMessage); + $('[title=prev]').addEventListener('click', prevMessage); + }; + + const showFirstMessage = () => showMessageByNumber(1); + + const showMessageByNumber = (messageNumber) => { + $('.newsboard_content').innerHTML = messages[messageNumber - 1]; + }; + + const nextMessage = (e) => { + e.preventDefault(); // Standardverhalten unterbinden + showMessageByNumber(++currentMessageNumber); + console.log('next'); + }; + const prevMessage = (e) => { + e.preventDefault(); // Standardverhalten unterbinden + showMessageByNumber(--currentMessageNumber); + console.log('prev'); + }; + + const messages = [ + `

Tutors are on a strike!!!

+

All assignmnent are automatically graded with 0 points

+

Duis pretium ornare odio nec cursus. Nulla quis dolor vitae nulla condimentum maximus nec vitae purus. Curabitur ut mi non nulla molestie porta. Curabitur dignissim lacinia condimentum. In hac habitasse platea dictumst. Mauris ut urna magna. Mauris venenatis eu quam nec posuere. Nulla facilisi. Donec convallis sodales massa, et consequat nunc vehicula malesuada.

+

9/25/2015 by N. O'body

`, + + `

Madness!

+

How to earn a fortune, with a complete stupid idea

+

Ut molestie elementum risus, eget rutrum dui tristique id. Duis ac elit a mi convallis lacinia. Sed at ultricies magna. Pellentesque nisl est, mattis eget porta eu, rhoncus in urna. Integer faucibus lectus nec malesuada tempus. Duis consectetur sollicitudin ultricies. Cras massa nulla, aliquet vitae interdum quis, venenatis at quam.

+

08/13/20156 by Dr. Ken Hurt

`, + + `

I did something, and you will never guess what happened next...

+

Donec tristique, leo at suscipit pellentesque, mauris neque congue leo!

+

Aenean egestas mauris at neque egestas hendrerit id ut erat. Donec iaculis ornare gravida. Vestibulum condimentum, tortor nec eleifend consectetur, justo lacus dignissim ante, eget commodo enim urna sollicitudin arcu. Odio eu leo pulvinar rutrum sed a turpis. Nunc dui tortor, rutrum vitae gravida quis, hendrerit a massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas

+

Integer non venenatis tellus. Phasellus tellus leo, suscipit ac vulputate non, varius nec eros. Etiam scelerisque nisi arcu, interdum tempus dui volutpat vel. Donec eget posuere nulla. Etiam ornare dapibus tortor, ac sollicitudin nisi porta a. Donec tristique, leo at suscipit pellentesque, mauris neque congue leo, sed tempor massa justo a ligula. Curabitur vitae rhoncus lacus, quis varius felis. Ut tincidunt sit amet nisl finibus tempus. Curabitur mollis sit amet leo a sagittis.

+

2015/06/02 by Chris P. Bacon

`, + ]; + let currentMessageNumber = 1; + + const $ = (qs) => document.querySelector(qs); + const $$ = (qs) => Array.from(document.querySelectorAll(qs)); + + init(); +} diff --git a/03_dom/unterricht/tag23/03_newsboard-lernheft/index.html b/03_dom/unterricht/tag23/03_newsboard-lernheft/index.html index be24e1e..9c007ea 100644 --- a/03_dom/unterricht/tag23/03_newsboard-lernheft/index.html +++ b/03_dom/unterricht/tag23/03_newsboard-lernheft/index.html @@ -13,7 +13,7 @@
- 3 + X × diff --git a/03_dom/unterricht/tag23/04_newsboard-refactored/assets/css/main.css b/03_dom/unterricht/tag23/04_newsboard-refactored/assets/css/main.css new file mode 100644 index 0000000..60e194c --- /dev/null +++ b/03_dom/unterricht/tag23/04_newsboard-refactored/assets/css/main.css @@ -0,0 +1,239 @@ +* { + margin: 0; +} +html { + font-size: 100%; + padding: 0; + background-attachment: fixed; + background-image: -webkit-linear-gradient(top, #eef0f2, #d3d5d9); + background-image: -moz-linear-gradient(top, #eef0f2, #d3d5d9); + background-image: linear-gradient(to bottom, #eef0f2, #d3d5d9); +} +body { + color: #333; + font-size: 1em; + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + text-align: left; + margin: 1em; + padding: 0; +} +p, +h1, +h2, +h3, +h4, +h5, +h6 { + margin-bottom: 1rem; +} +p { + line-height: 1.5em; + -webkit-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; +} +p:last-child { + margin-bottom: 0; +} +a { + color: #2f83e8; + text-decoration: none; +} +a:hover { + text-decoration: underline; +} +strong, +b { + font-weight: bold; +} +em, +i { + font-style: italic; +} +.float_left { + float: left; +} +.float_right { + float: right; +} +.disabled { + opacity: 0.4; + cursor: default; +} +.message_number { + color: #fff; + font-size: 0.8em; + font-weight: bold; + text-align: center; + line-height: 1em; + position: absolute; + top: -0.5em; + left: -0.5em; + display: block; + padding-top: 0.3em; + min-width: 2em; + height: 2em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + cursor: default; + background-color: #ea2314; + background-image: -webkit-linear-gradient(top, #f78f91, #c50404); + background-image: -moz-linear-gradient(top, #f78f91, #c50404); + background-image: linear-gradient(to bottom, #f78f91, #c50404); + border: 2px solid #fff; + -webkit-border-radius: 1em; + -moz-border-radius: 1em; + border-radius: 1em; + -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); + box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); +} +.newsboard_wrapper { + margin: 0 auto 2em auto; + padding: 13px 0 0 17px; + max-width: 550px; + position: relative; + background: url('../img/sheets.png') no-repeat; +} +.newsboard_wrapper:before { + content: url('../img/paperclip.png'); + position: absolute; + top: 5px; + right: 35px; + z-index: 1; +} +.newsboard_wrapper .newsboard { + padding: 29px 1.25rem 4rem 1.25rem; + min-height: 20em; + position: relative; + border: 1px solid #ccc; + background-color: #fff; + background-image: -webkit-linear-gradient(#dddddd, #ffffff 1px); + background-image: -moz-linear-gradient(#dddddd, #ffffff 1px); + background-image: linear-gradient(#dddddd, #ffffff 1px); + background-position: 0 1.3em; + -webkit-background-size: 100% 1.5em; + -moz-background-size: 100% 1.5em; + background-size: 100% 1.5em; + -webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3); +} +.newsboard_wrapper .newsboard .close_button { + color: #777; + font-size: 1.2em; + text-decoration: none; + line-height: 1em; + position: absolute; + top: 10px; + right: 14px; + display: block; +} +.newsboard_wrapper .newsboard .close_button:hover { + color: #444; +} +.newsboard_wrapper .newsboard .newsboard_footer { + color: #999; + font-size: 0.8em; +} +.newsboard_wrapper .newsboard .paging_bar { + font-size: 1.8em; + padding: 0 1.25rem; + position: absolute; + left: 0; + right: 0; + bottom: 1rem; + white-space: nowrap; +} +.newsboard_wrapper .newsboard .paging_bar .float_left a, +.newsboard_wrapper .newsboard .paging_bar .float_right a { + color: #777; + text-decoration: none; +} +.newsboard_wrapper .newsboard .paging_bar .float_left a { + margin-right: 0.3em; +} +.newsboard_wrapper .newsboard .paging_bar .float_right a { + margin-left: 0.3em; +} +.newsboard_wrapper .newsboard .paging_bar .progressbar { + display: block; + width: 40%; + margin: 0 auto; +} +.newsboard_wrapper .newsboard .paging_bar progress { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + vertical-align: 0; + line-height: normal; + color: #2f83e8; + width: 100%; + height: 0.6rem; + border-style: none; + padding: 0; + background-color: #eee; + -webkit-border-radius: 0.3rem; + -moz-border-radius: 0.3rem; + border-radius: 0.3rem; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); +} +.newsboard_wrapper .newsboard .paging_bar progress::-webkit-progress-bar { + padding: 0; + border-style: none; + background-color: transparent; +} +.newsboard_wrapper .newsboard .paging_bar progress::-webkit-progress-value { + -webkit-border-radius: 0.3rem; + border-radius: 0.3rem; + background-color: #2f83e8; + background-image: -webkit-linear-gradient(top, #8bbaf2, #176acd); + background-image: linear-gradient(to bottom, #8bbaf2, #176acd); +} +.newsboard_wrapper .newsboard .paging_bar progress::-moz-progress-bar { + -moz-border-radius: 0.3rem; + border-radius: 0.3rem; + background-color: #2f83e8; + background-image: -moz-linear-gradient(top, #8bbaf2, #176acd); + background-image: linear-gradient(to bottom, #8bbaf2, #176acd); +} +.newsboard_wrapper .newsboard .newsboard_content h1, +.newsboard_wrapper .newsboard .newsboard_content h2 { + font-weight: normal; + font-family: + 'Helvetica Neue Light', 'HelveticaNeue-Light', 'Helvetica Light', 'Helvetica-Light', Helvetica, Arial, sans-serif; + letter-spacing: 0.03em; +} +.newsboard_wrapper .newsboard .newsboard_content h1 { + font-size: 1.75em; +} +.newsboard_wrapper .newsboard .newsboard_content h2 { + color: #2f83e8; + font-size: 1.2em; + line-height: 1.4em; +} +.newsboard_wrapper .newsboard .newsboard_content:empty { + color: #999; + font-size: 1.15em; + text-align: center; + padding-top: 10.5rem; + background: url('../img/empty.png') no-repeat center 3.75rem; +} +.newsboard_wrapper .newsboard .newsboard_content:empty:after { + content: 'Keine neuen Mitteilungen.'; +} + +.sr-only { + width: 1px !important; + height: 1px !important; + padding: 0 !important; + margin: -1px !important; + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; + white-space: nowrap !important; + border: 0 !important; + display: inline-block !important; +} diff --git a/03_dom/unterricht/tag23/04_newsboard-refactored/assets/img/empty.png b/03_dom/unterricht/tag23/04_newsboard-refactored/assets/img/empty.png new file mode 100644 index 0000000..d650b1b Binary files /dev/null and b/03_dom/unterricht/tag23/04_newsboard-refactored/assets/img/empty.png differ diff --git a/03_dom/unterricht/tag23/04_newsboard-refactored/assets/img/paperclip.png b/03_dom/unterricht/tag23/04_newsboard-refactored/assets/img/paperclip.png new file mode 100644 index 0000000..7f24721 Binary files /dev/null and b/03_dom/unterricht/tag23/04_newsboard-refactored/assets/img/paperclip.png differ diff --git a/03_dom/unterricht/tag23/04_newsboard-refactored/assets/img/sheets.png b/03_dom/unterricht/tag23/04_newsboard-refactored/assets/img/sheets.png new file mode 100644 index 0000000..14680cb Binary files /dev/null and b/03_dom/unterricht/tag23/04_newsboard-refactored/assets/img/sheets.png differ diff --git a/03_dom/unterricht/tag23/04_newsboard-refactored/assets/js/main.js b/03_dom/unterricht/tag23/04_newsboard-refactored/assets/js/main.js new file mode 100644 index 0000000..45975ed --- /dev/null +++ b/03_dom/unterricht/tag23/04_newsboard-refactored/assets/js/main.js @@ -0,0 +1,54 @@ +'use strict'; + +(() => { + // === DOM & VARS ======= + const module = document.querySelector('.newsboard') || console.error('newsboard not found'); + const DOM = { + messageNumber: module.querySelector('.message_number'), + newsboardContent: module.querySelector('.newsboard_content'), + buttonNext: module.querySelector('.button-next'), + buttonLast: module.querySelector('.button-last'), + buttonPrev: module.querySelector('.button-prev'), + buttonFirst: module.querySelector('.button-first'), + progressBar: module.querySelector('.progressbar progress'), + }; + + console.log(DOM); + + // === INIT ============= + const init = () => { + // Funktionaufrufe zu beginn der Anwendung + showMessageByNumber(1); + initProgressbar(); + + // Eventlauscher zu beginn der Anwendung + DOM.buttonNext.addEventListener('click', onClickNext); + DOM.buttonPrev.addEventListener('click', onClickPrev); + window.addEventListener('keyup', onKeyUp); + }; + + // === EVENTHANDLER ===== + const onKeyUp = (e) => { + // Übung 8.3 && 8.4 Tastatursteuerung + }; + + const onClickNext = (e) => { + showMessageByNumber((DOM.progressBar.value += 1)); + }; + const onClickPrev = (e) => { + showMessageByNumber((DOM.progressBar.value -= 1)); + }; + // === XHR/FETCH ======== + + // === FUNCTIONS ======== + const showMessageByNumber = (n) => { + DOM.newsboardContent.innerHTML = MESSAGES[n - 1]; + }; + + const initProgressbar = () => { + DOM.progressBar.max = MESSAGES.length; + DOM.progressBar.value = 1; + }; + + init(); +})(); diff --git a/03_dom/unterricht/tag23/04_newsboard-refactored/assets/js/messages.js b/03_dom/unterricht/tag23/04_newsboard-refactored/assets/js/messages.js new file mode 100644 index 0000000..0b78d36 --- /dev/null +++ b/03_dom/unterricht/tag23/04_newsboard-refactored/assets/js/messages.js @@ -0,0 +1,19 @@ +// Konfigurationsvariablen + +const MESSAGES = [ + `

Tutors are on a strike!!!

+

All assignmnent are automatically graded with 0 points

+

Duis pretium ornare odio nec cursus. Nulla quis dolor vitae nulla condimentum maximus nec vitae purus. Curabitur ut mi non nulla molestie porta. Curabitur dignissim lacinia condimentum. In hac habitasse platea dictumst. Mauris ut urna magna. Mauris venenatis eu quam nec posuere. Nulla facilisi. Donec convallis sodales massa, et consequat nunc vehicula malesuada.

+

9/25/2015 by N. O'body

`, + + `

Madness!

+

How to earn a fortune, with a complete stupid idea

+

Ut molestie elementum risus, eget rutrum dui tristique id. Duis ac elit a mi convallis lacinia. Sed at ultricies magna. Pellentesque nisl est, mattis eget porta eu, rhoncus in urna. Integer faucibus lectus nec malesuada tempus. Duis consectetur sollicitudin ultricies. Cras massa nulla, aliquet vitae interdum quis, venenatis at quam.

+

08/13/2019 by Dr. Ken Hurt

`, + + `

I did something, and you will never guess what happened next...

+

Donec tristique, leo at suscipit pellentesque, mauris neque congue leo!

+

Aenean egestas mauris at neque egestas hendrerit id ut erat. Donec iaculis ornare gravida. Vestibulum condimentum, tortor nec eleifend consectetur, justo lacus dignissim ante, eget commodo enim urna sollicitudin arcu. Odio eu leo pulvinar rutrum sed a turpis. Nunc dui tortor, rutrum vitae gravida quis, hendrerit a massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas

+

Integer non venenatis tellus. Phasellus tellus leo, suscipit ac vulputate non, varius nec eros. Etiam scelerisque nisi arcu, interdum tempus dui volutpat vel. Donec eget posuere nulla. Etiam ornare dapibus tortor, ac sollicitudin nisi porta a. Donec tristique, leo at suscipit pellentesque, mauris neque congue leo, sed tempor massa justo a ligula. Curabitur vitae rhoncus lacus, quis varius felis. Ut tincidunt sit amet nisl finibus tempus. Curabitur mollis sit amet leo a sagittis.

+

2015/06/02 by Chris P. Bacon

`, +]; diff --git a/03_dom/unterricht/tag23/04_newsboard-refactored/index.html b/03_dom/unterricht/tag23/04_newsboard-refactored/index.html new file mode 100644 index 0000000..d4137ff --- /dev/null +++ b/03_dom/unterricht/tag23/04_newsboard-refactored/index.html @@ -0,0 +1,54 @@ + + + + + + Newsboard + + + + + + + + + +
+
+ X + + × + +
+ +
+ + + + + + + + + + + + + +
+
+
+ + diff --git a/03_dom/unterricht/tag23/05_progress-element/index.html b/03_dom/unterricht/tag23/05_progress-element/index.html new file mode 100644 index 0000000..0fb7952 --- /dev/null +++ b/03_dom/unterricht/tag23/05_progress-element/index.html @@ -0,0 +1,108 @@ + + + + + + HTML5 - Progress Element | IDL vs. Content-Attribut + + + +
+
+

HTML5 - Progress Element | IDL vs. Content-Attribut

+
+
+
+
+
+ + +
+
+ +
+ +
+
+
+ + +
+
+ +
+ +
+
+
+ + + diff --git a/03_dom/unterricht/tag23/06_attribut-boolean/index.html b/03_dom/unterricht/tag23/06_attribut-boolean/index.html new file mode 100644 index 0000000..553f8cf --- /dev/null +++ b/03_dom/unterricht/tag23/06_attribut-boolean/index.html @@ -0,0 +1,90 @@ + + + + + + IDL (mit Boolean) vs Content Attribute (get|setAttribute) + + + +
+
+

IDL (mit Boolean) vs Content Attribute (get|setAttribute)

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