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();
 })();

03_js-dom/uebungen/u18_cuteycats/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
   <head>
     <meta charset="UTF-8" />