03_js-dom/uebungen/u10_running-lights-stefan/assets/js/main.js

@@ -0,0 +1,58 @@
+'use strict';
+
+(() => {
+  // === 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();
+})();