From 723c95a3f9b2ba001e0ee667cb27c6f197f77dc4 Mon Sep 17 00:00:00 2001 From: Philippe Torrel Date: Wed, 7 Oct 2026 09:55:58 +0200 Subject: [PATCH] --- .../assets/css/main.css | 4 + .../assets/img/light_off.png | Bin 0 -> 8152 bytes .../assets/img/light_on.png | Bin 0 -> 9560 bytes .../assets/js/libs/helpers.js | 92 ++++++++++++++++++ .../assets/js/libs/jquery.min.js | 2 + .../assets/js/main.js | 47 +++++++++ .../u10_running-lights-florian/index.html | 45 +++++++++ .../assets/css/main.css | 4 + .../assets/img/light_off.png | Bin 0 -> 8152 bytes .../assets/img/light_on.png | Bin 0 -> 9560 bytes .../assets/js/libs/helpers.js | 92 ++++++++++++++++++ .../assets/js/libs/jquery.min.js | 2 + .../assets/js/main.js | 58 +++++++++++ .../u10_running-lights-stefan/index.html | 41 ++++++++ .../u10_running-lights/assets/js/main.js | 41 +++++++- .../uebungen/u10_running-lights/index.html | 2 +- 03_js-dom/uebungen/u11_tasse-01001/index.html | 4 +- .../uebungen/u12_button-bg-color/index.html | 14 ++- .../uebungen/u13_range-bg-color/index.html | 30 +++++- .../assets/js/awesome-tours.js | 10 ++ .../tag22/02_attribut-boolean/index.html | 15 +++ .../03_style-font-size/assets/js/main.js | 13 ++- 22 files changed, 504 insertions(+), 12 deletions(-) create mode 100644 03_js-dom/uebungen/u10_running-lights-florian/assets/css/main.css create mode 100644 03_js-dom/uebungen/u10_running-lights-florian/assets/img/light_off.png create mode 100644 03_js-dom/uebungen/u10_running-lights-florian/assets/img/light_on.png create mode 100644 03_js-dom/uebungen/u10_running-lights-florian/assets/js/libs/helpers.js create mode 100644 03_js-dom/uebungen/u10_running-lights-florian/assets/js/libs/jquery.min.js create mode 100644 03_js-dom/uebungen/u10_running-lights-florian/assets/js/main.js create mode 100644 03_js-dom/uebungen/u10_running-lights-florian/index.html create mode 100644 03_js-dom/uebungen/u10_running-lights-stefan/assets/css/main.css create mode 100644 03_js-dom/uebungen/u10_running-lights-stefan/assets/img/light_off.png create mode 100644 03_js-dom/uebungen/u10_running-lights-stefan/assets/img/light_on.png create mode 100644 03_js-dom/uebungen/u10_running-lights-stefan/assets/js/libs/helpers.js create mode 100644 03_js-dom/uebungen/u10_running-lights-stefan/assets/js/libs/jquery.min.js create mode 100644 03_js-dom/uebungen/u10_running-lights-stefan/assets/js/main.js create mode 100644 03_js-dom/uebungen/u10_running-lights-stefan/index.html diff --git a/03_js-dom/uebungen/u10_running-lights-florian/assets/css/main.css b/03_js-dom/uebungen/u10_running-lights-florian/assets/css/main.css new file mode 100644 index 0000000..0a9dcdd --- /dev/null +++ b/03_js-dom/uebungen/u10_running-lights-florian/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_js-dom/uebungen/u10_running-lights-florian/assets/img/light_off.png b/03_js-dom/uebungen/u10_running-lights-florian/assets/img/light_off.png new file mode 100644 index 0000000000000000000000000000000000000000..404347277f5a09799ee2f9d2d20dcaa4b811ff16 GIT binary patch literal 8152 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 literal 0 HcmV?d00001 diff --git a/03_js-dom/uebungen/u10_running-lights-florian/assets/img/light_on.png b/03_js-dom/uebungen/u10_running-lights-florian/assets/img/light_on.png new file mode 100644 index 0000000000000000000000000000000000000000..0230d78f13854c83529a1a7cf6b4de914fc53594 GIT binary patch literal 9560 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 QJTH(^kX41$zBUf}A5Vs&XaE2J literal 0 HcmV?d00001 diff --git a/03_js-dom/uebungen/u10_running-lights-florian/assets/js/libs/helpers.js b/03_js-dom/uebungen/u10_running-lights-florian/assets/js/libs/helpers.js new file mode 100644 index 0000000..097d2c2 --- /dev/null +++ b/03_js-dom/uebungen/u10_running-lights-florian/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_js-dom/uebungen/u10_running-lights-florian/assets/js/libs/jquery.min.js b/03_js-dom/uebungen/u10_running-lights-florian/assets/js/libs/jquery.min.js new file mode 100644 index 0000000..b061403 --- /dev/null +++ b/03_js-dom/uebungen/u10_running-lights-florian/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 = { + lightGroups: Array.from(document.querySelectorAll('.light-bulbs')), + }; + + console.log(DOM); + + const LIGHT_PATH_ON = 'assets/img/light_on.png'; + const LIGHT_PATH_OFF = 'assets/img/light_off.png'; + + // === INIT ============= + const init = () => { + DOM.lightGroups.forEach(initRunningLight); + }; + + // === EVENTHANDLER ===== + + // === XHR/FETCH ======== + + // === FUNCTIONS ======== + const initRunningLight = (group) => { + const bulbs = Array.from(group.querySelectorAll('img')); + console.log(bulbs); + const eventType = group.dataset.event; //=> 'mouseenter' | 'click' + let activeIndex = 0; + + // Jede Reihe startet mit genau einer leuchtenden Birne. + bulbs.forEach((bulb, index) => { + bulb.src = index === activeIndex ? LIGHT_PATH_ON : LIGHT_PATH_OFF; + + bulb.addEventListener(eventType, () => { + // Beim Jagen reagiert nur die gerade leuchtende Birne. + if (eventType === 'mouseenter' && index !== activeIndex) return; + + bulbs[activeIndex].src = LIGHT_PATH_OFF; + // Modulo sorgt nach der letzten Birne für den Sprung zum Anfang. + activeIndex = (activeIndex + 1) % bulbs.length; + bulbs[activeIndex].src = LIGHT_PATH_ON; + }); + }); + }; + + init(); +})(); diff --git a/03_js-dom/uebungen/u10_running-lights-florian/index.html b/03_js-dom/uebungen/u10_running-lights-florian/index.html new file mode 100644 index 0000000..21217a4 --- /dev/null +++ b/03_js-dom/uebungen/u10_running-lights-florian/index.html @@ -0,0 +1,45 @@ + + + + + + Ü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. +

+
+

Mit der Maus jagen

+
+ lightbulb + lightbulb + lightbulb + lightbulb + lightbulb + lightbulb +
+

Per Klick weiterschalten

+
+ lightbulb + lightbulb + lightbulb + lightbulb +
+
+ + diff --git a/03_js-dom/uebungen/u10_running-lights-stefan/assets/css/main.css b/03_js-dom/uebungen/u10_running-lights-stefan/assets/css/main.css new file mode 100644 index 0000000..0a9dcdd --- /dev/null +++ b/03_js-dom/uebungen/u10_running-lights-stefan/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_js-dom/uebungen/u10_running-lights-stefan/assets/img/light_off.png b/03_js-dom/uebungen/u10_running-lights-stefan/assets/img/light_off.png new file mode 100644 index 0000000000000000000000000000000000000000..404347277f5a09799ee2f9d2d20dcaa4b811ff16 GIT binary patch literal 8152 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 literal 0 HcmV?d00001 diff --git a/03_js-dom/uebungen/u10_running-lights-stefan/assets/img/light_on.png b/03_js-dom/uebungen/u10_running-lights-stefan/assets/img/light_on.png new file mode 100644 index 0000000000000000000000000000000000000000..0230d78f13854c83529a1a7cf6b4de914fc53594 GIT binary patch literal 9560 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 QJTH(^kX41$zBUf}A5Vs&XaE2J literal 0 HcmV?d00001 diff --git a/03_js-dom/uebungen/u10_running-lights-stefan/assets/js/libs/helpers.js b/03_js-dom/uebungen/u10_running-lights-stefan/assets/js/libs/helpers.js new file mode 100644 index 0000000..097d2c2 --- /dev/null +++ b/03_js-dom/uebungen/u10_running-lights-stefan/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_js-dom/uebungen/u10_running-lights-stefan/assets/js/libs/jquery.min.js b/03_js-dom/uebungen/u10_running-lights-stefan/assets/js/libs/jquery.min.js new file mode 100644 index 0000000..b061403 --- /dev/null +++ b/03_js-dom/uebungen/u10_running-lights-stefan/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 module = document.querySelector('.light-bulbs') || console.warn('no light-bulbs to select'); + + const DOM = { + module, + lights: module.querySelectorAll('img'), + }; + + const LIGHT_PATH_ON = 'assets/img/light_on.png'; + const LIGHT_PATH_OFF = 'assets/img/light_off.png'; + + // === INIT ============= + const init = () => { + DOM.lights.forEach((img) => { + img.addEventListener('mouseenter', bulbEnterVariant1b); + // img.addEventListener('click', bulbEnterVariant1b); + }); + }; + + // === EVENTHANDLER ===== + // Das ist die korrekte Antwort nach Aufgaben Text, aktuelles Licht aus, nächstest Licht an + const bulbEnterVariant1a = (e) => { + const img = e.target; + let nextImg = img.nextElementSibling; + + img.src = img.src.replace('light_on', 'light_off'); + + if (!img.nextElementSibling) { + nextImg = DOM.lights[0]; + } + + nextImg.src = nextImg.src.replace('light_off', 'light_on'); + }; + + // das ist, denke ich, die WIRKLICH korrekte version, who alle anderen Lichter ausgeschaltet werden, ansonsten ist da nicht mehr viel mit "chasen" + const bulbEnterVariant1b = (e) => { + const imgEl = e.target; + let nextImgEl = imgEl.nextElementSibling; + + if (!imgEl.nextElementSibling) { + nextImgEl = DOM.lights[0]; + } + + DOM.lights.forEach((img) => { + img.src = img === nextImgEl ? LIGHT_PATH_ON : LIGHT_PATH_OFF; + }); + }; + + // === XHR/FETCH ======== + + // === FUNCTIONS ======== + + init(); +})(); diff --git a/03_js-dom/uebungen/u10_running-lights-stefan/index.html b/03_js-dom/uebungen/u10_running-lights-stefan/index.html new file mode 100644 index 0000000..b69818f --- /dev/null +++ b/03_js-dom/uebungen/u10_running-lights-stefan/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_js-dom/uebungen/u10_running-lights/assets/js/main.js b/03_js-dom/uebungen/u10_running-lights/assets/js/main.js index 7324828..9fef328 100644 --- a/03_js-dom/uebungen/u10_running-lights/assets/js/main.js +++ b/03_js-dom/uebungen/u10_running-lights/assets/js/main.js @@ -2,19 +2,56 @@ (() => { // === DOM & VARS ======= - const DOM = {}; + const module = document.querySelector('.light-bulbs'); + const DOM = { + module, + lightBulbs: Array.from(module.querySelectorAll('img[alt="lightbulb"]')), + }; const LIGHT_PATH_ON = 'assets/img/light_on.png'; const LIGHT_PATH_OFF = 'assets/img/light_off.png'; + // console.log(DOM); // === INIT ============= - const init = () => {}; + const init = () => { + setAllLightsOff(); + + DOM.lightBulbs.forEach((el, idx) => { + el.dataset.index = idx; // Index im HTMLImageElement ablegen (V1) + el.addEventListener('mouseenter', (e) => onMouseEnter(e, idx)); // Index als zweiten Parameter mitgeben (V2) + }); + }; // === EVENTHANDLER ===== + const onMouseEnter = (e, idx) => { + // const index = e.currentTarget.dataset.index; + const img = e.currentTarget; + const index = getIndexBy(img); // Index über Funktion ermitteln (V3) + + // if (e.currentTarget.src.includes(LIGHT_PATH_ON)) { + const nextIndex = getNextIndex(index); + + console.log(nextIndex); + setAllLightsOff(); + DOM.lightBulbs[nextIndex].src = LIGHT_PATH_ON; + // + }; // === XHR/FETCH ======== // === FUNCTIONS ======== + const getIndexBy = (img) => { + return DOM.lightBulbs.indexOf(img); + }; + const getNextIndex = (currentIndex) => { + return currentIndex === DOM.lightBulbs.length - 1 ? 0 : currentIndex + 1; + }; + + const setAllLightsOff = () => { + DOM.lightBulbs.forEach((el) => { + el.src = LIGHT_PATH_OFF; + }); + }; init(); })(); diff --git a/03_js-dom/uebungen/u10_running-lights/index.html b/03_js-dom/uebungen/u10_running-lights/index.html index 203d0ee..b69818f 100644 --- a/03_js-dom/uebungen/u10_running-lights/index.html +++ b/03_js-dom/uebungen/u10_running-lights/index.html @@ -1,4 +1,4 @@ - + diff --git a/03_js-dom/uebungen/u11_tasse-01001/index.html b/03_js-dom/uebungen/u11_tasse-01001/index.html index 868d5c8..106a495 100644 --- a/03_js-dom/uebungen/u11_tasse-01001/index.html +++ b/03_js-dom/uebungen/u11_tasse-01001/index.html @@ -99,7 +99,9 @@ // Übung 11: — Teil 6 // Der neue Wunsch besteht darin, den Text blau (blue) zu färben. Dieses Mal darfst du keine CSS-Klassen verwenden. - + $$('p').forEach((p) => { + p.style.color = 'blue'; + }); // Weise allen p-Elementen mithilfe des Style-Objektes die Farbe blue zu. Du kannst dafür direkt die JavaScript-Konsole verwenden. } diff --git a/03_js-dom/uebungen/u12_button-bg-color/index.html b/03_js-dom/uebungen/u12_button-bg-color/index.html index 616d559..cd78f3b 100644 --- a/03_js-dom/uebungen/u12_button-bg-color/index.html +++ b/03_js-dom/uebungen/u12_button-bg-color/index.html @@ -32,15 +32,23 @@ const $ = (qs) => document.querySelector(qs); const $$ = (qs) => Array.from(document.querySelectorAll(qs)); // === DOM & VARS ======= - const DOM = {}; + const DOM = { + colorButtons: $$('button[data-color]'), + }; // === INIT ============= - const init = () => {}; + const init = () => { + DOM.colorButtons.forEach((button) => { + button.addEventListener('click', onClickColorButton); + }); + }; // === EVENTHANDLER ===== + const onClickColorButton = (e) => { + document.body.style.backgroundColor = e.currentTarget.dataset.color; + }; init(); - // Übung 12: Farbe wechsle dich // Platziere drei Buttons (button-Tag) auf einer Seite mit den Texten »Red«, »Green« und »Blue«. Bei Betätigung eines Buttons soll sich der Hintergrund der Seite entsprechend färben. })(); diff --git a/03_js-dom/uebungen/u13_range-bg-color/index.html b/03_js-dom/uebungen/u13_range-bg-color/index.html index 83fb59d..261e40e 100644 --- a/03_js-dom/uebungen/u13_range-bg-color/index.html +++ b/03_js-dom/uebungen/u13_range-bg-color/index.html @@ -71,13 +71,39 @@ const $ = (qs) => document.querySelector(qs); const $$ = (qs) => Array.from(document.querySelectorAll(qs)); - const DOM = {}; + const DOM = { + red: $('#input-red'), + green: $('#input-green'), + blue: $('#input-blue'), + rangeInputs: $$('.form-range'), + currentHexColor: $('#current-hex-color'), + currentColor: $('#current-color'), + }; // === INIT ============= - const init = () => {}; + const init = () => { + // + DOM.rangeInputs.forEach((el) => { + el.addEventListener('input', onChangeColor); + }); + }; // === EVENTHANDLER ===== + const onChangeColor = (e) => { + const r = DOM.red.valueAsNumber; + const g = DOM.green.valueAsNumber; + const b = DOM.blue.valueAsNumber; + const hexRed = Number(r).toString(16).padStart(2, '0').toUpperCase(); + const hexGreen = Number(g).toString(16).padStart(2, '0').toUpperCase(); + const hexBlue = Number(b).toString(16).padStart(2, '0').toUpperCase(); + + // + document.body.style.backgroundColor = `rgb(${r} ,${g} ,${b})`; + + DOM.currentColor.textContent = `rgb(${r} ,${g} ,${b})`; + DOM.currentHexColor.textContent = `#${hexRed}${hexGreen}${hexBlue}`; + }; // === XHR/FETCH ======== // === FUNCTIONS ======== diff --git a/03_js-dom/uebungen/u14_awesome-tours/assets/js/awesome-tours.js b/03_js-dom/uebungen/u14_awesome-tours/assets/js/awesome-tours.js index a3c8216..7f73ada 100644 --- a/03_js-dom/uebungen/u14_awesome-tours/assets/js/awesome-tours.js +++ b/03_js-dom/uebungen/u14_awesome-tours/assets/js/awesome-tours.js @@ -15,3 +15,13 @@ init(); })(); + +//
+//

+// Italian Flag +// Colosseum +//

+//

+// The Colosseum or Coliseum, also known as the Flavian Amphitheatre or Colosseo, is an oval amphitheatre in... +//

+//
diff --git a/03_js-dom/unterricht/tag22/02_attribut-boolean/index.html b/03_js-dom/unterricht/tag22/02_attribut-boolean/index.html index 2a90c87..b8c3103 100644 --- a/03_js-dom/unterricht/tag22/02_attribut-boolean/index.html +++ b/03_js-dom/unterricht/tag22/02_attribut-boolean/index.html @@ -85,6 +85,21 @@ }); // TODO: Die letzten 3 Buttons mit Aktion zuweisen. + DOM.buttonCheckOn.addEventListener('click', (e) => { + e.preventDefault(); + DOM.cbAgb.checked = true; + DOM.btnSend.disabled = false; + }); + DOM.buttonCheckOff.addEventListener('click', (e) => { + e.preventDefault(); + DOM.cbAgb.checked = false; + DOM.btnSend.disabled = true; + }); + DOM.buttonCheckOnOff.addEventListener('click', (e) => { + e.preventDefault(); + DOM.cbAgb.checked = !DOM.cbAgb.checked; + DOM.btnSend.disabled = !DOM.btnSend.disabled; + }); diff --git a/03_js-dom/unterricht/tag22/03_style-font-size/assets/js/main.js b/03_js-dom/unterricht/tag22/03_style-font-size/assets/js/main.js index 8cc8739..3e6678d 100644 --- a/03_js-dom/unterricht/tag22/03_style-font-size/assets/js/main.js +++ b/03_js-dom/unterricht/tag22/03_style-font-size/assets/js/main.js @@ -47,8 +47,9 @@ // === EVENTHANDLER ===== const onClickFontSize = (e) => { const btnEl = e.currentTarget; - const label = btnEl.getAttribute('data-label'); - const size = btnEl.getAttribute('data-size'); + // const { label,size} = btnEl.dataset; + const label = btnEl.getAttribute('data-label'); // btnEl.dataset.label; + const size = btnEl.getAttribute('data-size'); // btnEl.dataset.size; switch (label) { case 'INCREASE': setFontSize(currentFontSize() + 5); @@ -57,7 +58,13 @@ setFontSize(currentFontSize() - 5); break; default: - setFontSize(size); + // setFontSize(eval(label)); + // => eval('BIG') -> BIG // VORSICHT: eval ist evil + if (!isNaN(size)) { + setFontSize(size); + } else { + console.warn('not a valid size'); + } } };