03_dom/uebungen/u18_cuteycats/assets/js/main.js

@@ -2,16 +2,54 @@
 
 (() => {
   // === DOM & VARS =======
-  const DOM = {};
+  const module = document.querySelector('.m-cutey-cat') || console.error('Element: ".m-cutey-cat" not found');
+
+  if (!module) return;
+
+  const DOM = {
+    listItemsCatVote: Array.from(module.querySelectorAll('.list-cat-vote li')),
+    listCatSelection: module.querySelector('.list-cat-selection'),
+  };
+
+  // console.log(module);
+  // console.log('listItemsCatVote: ', DOM.listItemsCatVote);
+  // console.log('listCatSelection', DOM.listCatSelection);
 
   // === INIT =============
-  const init = () => {};
+  const init = () => {
+    // Eventhandler für die vorhandenen Katzen
+    DOM.listItemsCatVote.forEach((el) => {
+      el.addEventListener('click', onClickCatVoteAdd);
+    });
+  };
 
   // === EVENTHANDLER =====
+  const onClickCatVoteAdd = (e) => {
+    const selCat = e.currentTarget.cloneNode(true);
+    const altSelCat = selCat.querySelector('img').alt;
+
+    //console.log(DOM.listCatSelection.childElementCount);
+    // Guard
+    if (isCastInSelection(altSelCat) || DOM.listCatSelection.childElementCount === 3) return;
+
+    // if (!isCastInSelection(altSelCat) && DOM.listCatSelection.childElementCount < 3) {
+    selCat.addEventListener('click', onClickCatSelRemove);
+    DOM.listCatSelection.appendChild(selCat);
+    // }
+  };
+
+  const onClickCatSelRemove = (e) => {
+    e.currentTarget.remove();
+  };
 
   // === XHR/FETCH ========
 
   // === FUNCTIONS ========
+  const isCastInSelection = (alt) => {
+    const votedCats = Array.from(DOM.listCatSelection.querySelectorAll('li img'));
+
+    return votedCats.some((el) => alt === el.alt);
+  };
 
   init();
 })();