52 lines
1.2 KiB
JavaScript
52 lines
1.2 KiB
JavaScript
'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();
|
|
})();
|