03_dom/uebungen/u10_running-lights/assets/js/main-andreas.js

@@ -0,0 +1,51 @@
+'use strict';
+
+(() => {
+  // === DOM & VARS =======
+  const module = document.querySelector('.light-bulbs');
+  const DOM = {
+    lights: Array.from(module.querySelectorAll('img[alt="lightbulb"]')),
+  };
+
+  const LIGHT_PATH_ON = 'assets/img/light_on.png';
+  const LIGHT_PATH_OFF = 'assets/img/light_off.png';
+
+  //
+  // === INIT =============
+  const init = () => {
+    // Eventlistener für jede Lampe
+    DOM.lights.forEach((light) => {
+      light.addEventListener('mouseenter', enterMouseLight);
+    });
+
+    turnAllLightsOff();
+  };
+
+  // === EVENTHANDLER =====
+  const enterMouseLight = (e) => {
+    // idx des aktuellen lichtes holen
+    console.log(e.target);
+    const idx = DOM.lights.indexOf(e.target);
+
+    if (idx === -1) return;
+
+    // nu alle lichter aus
+    turnAllLightsOff();
+
+    // mit den index das nächste licht einschalten oder das erste, wenn das letzte an ist
+    if (idx === DOM.lights.length - 1) {
+      DOM.lights[0].src = LIGHT_PATH_ON;
+    } else {
+      DOM.lights[idx + 1].src = LIGHT_PATH_ON;
+    }
+  };
+  // === XHR/FETCH ========
+
+  // === FUNCTIONS ========
+  const turnAllLightsOff = () => {
+    DOM.lights.forEach((light) => {
+      light.src = LIGHT_PATH_OFF;
+    });
+  };
+  init();
+})();