feat: init produt-manager

03_dom/uebungen/u14_awesome-tours/assets/js/awesome-tours-adel.js

@@ -0,0 +1,81 @@
+'use strict';
+
+(() => {
+  const $ = (qs) => document.querySelector(qs);
+  const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+  // === DOM & VARS =======
+  const DOM = {
+    france: $('#fr'),
+    england: $('#uk'),
+    italian: $('#it'),
+    info: $('#info p'),
+    imgFrance: $('#fr').querySelector('img'),
+    imgEngland: $('#uk').querySelector('img'),
+    imgItalien: $('#it').querySelector('img'),
+  };
+
+  console.log(DOM);
+  // === INIT =============
+  const init = () => {
+    DOM.info.dataset.info = DOM.info.textContent;
+
+    //bildFrance.addEventListener('mouseenter', onMouseEnterOfFrance);
+
+    DOM.imgFrance.addEventListener('mouseenter', onMouseEnter);
+    DOM.imgFrance.addEventListener('mouseleave', onMouseLeave);
+
+    DOM.imgEngland.addEventListener('mouseenter', onMouseEnter);
+    DOM.imgEngland.addEventListener('mouseleave', onMouseLeave);
+
+    DOM.imgItalien.addEventListener('mouseenter', onMouseEnter);
+    DOM.imgItalien.addEventListener('mouseleave', onMouseLeave);
+  };
+
+  // === EVENTHANDLER =====
+  // const onMouseEnterOfFrance = (e) => {
+  // const img = e.currentTarget;
+  // DOM.info.textContent = img.dataset.description;
+  // // DOM.info.style.color = 'blue';
+  // // DOM.info.style.backgroundColor.color = 'green';
+  // };
+  const onMouseEnter = (e) => {
+    console.log('enter');
+    const img = e.currentTarget;
+    console.log(img);
+    DOM.info.textContent = img.dataset.description;
+    DOM.info.style.color = 'white';
+    DOM.info.style.backgroundColor = 'green';
+  };
+
+  const onMouseLeave = () => {
+    DOM.info.textContent = DOM.info.dataset.info;
+    DOM.info.style.color = 'black';
+    DOM.info.style.backgroundColor = 'white';
+  };
+
+  init();
+})();
+
+// Übung 14: Awesome Tours
+
+// Das Reiseunternehmen Awesome Tours bietet Rundreisen zu verschiedenen Sehenswürdigkeiten in Europa an. Im Zuge eines Rebuilds der Website möchte das Unternehmen die Darstellung der Sehenswürdigkeiten ebenfalls modernisieren. Das Design inklusive HTML- und CSS-Code hat bereits eine Agentur übernommen.
+
+// Die Informationen zu den Sehenswürdigkeiten (Name, Beschreibung, Land usw.) sind dabei bereits im HTML-Code hinterlegt. Deine Aufgabe ist es nun, bei Mouseenter eine Darstellung wie in Abb. 28 zu ermöglichen.
+
+// Dazu gehört folgende Anzeige:
+
+// - Name der Sehenswürdigkeit
+// - Beschreibung
+// - Landesflagge als Bild
+
+// Das HTML zur Anzeige der Eiffelturm-Infos könnte beispielsweise so aussehen:
+
+// <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>

03_dom/uebungen/u14_awesome-tours/assets/js/awesome-tours.js

@@ -2,12 +2,38 @@
 
 (() => {
   // === DOM & VARS =======
-  const DOM = {};
+  const module = document.querySelector('.m-tours');
+  const DOM = {
+    imgEls: Array.from(module.querySelectorAll('img')),
+    infoBox: document.querySelector('#info'),
+  };
+
+  console.log(DOM.infoBox);
 
   // === INIT =============
-  const init = () => {};
+  const init = () => {
+    module.dataset.info = DOM.infoBox.innerHTML.trim();
+
+    DOM.imgEls.forEach((el) => {
+      el.addEventListener('mouseenter', onMouseEnterImage);
+    });
+    module.addEventListener('mouseleave', onMouseLeave);
+  };
 
   // === EVENTHANDLER =====
+  const onMouseEnterImage = (e) => {
+    const { description, countryCode, flagName } = e.currentTarget.dataset;
+    const title = e.currentTarget.alt;
+
+    console.log(title);
+
+    // DOM.infoBox.innerHTML = `${description} ${countryCode} ${alt}`;
+    DOM.infoBox.innerHTML = `<h3><img src="assets/img/${countryCode}.svg" alt="${flagName}" \> ${title}</h3><p>${description}</p>`;
+  };
+
+  const onMouseLeave = (e) => {
+    DOM.infoBox.innerHTML = module.dataset.info;
+  };
 
   // === XHR/FETCH ========
 
@@ -15,3 +41,27 @@
 
   init();
 })();
+
+// Übung 14: Awesome Tours
+
+// Das Reiseunternehmen Awesome Tours bietet Rundreisen zu verschiedenen Sehenswürdigkeiten in Europa an. Im Zuge eines Rebuilds der Website möchte das Unternehmen die Darstellung der Sehenswürdigkeiten ebenfalls modernisieren. Das Design inklusive HTML- und CSS-Code hat bereits eine Agentur übernommen.
+
+// Die Informationen zu den Sehenswürdigkeiten (Name, Beschreibung, Land usw.) sind dabei bereits im HTML-Code hinterlegt. Deine Aufgabe ist es nun, bei Mouseenter eine Darstellung wie in Abb. 28 zu ermöglichen.
+
+// Dazu gehört folgende Anzeige:
+
+// - Name der Sehenswürdigkeit
+// - Beschreibung
+// - Landesflagge als Bild
+
+// Das HTML zur Anzeige der Eiffelturm-Infos könnte beispielsweise so aussehen:
+
+// <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>

03_dom/uebungen/u14_awesome-tours/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
   <head>
     <meta charset="UTF-8" />