diff --git a/03_dom/uebungen/u18_cuteycats/README.md b/03_dom/uebungen/u18_cuteycats/README.md new file mode 100644 index 0000000..c30fc74 --- /dev/null +++ b/03_dom/uebungen/u18_cuteycats/README.md @@ -0,0 +1,22 @@ +# Übung 18: Cuteycat + +Der Katzenfreundeverein Cuteycat hat einen Auftrag für dich. Der Verein möchte auf seiner Website einen Wettbewerb ausrichten. Die Seite zeigt eine Reihe von Katzen, aus denen ein Besucher jeweils die drei niedlichsten auswählen soll. + +1. Sobald ein Besucher auf eine der Katzen klickt, soll diese auch in der rechten Box (Cutest Cats) erscheinen. Sie darf aber aus der Liste der Katzen (Our Cats) nicht verschwinden! + +2. Achte darauf, dass sich die gleiche Katze nicht zweimal auswählen lässt. + +3. Es darf nicht mehr als drei niedlichste Katzen geben. + +4. Benutzer sollen eine Katze in der Gewinnerbox (Cutest Cats) anklicken können, um sie wieder herauszunehmen. + +**Hinweise** +Versuche die Übung ohne .innerHTML zu lösen! + +Unter der URL kannst du weitere zufällige Katzenbilder generieren. + +Die Seite produziert zufällige Katzennamen. + +Verwende `.cloneNode(true)` auf den `li`-Elementen, um das Entfernen der Katzen aus Our Cats zu verhindern. + +Registriere den Event-Handler auf den `li`-Elementen. Falls der Benutzer aber nicht direkt das `li` anklickt, sondern nur Bild oder Text (Name der Katze), so zeigt event.target auf das angeklickte Element. Mittels event.currentTarget kannst du aber immer noch auf das `li` zugreifen. `currentTarget` enthält immer das Element, auf dem der Handler tatsächlich registriert wurde. diff --git a/03_dom/uebungen/u18_cuteycats/assets/css/main.css b/03_dom/uebungen/u18_cuteycats/assets/css/main.css new file mode 100644 index 0000000..7d4d64b --- /dev/null +++ b/03_dom/uebungen/u18_cuteycats/assets/css/main.css @@ -0,0 +1,76 @@ +@charset "UTF-8"; +/* Color Theme Swatches in Hex */ +/* Color Theme Swatches in RGBA */ +*, +html { + box-sizing: border-box; +} + +html, +body { + height: 100%; + background-color: #f7eedf; +} + +.m-cutey-cat h2 { + color: #7aa67a; +} +.m-cutey-cat .box-cat-selection { + position: fixed; +} +.m-cutey-cat ul.list { + margin: 0; + padding: 0; + list-style: none; + font-family: Georgia, "Times New Roman", Times, serif; + font-size: 2rem; +} +.m-cutey-cat ul.list li { + min-width: 400px; + background-color: #feaea5; + margin: 0 0 10px; + user-select: none; + border-radius: 16px; + overflow: hidden; + box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1); + transition: all 0.4s cubic-bezier(0.52, 0.02, 0.43, 1.39); +} +.m-cutey-cat ul.list li:not(.selected):hover { + background-color: #fd8173; + box-shadow: 0 0 0 rgba(0, 0, 0, 0.1); + transform: scale(1.1); +} +.m-cutey-cat ul.list li:not(.selected):hover img { + border-width: 0; +} +.m-cutey-cat ul.list li img { + width: 120px; + border: 10px solid rgba(255, 255, 255, 0.6); + transition: all 0.4s; +} +.m-cutey-cat ul.list li span { + color: white; + padding: 0 1rem; + letter-spacing: 2px; +} +.m-cutey-cat ul.list.list-cat-vote li.selected { + background-color: #ffdbd7; + opacity: 0.5; +} +.m-cutey-cat ul.list.list-cat-selection li { + background-color: #b7cfb7; +} +.m-cutey-cat ul.list.list-cat-selection li:hover { + background-color: #98bb98; +} +.m-cutey-cat ul.list.list-cat-selection li:hover::after { + position: absolute; + top: 30px; + right: 1.5rem; + content: ""; + font-family: "Font Awesome 5 Free"; + font-weight: 900; + color: white; +} + +/*# sourceMappingURL=main.css.map */ diff --git a/03_dom/uebungen/u18_cuteycats/assets/css/main.css.map b/03_dom/uebungen/u18_cuteycats/assets/css/main.css.map new file mode 100644 index 0000000..9cf6e3d --- /dev/null +++ b/03_dom/uebungen/u18_cuteycats/assets/css/main.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/main.scss"],"names":[],"mappings":";AAEA;AAOA;AAWA;AAAA;EAEE;;;AAGF;AAAA;EAEE;EACA,kBAzBa;;;AA+Bb;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA,kBA7CS;EA8CT;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAMA;EACE;EACA;;AAMJ;EACE,kBAxFO;;AAyFP;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"main.css"} \ No newline at end of file diff --git a/03_dom/uebungen/u18_cuteycats/assets/img/kittens/1.jpg b/03_dom/uebungen/u18_cuteycats/assets/img/kittens/1.jpg new file mode 100644 index 0000000..de9ac3e Binary files /dev/null and b/03_dom/uebungen/u18_cuteycats/assets/img/kittens/1.jpg differ diff --git a/03_dom/uebungen/u18_cuteycats/assets/img/kittens/10.jpg b/03_dom/uebungen/u18_cuteycats/assets/img/kittens/10.jpg new file mode 100644 index 0000000..705e1b4 Binary files /dev/null and b/03_dom/uebungen/u18_cuteycats/assets/img/kittens/10.jpg differ diff --git a/03_dom/uebungen/u18_cuteycats/assets/img/kittens/11.jpg b/03_dom/uebungen/u18_cuteycats/assets/img/kittens/11.jpg new file mode 100644 index 0000000..46149b4 Binary files /dev/null and b/03_dom/uebungen/u18_cuteycats/assets/img/kittens/11.jpg differ diff --git a/03_dom/uebungen/u18_cuteycats/assets/img/kittens/12.jpg b/03_dom/uebungen/u18_cuteycats/assets/img/kittens/12.jpg new file mode 100644 index 0000000..f2549ce Binary files /dev/null and b/03_dom/uebungen/u18_cuteycats/assets/img/kittens/12.jpg differ diff --git a/03_dom/uebungen/u18_cuteycats/assets/img/kittens/13.jpg b/03_dom/uebungen/u18_cuteycats/assets/img/kittens/13.jpg new file mode 100644 index 0000000..f40d24c Binary files /dev/null and b/03_dom/uebungen/u18_cuteycats/assets/img/kittens/13.jpg differ diff --git a/03_dom/uebungen/u18_cuteycats/assets/img/kittens/14.jpg b/03_dom/uebungen/u18_cuteycats/assets/img/kittens/14.jpg new file mode 100644 index 0000000..7fee98b Binary files /dev/null and b/03_dom/uebungen/u18_cuteycats/assets/img/kittens/14.jpg differ diff --git a/03_dom/uebungen/u18_cuteycats/assets/img/kittens/15.jpg b/03_dom/uebungen/u18_cuteycats/assets/img/kittens/15.jpg new file mode 100644 index 0000000..72c7126 Binary files /dev/null and b/03_dom/uebungen/u18_cuteycats/assets/img/kittens/15.jpg differ diff --git a/03_dom/uebungen/u18_cuteycats/assets/img/kittens/2.jpg b/03_dom/uebungen/u18_cuteycats/assets/img/kittens/2.jpg new file mode 100644 index 0000000..9c03bd1 Binary files /dev/null and b/03_dom/uebungen/u18_cuteycats/assets/img/kittens/2.jpg differ diff --git a/03_dom/uebungen/u18_cuteycats/assets/img/kittens/3.jpg b/03_dom/uebungen/u18_cuteycats/assets/img/kittens/3.jpg new file mode 100644 index 0000000..b8406b3 Binary files /dev/null and b/03_dom/uebungen/u18_cuteycats/assets/img/kittens/3.jpg differ diff --git a/03_dom/uebungen/u18_cuteycats/assets/img/kittens/4.jpg b/03_dom/uebungen/u18_cuteycats/assets/img/kittens/4.jpg new file mode 100644 index 0000000..a62c936 Binary files /dev/null and b/03_dom/uebungen/u18_cuteycats/assets/img/kittens/4.jpg differ diff --git a/03_dom/uebungen/u18_cuteycats/assets/img/kittens/5.jpg b/03_dom/uebungen/u18_cuteycats/assets/img/kittens/5.jpg new file mode 100644 index 0000000..8b14bbd Binary files /dev/null and b/03_dom/uebungen/u18_cuteycats/assets/img/kittens/5.jpg differ diff --git a/03_dom/uebungen/u18_cuteycats/assets/img/kittens/6.jpg b/03_dom/uebungen/u18_cuteycats/assets/img/kittens/6.jpg new file mode 100644 index 0000000..da0806a Binary files /dev/null and b/03_dom/uebungen/u18_cuteycats/assets/img/kittens/6.jpg differ diff --git a/03_dom/uebungen/u18_cuteycats/assets/img/kittens/7.jpg b/03_dom/uebungen/u18_cuteycats/assets/img/kittens/7.jpg new file mode 100644 index 0000000..1fa7768 Binary files /dev/null and b/03_dom/uebungen/u18_cuteycats/assets/img/kittens/7.jpg differ diff --git a/03_dom/uebungen/u18_cuteycats/assets/img/kittens/8.jpg b/03_dom/uebungen/u18_cuteycats/assets/img/kittens/8.jpg new file mode 100644 index 0000000..cb364f4 Binary files /dev/null and b/03_dom/uebungen/u18_cuteycats/assets/img/kittens/8.jpg differ diff --git a/03_dom/uebungen/u18_cuteycats/assets/img/kittens/9.jpg b/03_dom/uebungen/u18_cuteycats/assets/img/kittens/9.jpg new file mode 100644 index 0000000..62291b8 Binary files /dev/null and b/03_dom/uebungen/u18_cuteycats/assets/img/kittens/9.jpg differ diff --git a/03_dom/uebungen/u18_cuteycats/assets/js/libs/helpers.js b/03_dom/uebungen/u18_cuteycats/assets/js/libs/helpers.js new file mode 100644 index 0000000..8e5ed8d --- /dev/null +++ b/03_dom/uebungen/u18_cuteycats/assets/js/libs/helpers.js @@ -0,0 +1,17 @@ +const $ = (qs) => document.querySelector(qs); +const $$ = (qs) => Array.from(document.querySelectorAll(qs)); + +const $on = (el, ev, fn) => { + Array.isArray(el) ? el.forEach((ae) => $on(ae, ev, fn)) : el.addEventListener(ev, fn); + return el; +}; + +Node.prototype.on = function (name, fn) { + this.addEventListener(name, fn); + return this; +}; + +Array.prototype.on = Array.prototype.addEventListener = function (name, fn) { + this.forEach((elem) => elem.addEventListener(name, fn)); + return this; +}; diff --git a/03_dom/uebungen/u18_cuteycats/assets/js/libs/jquery-3.6.0.min.js b/03_dom/uebungen/u18_cuteycats/assets/js/libs/jquery-3.6.0.min.js new file mode 100644 index 0000000..c4c6022 --- /dev/null +++ b/03_dom/uebungen/u18_cuteycats/assets/js/libs/jquery-3.6.0.min.js @@ -0,0 +1,2 @@ +/*! jQuery v3.6.0 | (c) OpenJS 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&&"function"!=typeof e.item},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.6.0",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&&e.namespaceURI,n=e&&(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},j=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 j(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||D,"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,D=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 je(e,t){return A(e,"table")&&A(11!==t.nodeType?t:t.firstChild,"tr")&&S(e).children("tbody")[0]||e}function De(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function qe(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Le(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 _t,zt=[],Ut=/(=)\?(?=&|$)|\?\?/;S.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=zt.pop()||S.expando+"_"+wt.guid++;return this[e]=!0,e}}),S.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Ut.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Ut.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(Ut,"$1"+r):!1!==e.jsonp&&(e.url+=(Tt.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,zt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),"script"}),y.createHTMLDocument=((_t=E.implementation.createHTMLDocument("").body).innerHTML="
",2===_t.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):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]=Fe(y.pixelPosition,function(e,t){if(t)return t=We(e,n),Pe.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 = {}; + + // === INIT ============= + const init = () => {}; + + // === EVENTHANDLER ===== + + // === XHR/FETCH ======== + + // === FUNCTIONS ======== + + init(); +})(); + +// Übung 18: Cuteycat + +// Der Katzenfreundeverein Cuteycat hat einen Auftrag für dich. Der Verein möchte auf seiner Website einen Wettbewerb ausrichten. Die Seite zeigt eine Reihe von Katzen, aus denen ein Besucher jeweils die drei niedlichsten auswählen soll. + +// 1. Sobald ein Besucher auf eine der Katzen klickt, soll diese auch in der rechten Box (Cutest Cats) erscheinen. Sie darf aber aus der Liste der Katzen (Our Cats) nicht verschwinden! + +// 2. Achte darauf, dass sich die gleiche Katze nicht zweimal auswählen lässt. + +// 3. Es darf nicht mehr als drei niedlichste Katzen geben. + +// 4. Benutzer sollen eine Katze in der Gewinnerbox (Cutest Cats) anklicken können, um sie wieder herauszunehmen. + +// Hinweise +// Versuche die Übung ohne .innerHTML zu lösen! + +// Unter der URL http://loremflickr.com/150/150/cute,kitten/all kannst du weitere zufällige Katzenbilder generieren. + +// Die Seite http://fantasynamegenerators.com/cat-names.php produziert zufällige Katzennamen. + +// Verwende .cloneNode(true) auf den li-Elementen, um das Entfernen der Katzen aus Our Cats zu verhindern. + +// Registriere den Event-Handler auf den li-Elementen. Falls der Benutzer aber nicht direkt das li anklickt, sondern nur Bild oder Text (Name der Katze), so zeigt event.target auf das angeklickte Element. Mittels event.currentTarget kannst du aber immer noch auf das li zugreifen. currentTarget enthält immer das Element, auf dem der Handler tatsächlich registriert wurde. diff --git a/03_dom/uebungen/u18_cuteycats/assets/scss/main.scss b/03_dom/uebungen/u18_cuteycats/assets/scss/main.scss new file mode 100644 index 0000000..c3fa484 --- /dev/null +++ b/03_dom/uebungen/u18_cuteycats/assets/scss/main.scss @@ -0,0 +1,103 @@ +// sass assets/scss/main.scss:assets/css/main.css --style=expanded --watch + +/* Color Theme Swatches in Hex */ +$color-theme1: #f7eedf; +$color-theme2: #b7cfb7; +$color-theme3: #ffcdb6; +$color-theme4: #feaea5; +$color-theme5: #ffc7a2; + +$primary-color: #efefef; + +// Allgemeine Formatierung ================================= + +*, +html { + box-sizing: border-box; +} + +html, +body { + height: 100%; + background-color: $color-theme1; +} + +// Module cutey cat ====================== + +.m-cutey-cat { + h2 { + color: darken($color-theme2, 20); + } + + .box-cat-selection { + position: fixed; + } + + ul.list { + margin: 0; + padding: 0; + list-style: none; + font-family: Georgia, 'Times New Roman', Times, serif; + font-size: 2rem; + + li { + min-width: 400px; + background-color: $color-theme4; + margin: 0 0 10px; + user-select: none; + border-radius: 16px; + overflow: hidden; + box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1); + transition: all 0.4s cubic-bezier(0.52, 0.02, 0.43, 1.39); + &:not(.selected):hover { + background-color: darken($color-theme4, 10); + box-shadow: 0 0 0 rgba(0, 0, 0, 0.1); + transform: scale(1.1); + + img { + border-width: 0; + } + } + + img { + width: 120px; + border: 10px solid rgba(white, 0.6); + transition: all 0.4s; + } + + span { + color: white; + padding: 0 1rem; + letter-spacing: 2px; + } + } + + &.list-cat-vote { + li { + &.selected { + background-color: lighten($color-theme4, 10); + opacity: 0.5; + } + } + } + + &.list-cat-selection { + li { + background-color: $color-theme2; + &:hover { + background-color: darken($color-theme2, 10); + + &::after { + position: absolute; + top: 30px; + right: 1.5rem; + content: '\f1f8'; + font-family: 'Font Awesome 5 Free'; + font-weight: 900; + color: white; + } + } + } + } + } +} diff --git a/03_dom/uebungen/u18_cuteycats/index.html b/03_dom/uebungen/u18_cuteycats/index.html new file mode 100644 index 0000000..5cf4640 --- /dev/null +++ b/03_dom/uebungen/u18_cuteycats/index.html @@ -0,0 +1,59 @@ + + + + + + Cutey Cats + + + + + + + + +
+
+

Cutey Cats

+
+ +
+
+
+
+
+
+

Our Cats

+
    +
  • cat 1Chance
    • +
  • cat 2MeowMix
    • +
  • cat 3Stripes
    • +
  • cat 4Schrodinger
    • +
  • cat 5Waffles
    • +
  • cat 6Tazmina
    • +
  • cat 7Wiggle
    • +
  • cat 8Gin
    • +
  • cat 9Paws
    • +
  • cat 10Marshmallow
    • +
  • cat 11Caesar
    • +
  • cat 12Trogdor
    • +
  • cat 13Sourpuss
    • +
  • cat 14Stitch
    • +
  • cat 15Sunshine
    • +
+
+
+ +
+
+

Cutest Cats

+
    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/03_dom/uebungen/uebungen-17-18.zip b/03_dom/uebungen/uebungen-17-18.zip new file mode 100644 index 0000000..349d32c Binary files /dev/null and b/03_dom/uebungen/uebungen-17-18.zip differ diff --git a/03_dom/uebungen/uebungen-18_cuteycats.zip b/03_dom/uebungen/uebungen-18_cuteycats.zip new file mode 100644 index 0000000..1c1b015 Binary files /dev/null and b/03_dom/uebungen/uebungen-18_cuteycats.zip differ diff --git a/03_dom/unterricht/tag26/01_product-manager-final/assets/js/main.js b/03_dom/unterricht/tag26/01_product-manager-final/assets/js/main.js index e43a210..8346cee 100644 --- a/03_dom/unterricht/tag26/01_product-manager-final/assets/js/main.js +++ b/03_dom/unterricht/tag26/01_product-manager-final/assets/js/main.js @@ -23,6 +23,7 @@ console.log('init'); // Funktionaufrufe zu beginn der Anwendung initProducts(); + // Event-Lauscher zu beginn der Anwendung DOM.btnAdd.addEventListener('click', onClickAdd); }; @@ -37,33 +38,51 @@ }; addProduct(product); + + disableNonFunctionalButtons(); }; const onClickRemove = (e) => { const btnEl = e.currentTarget; - const currentRowEl = btnEl.parentNode.parentNode; // parentNode -> td - parentNode -> tr + //const currentRowEl = btnEl.parentNode.parentNode; // parentNode -> td - parentNode -> tr + // MDN https://developer.mozilla.org/de/docs/Web/API/Element/closest + //const currentRowEl = btnEl.closest('tr'); + + const currentRowEl = parents(btnEl, 'tr')[0]; currentRowEl.remove(); // kein IE11 support // DOM.tBody.removeChild(currentRowEl); + disableNonFunctionalButtons(); }; const onClickMoveUp = (e) => { const btnEl = e.currentTarget; - const currentRowEl = btnEl.parentNode.parentNode; // aktuelle Zeile (tr) mit dem Button + // const currentRowEl = btnEl.parentNode.parentNode; // aktuelle Zeile (tr) mit dem Button + const currentRowEl = parents(btnEl, 'tr')[0]; // ParentNode.insertBefore(referenceElement, targetElement) - DOM.tBody.insertBefore(currentRowEl, currentRowEl.previousElementSibling); + // DOM.tBody.insertBefore(currentRowEl, currentRowEl.previousElementSibling); + + // targetElement.before(referenceElement) + currentRowEl.previousElementSibling.before(currentRowEl); console.log('move up'); + disableNonFunctionalButtons(); }; const onClickMoveDown = (e) => { const btnEl = e.currentTarget; - const currentRowEl = btnEl.parentNode.parentNode; // aktuelle Zeile (tr) mit dem Button + // const currentRowEl = btnEl.parentNode.parentNode; // aktuelle Zeile (tr) mit dem Button + const currentRowEl = parents(btnEl, 'tr')[0]; // ParentNode.insertBefore(referenceElement, targetElement) - DOM.tBody.insertBefore(currentRowEl, currentRowEl.nextElementSibling.nextElementSibling); + // DOM.tBody.insertBefore(currentRowEl, currentRowEl.nextElementSibling.nextElementSibling); + + // targetElement.after(referenceElement) + currentRowEl.nextElementSibling.after(currentRowEl); + console.log('move down'); + disableNonFunctionalButtons(); }; // === XHR/FETCH ======== @@ -73,7 +92,7 @@ PRODUCTS.forEach((product) => { addProduct(product); }); - + disableNonFunctionalButtons(); // PRODUCTS.forEach(addProduct); }; @@ -93,29 +112,65 @@ const td = document.createElement('td'); td.classList.add('td-actions'); - const btnRemove = createButtonRemove(); - const btnMoveUp = createButtonMoveUp(); - const btnMoveDown = createButtonMoveDown(); + const btnRemove = createButton({ + classes: ['btn-danger', 'button-product-remove'], + iconName: 'trash-can', + label: 'Remove Product', + clickHandler: onClickRemove, + }); + const btnMoveUp = createButton({ + classes: ['btn-secondary', 'button-product-move-up'], + iconName: 'caret-up', + label: 'Move Up', + clickHandler: onClickMoveUp, + }); + const btnMoveDown = createButton({ + classes: ['btn-secondary', 'button-product-move-down'], + iconName: 'caret-down', + label: 'Move Down', + clickHandler: onClickMoveDown, + }); // td.append(btnRemove, btnMoveUp, btnMoveDown) td.appendChild(btnRemove); td.appendChild(btnMoveUp); td.appendChild(btnMoveDown); + // td.appendChild( + // createButton({ + // classes: ['btn-primary', 'button-login'], + // label: 'login', + // iconName: 'right-to-bracket', + // clickHandler: () => { + // console.log('login'); + // }, + // }), + // ); + return td; }; - const createButtonRemove = () => { + const createButton = (options = {}) => { + // Destructuring + const { + classes = [], + iconName = 'circle', + label = 'No Label', + clickHandler = () => { + console.log('no action'); + }, + } = options; + const btn = document.createElement('button'); const icon = document.createElement('i'); const span = document.createElement('span'); - btn.classList.add('btn', 'btn-sm', 'btn-danger', 'button-product-remove'); - icon.classList.add('fas', 'fa-trash-can'); + btn.classList.add('btn', 'btn-sm', ...classes); + icon.classList.add('fas', `fa-${iconName}`); span.classList.add('visually-hidden'); - span.textContent = 'Remove Product'; + span.textContent = label; - btn.addEventListener('click', onClickRemove); + btn.addEventListener('click', clickHandler); // btn.append(icon,span) btn.appendChild(icon); btn.appendChild(span); @@ -123,41 +178,68 @@ return btn; }; - const createButtonMoveUp = () => { - const btn = document.createElement('button'); - const icon = document.createElement('i'); - const span = document.createElement('span'); + // createButton({ + // classes: ['btn-primary', 'button-login-user'], + // iconName: 'right-to-bracket', + // label: 'Login', + // clickHandler: () => { + // console.log('login process...'); + // }, + // }); - btn.classList.add('btn', 'btn-sm', 'btn-secondary', 'button-product-move-up'); - icon.classList.add('fas', 'fa-caret-up'); - span.classList.add('visually-hidden'); - span.textContent = 'Move Up'; + // const createButtonRemove = () => { + // const btn = document.createElement('button'); + // const icon = document.createElement('i'); + // const span = document.createElement('span'); - btn.addEventListener('click', onClickMoveUp); - // btn.append(icon,span) - btn.appendChild(icon); - btn.appendChild(span); + // btn.classList.add('btn', 'btn-sm', 'btn-danger', 'button-product-remove'); + // icon.classList.add('fas', 'fa-trash-can'); + // span.classList.add('visually-hidden'); + // span.textContent = 'Remove Product'; - return btn; - }; + // btn.addEventListener('click', onClickRemove); + // // btn.append(icon,span) + // btn.appendChild(icon); + // btn.appendChild(span); - const createButtonMoveDown = () => { - const btn = document.createElement('button'); - const icon = document.createElement('i'); - const span = document.createElement('span'); + // return btn; + // }; - btn.classList.add('btn', 'btn-sm', 'btn-secondary', 'button-product-move-down'); - icon.classList.add('fas', 'fa-caret-down'); - span.classList.add('visually-hidden'); - span.textContent = 'Move Down'; + // const createButtonMoveUp = () => { + // const btn = document.createElement('button'); + // const icon = document.createElement('i'); + // const span = document.createElement('span'); - btn.addEventListener('click', onClickMoveDown); - // btn.append(icon,span) - btn.appendChild(icon); - btn.appendChild(span); + // btn.classList.add('btn', 'btn-sm', 'btn-secondary', 'button-product-move-up'); + // icon.classList.add('fas', 'fa-caret-up'); + // span.classList.add('visually-hidden'); + // span.textContent = 'Move Up'; - return btn; - }; + // btn.addEventListener('click', onClickMoveUp); + // // btn.append(icon,span) + // btn.appendChild(icon); + // btn.appendChild(span); + + // return btn; + // }; + + // const createButtonMoveDown = () => { + // const btn = document.createElement('button'); + // const icon = document.createElement('i'); + // const span = document.createElement('span'); + + // btn.classList.add('btn', 'btn-sm', 'btn-secondary', 'button-product-move-down'); + // icon.classList.add('fas', 'fa-caret-down'); + // span.classList.add('visually-hidden'); + // span.textContent = 'Move Down'; + + // btn.addEventListener('click', onClickMoveDown); + // // btn.append(icon,span) + // btn.appendChild(icon); + // btn.appendChild(span); + + // return btn; + // }; const createTd = (text, className = '') => { const td = document.createElement('td'); @@ -177,5 +259,24 @@ return tr; }; + const disableNonFunctionalButtons = () => { + Array.from(DOM.tBody.querySelectorAll('tr')).forEach((tr) => { + const btnMoveUp = tr.querySelector('.button-product-move-up'); + const btnMoveDown = tr.querySelector('.button-product-move-down'); + + btnMoveUp.disabled = !tr.previousElementSibling; + btnMoveDown.disabled = !tr.nextElementSibling; + }); + }; + + // Helferfunktion aus jQuery (youmightnotjquery) + const parents = (el, selector) => { + const parents = []; + while ((el = el.parentNode) && el !== document) { + if (!selector || el.matches(selector)) parents.push(el); + } + return parents; + }; + init(); })(); diff --git a/03_dom/unterricht/tag26/02_dom-bereiche/dom-creation.html b/03_dom/unterricht/tag26/02_dom-bereiche/dom-creation.html new file mode 100644 index 0000000..f6d5b07 --- /dev/null +++ b/03_dom/unterricht/tag26/02_dom-bereiche/dom-creation.html @@ -0,0 +1,47 @@ + + + + + + DOM Creation + + + +
    +
    +

    DOM Creation

    +
    +
      +
    • Listenpunkt 01
      • +
    • Listenpunkt 02
      • +
    • Listenpunkt 03
      • +
    • Listenpunkt 04
      • +
    +
    +
    + + + diff --git a/03_dom/unterricht/tag26/02_dom-bereiche/dom-manipulation.html b/03_dom/unterricht/tag26/02_dom-bereiche/dom-manipulation.html new file mode 100644 index 0000000..e760925 --- /dev/null +++ b/03_dom/unterricht/tag26/02_dom-bereiche/dom-manipulation.html @@ -0,0 +1,63 @@ + + + + + + DOM Manipulation + + + +
    +
    +

    DOM Manipulation

    +
    +
      +
    • Listenpunkt 01
      • +
    • Listenpunkt 02
      • +
    • Listenpunkt 03
      • +
    • Listenpunkt 04
      • +
    +
    +
    + + + diff --git a/03_dom/unterricht/tag26/02_dom-bereiche/dom-selection.html b/03_dom/unterricht/tag26/02_dom-bereiche/dom-selection.html new file mode 100644 index 0000000..2ad48d4 --- /dev/null +++ b/03_dom/unterricht/tag26/02_dom-bereiche/dom-selection.html @@ -0,0 +1,53 @@ + + + + + + DOM Selection + + + +
    +
    +

    DOM Selection

    +
    + +
      +
    • Listenpunkt 01
      • +
    • Listenpunkt 02
      • +
    • Listenpunkt 03
      • +
    • Listenpunkt 04
      • +
    +
    +
    + + + diff --git a/03_dom/unterricht/tag26/02_dom-bereiche/dom-traversal.html b/03_dom/unterricht/tag26/02_dom-bereiche/dom-traversal.html new file mode 100644 index 0000000..c606346 --- /dev/null +++ b/03_dom/unterricht/tag26/02_dom-bereiche/dom-traversal.html @@ -0,0 +1,65 @@ + + + + + + DOM Traversal + + + +
    +
    +

    DOM Traversal

    +
    + +
      +
    • Listenpunkt 01
      • +
    • Listenpunkt 02
      • +
    • Listenpunkt 03
      • +
    • Listenpunkt 04
      • +
    +
    +
    + + + diff --git a/03_dom/unterricht/tag26/03_text-content-vs-inner-text-vs-inner-html/index.html b/03_dom/unterricht/tag26/03_text-content-vs-inner-text-vs-inner-html/index.html new file mode 100644 index 0000000..5bd01d0 --- /dev/null +++ b/03_dom/unterricht/tag26/03_text-content-vs-inner-text-vs-inner-html/index.html @@ -0,0 +1,55 @@ + + + + + + textContent vs innerText vs innerHTML + + + +
    +
    +

    textContent vs innerText vs innerHTML

    +
    +

    + Lorem ipsum dolor sit, GFN Link amet consectetur adipisicing elit. Amet + tempora repudiandae dicta et libero, ex, quibusdam nisi id atque quaerat nam asperiores laborum hic ipsum + suscipit numquam. Obcaecati vero consequatur repellendus nostrum beatae laborum voluptate aperiam numquam + + VERSTECKT!!!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, commodi. + + iusto optio delectus animi quia quam, provident vitae ex. Accusantium, officiis? Nemo quidem accusantium + voluptatibus cumque voluptates natus, consequatur exercitationem eum eligendi dolor sit nisi. Magni enim omnis + voluptatibus obcaecati aut? Nulla asperiores incidunt atque labore alias quia assumenda molestias, dolores + facilis aspernatur ea quos! Magnam suscipit et, saepe culpa repellat nesciunt repudiandae dignissimos? Nemo + neque nisi repellendus doloribus reiciendis, ducimus quae id? +

    + +
    +
    +
    +
    +
    + + + diff --git a/03_dom/unterricht/tag26/04_outer-html-vs-inner-html/index.html b/03_dom/unterricht/tag26/04_outer-html-vs-inner-html/index.html new file mode 100644 index 0000000..c7e9df0 --- /dev/null +++ b/03_dom/unterricht/tag26/04_outer-html-vs-inner-html/index.html @@ -0,0 +1,26 @@ + + + + + + Node.outerHTML vs Node.innerHTML + + + +
    +
    +

    Node.outerHTML vs Node.innerHTML

    +
    +
    + + +