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

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

@@ -0,0 +1,68 @@
+'use strict';
+
+(() => {
+  const $ = (qs) => document.querySelector(qs);
+  const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+  // === DOM & VARS =======
+  const DOM = {
+    // Alle Glühbirnen-Bilder auswählen
+    bulbs: $$('.light-bulbs img'),
+  };
+
+  const LIGHT_PATH_ON = 'assets/img/light_on.png';
+  const LIGHT_PATH_OFF = 'assets/img/light_off.png';
+
+  // Zähler
+  let activeIndex = 0;
+
+  // === INIT =============
+  const init = () => {
+    if (DOM.bulbs.length === 0) return;
+
+    // zustand reseten
+    updateLights(); // first bulb on
+
+    DOM.bulbs.forEach((bulb, index) => {
+      bulb.addEventListener('mouseenter', (e) => onBulbHover(e, index));
+
+      bulb.addEventListener('click', onBulbClick);
+    });
+  };
+
+  // === EVENTHANDLER =====
+
+  const onBulbHover = (e, hoveredIndex) => {
+    if (hoveredIndex === activeIndex) {
+      nextLight();
+    }
+  };
+
+  const onBulbClick = () => {
+    nextLight();
+  };
+
+  // === FUNCTIONS ========
+
+  const nextLight = () => {
+    activeIndex++;
+
+    if (activeIndex >= DOM.bulbs.length) {
+      activeIndex = 0;
+    }
+
+    updateLights();
+  };
+
+  const updateLights = () => {
+    DOM.bulbs.forEach((bulb, index) => {
+      if (index === activeIndex) {
+        bulb.src = LIGHT_PATH_ON;
+      } else {
+        bulb.src = LIGHT_PATH_OFF;
+      }
+    });
+  };
+
+  init();
+})();

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

@@ -1,20 +1,56 @@
-'use strict';
-
-(() => {
-  // === DOM & VARS =======
-  const DOM = {};
-
-  const LIGHT_PATH_ON = 'assets/img/light_on.png';
-  const LIGHT_PATH_OFF = 'assets/img/light_off.png';
-
-  // === INIT =============
-  const init = () => {};
-
-  // === EVENTHANDLER =====
-
-  // === XHR/FETCH ========
-
-  // === FUNCTIONS ========
-
-  init();
-})();
+'use strict';
+
+(() => {
+  // === DOM & VARS =======
+  const module = document.querySelector('.light-bulbs');
+  const DOM = {
+    lightBulbs: 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';
+
+  // console.log(DOM);
+  // === INIT =============
+  const init = () => {
+    setAllLightsOff();
+
+    DOM.lightBulbs.forEach((el, idx) => {
+      el.dataset.index = idx; // Index im HTMLImageElement ablegen (V1)
+      el.addEventListener('mouseenter', (e) => onMouseEnter(e, idx)); // Index als zweiten Parameter mitgeben (V2)
+    });
+  };
+
+  // === EVENTHANDLER =====
+  const onMouseEnter = (e, idx) => {
+    // const index = e.currentTarget.dataset.index;
+    const img = e.currentTarget;
+    const index = getIndexBy(img); // Index über Funktion ermitteln (V3)
+
+    // if (e.currentTarget.src.includes(LIGHT_PATH_ON)) {
+    const nextIndex = getNextIndex(index);
+
+    console.log(nextIndex);
+    setAllLightsOff();
+    DOM.lightBulbs[nextIndex].src = LIGHT_PATH_ON;
+    //
+  };
+
+  // === XHR/FETCH ========
+
+  // === FUNCTIONS ========
+  const getIndexBy = (img) => {
+    return DOM.lightBulbs.indexOf(img);
+  };
+  const getNextIndex = (currentIndex) => {
+    return currentIndex === DOM.lightBulbs.length - 1 ? 0 : currentIndex + 1;
+  };
+
+  const setAllLightsOff = () => {
+    DOM.lightBulbs.forEach((el) => {
+      el.src = LIGHT_PATH_OFF;
+    });
+  };
+
+  init();
+})();