diff --git a/03_js-dom/linksammlung.md b/03_js-dom/linksammlung.md index bad9dda..7e1e5da 100644 --- a/03_js-dom/linksammlung.md +++ b/03_js-dom/linksammlung.md @@ -22,6 +22,7 @@ - [HTMLReference.io](https://htmlreference.io/) - [BEM](https://getbem.com/) - Block Element Modifier - + ## CSS Tricks - [CSSReference.io](https://cssreference.io/) diff --git a/03_js-dom/uebungen/u18_cuteycats-stefan/README.md b/03_js-dom/uebungen/u18_cuteycats-stefan/README.md new file mode 100644 index 0000000..c30fc74 --- /dev/null +++ b/03_js-dom/uebungen/u18_cuteycats-stefan/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_js-dom/uebungen/u18_cuteycats-stefan/assets/css/main.css b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/css/main.css new file mode 100644 index 0000000..7d4d64b --- /dev/null +++ b/03_js-dom/uebungen/u18_cuteycats-stefan/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_js-dom/uebungen/u18_cuteycats-stefan/assets/css/main.css.map b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/css/main.css.map new file mode 100644 index 0000000..9cf6e3d --- /dev/null +++ b/03_js-dom/uebungen/u18_cuteycats-stefan/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_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/1.jpg b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/1.jpg new file mode 100644 index 0000000..de9ac3e Binary files /dev/null and b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/1.jpg differ diff --git a/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/10.jpg b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/10.jpg new file mode 100644 index 0000000..705e1b4 Binary files /dev/null and b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/10.jpg differ diff --git a/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/11.jpg b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/11.jpg new file mode 100644 index 0000000..46149b4 Binary files /dev/null and b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/11.jpg differ diff --git a/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/12.jpg b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/12.jpg new file mode 100644 index 0000000..f2549ce Binary files /dev/null and b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/12.jpg differ diff --git a/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/13.jpg b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/13.jpg new file mode 100644 index 0000000..f40d24c Binary files /dev/null and b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/13.jpg differ diff --git a/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/14.jpg b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/14.jpg new file mode 100644 index 0000000..7fee98b Binary files /dev/null and b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/14.jpg differ diff --git a/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/15.jpg b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/15.jpg new file mode 100644 index 0000000..72c7126 Binary files /dev/null and b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/15.jpg differ diff --git a/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/2.jpg b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/2.jpg new file mode 100644 index 0000000..9c03bd1 Binary files /dev/null and b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/2.jpg differ diff --git a/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/3.jpg b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/3.jpg new file mode 100644 index 0000000..b8406b3 Binary files /dev/null and b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/3.jpg differ diff --git a/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/4.jpg b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/4.jpg new file mode 100644 index 0000000..a62c936 Binary files /dev/null and b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/4.jpg differ diff --git a/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/5.jpg b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/5.jpg new file mode 100644 index 0000000..8b14bbd Binary files /dev/null and b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/5.jpg differ diff --git a/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/6.jpg b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/6.jpg new file mode 100644 index 0000000..da0806a Binary files /dev/null and b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/6.jpg differ diff --git a/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/7.jpg b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/7.jpg new file mode 100644 index 0000000..1fa7768 Binary files /dev/null and b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/7.jpg differ diff --git a/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/8.jpg b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/8.jpg new file mode 100644 index 0000000..cb364f4 Binary files /dev/null and b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/8.jpg differ diff --git a/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/9.jpg b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/9.jpg new file mode 100644 index 0000000..62291b8 Binary files /dev/null and b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/img/kittens/9.jpg differ diff --git a/03_js-dom/uebungen/u18_cuteycats-stefan/assets/js/libs/helpers.js b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/js/libs/helpers.js new file mode 100644 index 0000000..8e5ed8d --- /dev/null +++ b/03_js-dom/uebungen/u18_cuteycats-stefan/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_js-dom/uebungen/u18_cuteycats-stefan/assets/js/libs/jquery-3.6.0.min.js b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/js/libs/jquery-3.6.0.min.js new file mode 100644 index 0000000..c4c6022 --- /dev/null +++ b/03_js-dom/uebungen/u18_cuteycats-stefan/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 = { + voteCat: document.querySelector('.list-cat-vote'), + winnerCat: document.querySelector('.list-cat-selection'), + }; + + // === INIT ============= + const init = () => { + DOM.voteCat.addEventListener('click', (e) => { + check(e, 'move'); + }); + + DOM.winnerCat.addEventListener('click', (e) => { + check(e, 'remove'); + }); + }; + + // === EVENTHANDLER ===== + const check = (e, type = '') => { + const { target } = e; + const li = target.closest('li'); + + if (type === '') { + return; + } + + if (!li) { + return; + } + + if (type === 'move') { + moveCat(li); + } + + if (type === 'remove') { + remove(li); + } + }; + + // === XHR/FETCH ======== + + // === FUNCTIONS ======== + const moveCat = (li) => { + const isDuplicate = checkDuplicate(li.querySelector('img').getAttribute('src')); + + if (isDuplicate) { + return; + } + + if (DOM.winnerCat.childElementCount > 2) { + remove(DOM.winnerCat.querySelector('li:first-child')); + } + + DOM.winnerCat.appendChild(li.cloneNode(true)); + }; + + const remove = (el) => { + el.remove(); + }; + + const checkDuplicate = (imgSrc) => { + return !!DOM.winnerCat.querySelector(`img[src="${imgSrc}"]`); + }; + + 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_js-dom/uebungen/u18_cuteycats-stefan/assets/scss/main.scss b/03_js-dom/uebungen/u18_cuteycats-stefan/assets/scss/main.scss new file mode 100644 index 0000000..c3fa484 --- /dev/null +++ b/03_js-dom/uebungen/u18_cuteycats-stefan/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_js-dom/uebungen/u18_cuteycats-stefan/index.html b/03_js-dom/uebungen/u18_cuteycats-stefan/index.html new file mode 100644 index 0000000..1ff6a02 --- /dev/null +++ b/03_js-dom/uebungen/u18_cuteycats-stefan/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_js-dom/uebungen/u18_cuteycats/assets/js/main.js b/03_js-dom/uebungen/u18_cuteycats/assets/js/main.js index 759bd67..d588487 100644 --- a/03_js-dom/uebungen/u18_cuteycats/assets/js/main.js +++ b/03_js-dom/uebungen/u18_cuteycats/assets/js/main.js @@ -2,16 +2,56 @@ (() => { // === DOM & VARS ======= - const DOM = {}; + + const module = document.querySelector('.m-cutey-cat') || console.warn('Module: "cutey-cat" not found'); + + const DOM = { + module, + catsVote: Array.from(module.querySelectorAll('.list-cat-vote li')), + cutestCatsList: module.querySelector('.list-cat-selection'), + }; // === INIT ============= - const init = () => {}; + const init = () => { + DOM.catsVote.forEach((catItem) => { + catItem.addEventListener('click', onClickVote); + }); + }; // === EVENTHANDLER ===== + const onClickVote = (e) => { + const listEl = e.currentTarget; + selectedCat(listEl); + }; + + const onClickRemove = (e) => { + const listItem = e.currentTarget; + listItem.remove(); + }; // === XHR/FETCH ======== // === FUNCTIONS ======== + const selectedCat = (listItem) => { + // Guard + if (DOM.cutestCatsList.children.length >= 3 || isInSelection(listItem)) { + return; + } + + const li = listItem.cloneNode(true); + li.addEventListener('click', onClickRemove); + + DOM.cutestCatsList.appendChild(li); + }; + + const isInSelection = (el) => { + const catImage = el.querySelector('img').getAttribute('src'); + + const alreadySelected = Array.from(DOM.cutestCatsList.children).some((catLi) => { + return catLi.querySelector('img').getAttribute('src') === catImage; + }); + return alreadySelected; + }; init(); })(); diff --git a/03_js-dom/uebungen/u18_cuteycats/index.html b/03_js-dom/uebungen/u18_cuteycats/index.html index 5cf4640..1ff6a02 100644 --- a/03_js-dom/uebungen/u18_cuteycats/index.html +++ b/03_js-dom/uebungen/u18_cuteycats/index.html @@ -1,4 +1,4 @@ - + diff --git a/03_js-dom/unterricht/tag24/01_dom-bereiche/dom-manipulation.html b/03_js-dom/unterricht/tag24/01_dom-bereiche/dom-manipulation.html index b1253e2..6b808bb 100644 --- a/03_js-dom/unterricht/tag24/01_dom-bereiche/dom-manipulation.html +++ b/03_js-dom/unterricht/tag24/01_dom-bereiche/dom-manipulation.html @@ -79,12 +79,12 @@ // removeChild() // IE11 support list.removeChild($('ul.list li')); - // classList + // classList - DOMTokenList list.classList.add('list-group'); list.classList.remove('andere-klasse'); list.classList.toggle('active'); - // dataset & attribute + // dataset - DOMStringMap & attribute list.dataset.id = 'list'; //
      ...
    list.setAttribute('aria-label', 'Hauptliste'); list.removeAttribute('aria-label'); diff --git a/03_js-dom/unterricht/tag24/01_dom-bereiche/dom-selection.html b/03_js-dom/unterricht/tag24/01_dom-bereiche/dom-selection.html index 0d7bdeb..23e03d0 100644 --- a/03_js-dom/unterricht/tag24/01_dom-bereiche/dom-selection.html +++ b/03_js-dom/unterricht/tag24/01_dom-bereiche/dom-selection.html @@ -36,6 +36,8 @@ // document.querySelectorAll('css-selector') console.log(Array.from(document.querySelectorAll('ul.list'))); //=> [
  • Listenpunkt 01
    • , ...] + // document.body.images + // ======================= // document.getElementById('ID'); diff --git a/03_js-dom/unterricht/tag24/02_product-manager-tpl-json/data/products.js b/03_js-dom/unterricht/tag24/02_product-manager-tpl-json/data/products.js index abae521..604fc8f 100644 --- a/03_js-dom/unterricht/tag24/02_product-manager-tpl-json/data/products.js +++ b/03_js-dom/unterricht/tag24/02_product-manager-tpl-json/data/products.js @@ -2,4 +2,5 @@ const PRODUCTS = [ { name: '3Doodler 3D Printing Pen', price: 29.99 }, { name: 'Powerstation 5- E. Maximus Chargus', price: 44.95 }, { name: '8-Bit Legendary Hero Heat-Change Mug', price: 6.99 }, + { name: '16-Bit Legendary Hero Heat-Change Mug', price: 12.99 }, ]; diff --git a/03_js-dom/unterricht/tag24/02_product-manager-tpl-json/data/products.json b/03_js-dom/unterricht/tag24/02_product-manager-tpl-json/data/products.json index 67e8369..f4f5780 100644 --- a/03_js-dom/unterricht/tag24/02_product-manager-tpl-json/data/products.json +++ b/03_js-dom/unterricht/tag24/02_product-manager-tpl-json/data/products.json @@ -1,5 +1,6 @@ [ { "name": "3Doodler 3D Printing Pen", "price": 29.99 }, { "name": "Powerstation 5- E. Maximus Chargus", "price": 44.95 }, - { "name": "8-Bit Legendary Hero Heat-Change Mug", "price": 6.99 } + { "name": "8-Bit Legendary Hero Heat-Change Mug", "price": 6.99 }, + { "name": "16-Bit Legendary Hero Heat-Change Mug", "price": 12.99 } ] diff --git a/03_js-dom/unterricht/tag24/02_product-manager-tpl-json/index.html b/03_js-dom/unterricht/tag24/02_product-manager-tpl-json/index.html index 0a63e4a..eb6c9ba 100644 --- a/03_js-dom/unterricht/tag24/02_product-manager-tpl-json/index.html +++ b/03_js-dom/unterricht/tag24/02_product-manager-tpl-json/index.html @@ -25,6 +25,7 @@ Actions + diff --git a/03_js-dom/unterricht/tag24/05_product-manager-tpl-json/assets/js/modules/ProductManager.js b/03_js-dom/unterricht/tag24/05_product-manager-tpl-json/assets/js/modules/ProductManager.js index 5c8d810..ac45d8b 100644 --- a/03_js-dom/unterricht/tag24/05_product-manager-tpl-json/assets/js/modules/ProductManager.js +++ b/03_js-dom/unterricht/tag24/05_product-manager-tpl-json/assets/js/modules/ProductManager.js @@ -154,6 +154,7 @@ const ProductManager = (el = null, options = {}) => { return { element: DOM.module, init, + initProducts, }; }; diff --git a/03_js-dom/unterricht/tag24/06_drag-drop/index.html b/03_js-dom/unterricht/tag24/06_drag-drop/index.html index d075e1f..17af0b2 100644 --- a/03_js-dom/unterricht/tag24/06_drag-drop/index.html +++ b/03_js-dom/unterricht/tag24/06_drag-drop/index.html @@ -37,7 +37,7 @@
    -
    +