62 lines
1.7 KiB
JavaScript
62 lines
1.7 KiB
JavaScript
'use strict';
|
|
|
|
(() => {
|
|
// === DOM & VARS =======
|
|
|
|
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 = () => {
|
|
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();
|
|
})();
|
|
|
|
// <section id="info">
|
|
// <h3>
|
|
// <img src="it.png" alt="Italian Flag" title="Italian Flag">
|
|
// Colosseum
|
|
// </h3>
|
|
// <p>
|
|
// The Colosseum or Coliseum, also known as the Flavian Amphitheatre or Colosseo, is an oval amphitheatre in...
|
|
// </p>
|
|
// </section>
|