diff --git a/03_js-dom/uebungen/u14_awesome-tours/assets/css/awesome-tours.css b/03_js-dom/uebungen/u14_awesome-tours/assets/css/awesome-tours.css index 285a5a0..9cc5aad 100644 --- a/03_js-dom/uebungen/u14_awesome-tours/assets/css/awesome-tours.css +++ b/03_js-dom/uebungen/u14_awesome-tours/assets/css/awesome-tours.css @@ -49,6 +49,9 @@ img { .m-tours #info img { width: 30px; + border-radius: 0; + display: inline-block; + vertical-align: center; } .flag { diff --git a/03_js-dom/uebungen/u14_awesome-tours/assets/js/awesome-tours.js b/03_js-dom/uebungen/u14_awesome-tours/assets/js/awesome-tours.js index 7f73ada..0826991 100644 --- a/03_js-dom/uebungen/u14_awesome-tours/assets/js/awesome-tours.js +++ b/03_js-dom/uebungen/u14_awesome-tours/assets/js/awesome-tours.js @@ -2,16 +2,50 @@ (() => { // === DOM & VARS ======= - const DOM = {}; + + const module = document.querySelector('.m-tours') || console.warn('element not found'); + + const DOM = { + module, + images: Array.from(module.querySelectorAll('img[data-description]')), + infoBox: document.getElementById('info'), + }; + // const DefaultText = DOM.infoBox.querySelector('p').innerText; + const defaultText = DOM.infoBox.innerHTML; // === INIT ============= - const init = () => {}; + const init = () => { + DOM.images.forEach((img) => { + img.addEventListener('mouseenter', showImgData); + }); + DOM.module.addEventListener('mouseleave', resetInfo); + }; // === EVENTHANDLER ===== + const showImgData = (e) => { + const html = getInfoData(e.target); + updateInfo(html); + }; + + const resetInfo = () => updateInfo(defaultText); // === XHR/FETCH ======== // === FUNCTIONS ======== + const getInfoData = (img) => { + const { countryCode, flagName, description } = img.dataset; + + // let html = `

${img.alt}

`; + let html = `

${flagName} ${img.alt}

`; + html += `

${description}

`; + + return html; + }; + + const updateInfo = (html) => { + DOM.infoBox.innerText = ''; + DOM.infoBox.insertAdjacentHTML('afterbegin', html); + }; init(); })();