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 {

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 = `<p class="${img.dataset.flagName.toLowerCase()}"> <strong>${img.alt}</strong></p>`;
+    let html = `<p><img src="assets/img/${countryCode}.svg" alt="${flagName}" /> <strong>${img.alt}</strong></p>`;
+    html += `<p>${description}</p>`;
+
+    return html;
+  };
+
+  const updateInfo = (html) => {
+    DOM.infoBox.innerText = '';
+    DOM.infoBox.insertAdjacentHTML('afterbegin', html);
+  };
 
   init();
 })();