03_dom/uebungen/u08-09_newsboard/assets/js/main.js

@@ -18,38 +18,127 @@
   // === INIT =============
   const init = () => {
     // Funktionaufrufe zu beginn der Anwendung
-    showMessageByNumber(1);
+
+    //////////////////
+    // Start 9.2 & 9.3
+    // ich musste hier die Reihenfolge ändern, damit meine Lösung funktioniert
+    // sonst wäre DOM.progressBar.value = 0 (wird erst in der initPro... auf 1 initialisiert)
     initProgressbar();
+    updateMessageByNumber(1);
+    // Ende 9.2 & 9.3
+    /////////////////
+
+    ////////////////
+    // Start 8.2
+    setMessageNumber(1);
+    // Ende 8.2
+    ////////////////
 
     // Eventlauscher zu beginn der Anwendung
     DOM.buttonNext.addEventListener('click', onClickNext);
     DOM.buttonPrev.addEventListener('click', onClickPrev);
+    ///////////////////////
+    // Start 8.1
+    DOM.buttonFirst.addEventListener('click', onClickFirst);
+    DOM.buttonLast.addEventListener('click', onClickLast);
+    // Ende 8.1
+    ///////////////
     window.addEventListener('keyup', onKeyUp);
   };
 
   // === EVENTHANDLER =====
   const onKeyUp = (e) => {
     // Übung 8.3 && 8.4 Tastatursteuerung
+    console.log(e);
+    if (e.key === 'ArrowLeft') {
+      if (!e.altKey) {
+        onClickPrev(e);
+      } else {
+        onClickFirst(e);
+      }
+    } else if (e.key === 'ArrowRight') {
+      if (!e.altKey) {
+        onClickNext(e);
+      } else {
+        onClickLast(e);
+      }
+    }
   };
 
   const onClickNext = (e) => {
-    showMessageByNumber((DOM.progressBar.value += 1));
+    updateMessageByNumber((DOM.progressBar.value += 1));
   };
   const onClickPrev = (e) => {
-    showMessageByNumber((DOM.progressBar.value -= 1));
+    updateMessageByNumber((DOM.progressBar.value -= 1));
   };
+
+  //////////////////
+  // Start 8.1
+  const onClickFirst = (e) => {
+    updateMessageByNumber((DOM.progressBar.value = 1));
+  };
+  const onClickLast = (e) => {
+    updateMessageByNumber((DOM.progressBar.value = MESSAGES.length));
+  };
+  // Ende 8.1
+  /////////////////////////
+
   // === XHR/FETCH ========
 
   // === FUNCTIONS ========
-  const showMessageByNumber = (n) => {
+  const updateMessageByNumber = (n) => {
     DOM.newsboardContent.innerHTML = MESSAGES[n - 1];
+    //////////////
+    // Start 8.2
+    setMessageNumber(n);
+    // Ende 8.2
+    //////////////////
+
+    //////////////////
+    // Start 9.2
+    updateBtnState();
+    // Ende 9.2
+    ///////////////////////
   };
 
+  /////////////////////////
+  // Start 9.2
+  const updateBtnState = () => {
+    const n = DOM.progressBar.value;
+    if (n === 1) {
+      // wir sind am Anfang, also die linken Buttons AUSschalten und
+      // die rechten EINschalten
+      DOM.buttonFirst.disabled = DOM.buttonPrev.disabled = true;
+      DOM.buttonLast.disabled = DOM.buttonNext.disabled = false;
+    } else if (n > 1 && n < MESSAGES.length) {
+      // wir sind mitten in der message liste - also alle Buttons aktivieren
+      DOM.buttonFirst.disabled = false;
+      DOM.buttonPrev.disabled = false;
+      DOM.buttonLast.disabled = false;
+      DOM.buttonNext.disabled = false;
+    } else if (n === MESSAGES.length) {
+      // wir sind am Ende, also die linken Buttons EINschalten und
+      // die rechten EINschalten
+      DOM.buttonLast.disabled = DOM.buttonNext.disabled = true;
+      DOM.buttonFirst.disabled = DOM.buttonPrev.disabled = false;
+    }
+  };
+  // Ende 9.2 & 9.3
+  /////////////////////
+
   const initProgressbar = () => {
     DOM.progressBar.max = MESSAGES.length;
     DOM.progressBar.value = 1;
   };
 
+  //////////////
+  // Start 8.2
+  const setMessageNumber = (n) => {
+    DOM.messageNumber.textContent = `${n}/${MESSAGES.length}`;
+  };
+  // Ende 8.2
+  /////////////////////////////////
+
   init();
 })();
 

03_dom/uebungen/u10_running-lights/assets/js/main-andreas.js

@@ -0,0 +1,51 @@
+'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();
+})();

03_dom/uebungen/u10_running-lights/assets/js/main-ersin.js

@@ -0,0 +1,68 @@
+'use strict';
+
+(() => {
+  const $ = (qs) => document.querySelector(qs);
+  const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+  // === DOM & VARS =======
+  const DOM = {
+    // Alle Glühbirnen-Bilder auswählen
+    bulbs: $$('.light-bulbs img'),
+  };
+
+  const LIGHT_PATH_ON = 'assets/img/light_on.png';
+  const LIGHT_PATH_OFF = 'assets/img/light_off.png';
+
+  // Zähler
+  let activeIndex = 0;
+
+  // === INIT =============
+  const init = () => {
+    if (DOM.bulbs.length === 0) return;
+
+    // zustand reseten
+    updateLights(); // first bulb on
+
+    DOM.bulbs.forEach((bulb, index) => {
+      bulb.addEventListener('mouseenter', (e) => onBulbHover(e, index));
+
+      bulb.addEventListener('click', onBulbClick);
+    });
+  };
+
+  // === EVENTHANDLER =====
+
+  const onBulbHover = (e, hoveredIndex) => {
+    if (hoveredIndex === activeIndex) {
+      nextLight();
+    }
+  };
+
+  const onBulbClick = () => {
+    nextLight();
+  };
+
+  // === FUNCTIONS ========
+
+  const nextLight = () => {
+    activeIndex++;
+
+    if (activeIndex >= DOM.bulbs.length) {
+      activeIndex = 0;
+    }
+
+    updateLights();
+  };
+
+  const updateLights = () => {
+    DOM.bulbs.forEach((bulb, index) => {
+      if (index === activeIndex) {
+        bulb.src = LIGHT_PATH_ON;
+      } else {
+        bulb.src = LIGHT_PATH_OFF;
+      }
+    });
+  };
+
+  init();
+})();

03_dom/uebungen/u10_running-lights/assets/js/main.js

@@ -1,20 +1,56 @@
-'use strict';
-
-(() => {
-  // === DOM & VARS =======
-  const DOM = {};
-
-  const LIGHT_PATH_ON = 'assets/img/light_on.png';
-  const LIGHT_PATH_OFF = 'assets/img/light_off.png';
-
-  // === INIT =============
-  const init = () => {};
-
-  // === EVENTHANDLER =====
-
-  // === XHR/FETCH ========
-
-  // === FUNCTIONS ========
-
-  init();
-})();
+'use strict';
+
+(() => {
+  // === DOM & VARS =======
+  const module = document.querySelector('.light-bulbs');
+  const DOM = {
+    lightBulbs: 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';
+
+  // console.log(DOM);
+  // === INIT =============
+  const init = () => {
+    setAllLightsOff();
+
+    DOM.lightBulbs.forEach((el, idx) => {
+      el.dataset.index = idx; // Index im HTMLImageElement ablegen (V1)
+      el.addEventListener('mouseenter', (e) => onMouseEnter(e, idx)); // Index als zweiten Parameter mitgeben (V2)
+    });
+  };
+
+  // === EVENTHANDLER =====
+  const onMouseEnter = (e, idx) => {
+    // const index = e.currentTarget.dataset.index;
+    const img = e.currentTarget;
+    const index = getIndexBy(img); // Index über Funktion ermitteln (V3)
+
+    // if (e.currentTarget.src.includes(LIGHT_PATH_ON)) {
+    const nextIndex = getNextIndex(index);
+
+    console.log(nextIndex);
+    setAllLightsOff();
+    DOM.lightBulbs[nextIndex].src = LIGHT_PATH_ON;
+    //
+  };
+
+  // === XHR/FETCH ========
+
+  // === FUNCTIONS ========
+  const getIndexBy = (img) => {
+    return DOM.lightBulbs.indexOf(img);
+  };
+  const getNextIndex = (currentIndex) => {
+    return currentIndex === DOM.lightBulbs.length - 1 ? 0 : currentIndex + 1;
+  };
+
+  const setAllLightsOff = () => {
+    DOM.lightBulbs.forEach((el) => {
+      el.src = LIGHT_PATH_OFF;
+    });
+  };
+
+  init();
+})();

03_dom/uebungen/u11_tasse-01001/assets/css/styles.css

@@ -0,0 +1,369 @@
+/* -------------------------------------------- Haupt CSS fuer alle Seiten -------------------------------------------- */
+
+/* ---------------- CSS-Reset ------------------- */
+html,
+body,
+a,
+div,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+span,
+p,
+img,
+strong,
+ul,
+li,
+table,
+th,
+td,
+tr {
+  margin: 0px;
+  padding: 0px;
+  border: 0px none;
+  font-weight: normal;
+  font-style: inherit;
+  font-family: inherit;
+  font-variant: inherit;
+  text-decoration: none;
+  table-layout: inherit;
+}
+
+/* ---------------- Body / HTML ------------------- */
+
+html {
+  font-size: 100%;
+  background-color: #fffef7;
+}
+
+body {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 1.2em;
+  font-weight: normal;
+  color: black;
+  margin: 0rem auto 2rem auto;
+}
+
+/* ---------------- layout ------------------- */
+
+header {
+  background: url(../img/js_header.png) left top no-repeat transparent;
+  background-size: cover;
+  height: 250px;
+  min-width: 850px;
+}
+
+header:after {
+  content: ' ';
+  display: block;
+  height: 250px;
+  background: rgba(255, 254, 247, 0);
+  background: -moz-linear-gradient(
+    top,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  background: -webkit-gradient(
+    left top,
+    left bottom,
+    color-stop(0%, rgba(255, 254, 247, 0)),
+    color-stop(22%, rgba(255, 254, 247, 0.55)),
+    color-stop(42%, rgba(255, 254, 247, 0.7)),
+    color-stop(43%, rgba(255, 254, 247, 0.71)),
+    color-stop(61%, rgba(255, 254, 247, 0.78)),
+    color-stop(75%, rgba(255, 254, 247, 0.92)),
+    color-stop(87%, rgba(255, 254, 247, 1)),
+    color-stop(100%, rgba(255, 254, 247, 1))
+  );
+  background: -webkit-linear-gradient(
+    top,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  background: -o-linear-gradient(
+    top,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  background: -ms-linear-gradient(
+    top,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  background: linear-gradient(
+    to bottom,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
+}
+
+main,
+footer {
+  width: 70%;
+  margin: 3rem auto;
+  min-width: 850px;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+
+/* ---------------- Content ------------------- */
+
+h1 {
+  color: #93412b;
+  font-size: 3em;
+  margin-bottom: 20px;
+  font-weight: bold;
+}
+
+h2 {
+  color: #93412b;
+  font-size: 2.5em;
+  margin-bottom: 15px;
+}
+
+h3 {
+  color: #93412b;
+  font-size: 2em;
+  margin-bottom: 10px;
+}
+
+p {
+  line-height: 15px;
+  margin-bottom: 15px;
+  line-height: 1.7em;
+}
+
+.cited {
+  font-style: italic;
+  font-size: 0.8em;
+}
+
+.u {
+  text-decoration: underline;
+}
+.b {
+  font-weight: bold;
+}
+.i {
+  font-style: italic;
+}
+.align_right {
+  text-align: right;
+}
+.align_left {
+  text-align: left;
+  margin-right: 10px;
+}
+.align_center {
+  text-align: center;
+}
+.float_left {
+  float: left;
+}
+.float_right {
+  float: right;
+}
+.clear_both {
+  clear: both;
+}
+strong {
+  font-weight: bold;
+}
+.special {
+  color: #b7595b;
+  font-weight: bold;
+}
+.keyword {
+  color: #db6f50;
+  font-weight: bold;
+  font-style: italic;
+}
+.gray,
+.grey {
+  color: gray;
+}
+
+/* Links */
+main a:link,
+main a:visited {
+  color: #eb690b;
+  font-weight: bold;
+}
+
+main a:focus,
+main a:hover,
+main a:active {
+  color: #eb690b;
+}
+
+ul {
+  list-style-position: outside;
+  margin-bottom: 20px;
+  padding-left: 22px;
+}
+
+ol {
+  margin-bottom: 20px;
+  padding-left: 30px;
+}
+
+li {
+  line-height: 1.4em;
+}
+
+/* ------- Article ------- */
+
+h1 {
+  color: #93412b;
+  font-size: 2.7em;
+  margin-bottom: 20px;
+}
+
+#buy_form input[type='button'] {
+  display: inline-block;
+  padding: 1px 20px 3px 20px;
+  background-color: #93412b;
+  color: white;
+  border: 1px solid white;
+  font-size: 1em;
+  height: 32px;
+}
+
+#buy_form input[type='button']:hover {
+  background-color: white;
+  color: #93412b;
+  border: 1px solid #93412b;
+}
+
+#buy_form select {
+  display: inline-block;
+  font-size: 1em;
+  background-color: white;
+  color: #93412b;
+  border: 1px solid #93412b;
+  height: 32px;
+}
+
+/* ------- Chat ------- */
+
+#chat {
+  width: 100%;
+  background-color: white;
+  border: 1px solid #9c352f;
+  height: 20rem;
+  position: relative;
+}
+
+#chat_window {
+  background-color: white;
+  width: 85%;
+  float: left;
+  height: 95%;
+}
+
+#chat_history {
+  position: absolute;
+  bottom: 8%;
+  max-height: 92%;
+  padding: 0px 0px 5px 7px;
+}
+
+#chat_history p {
+  font-size: 0.6em;
+  margin: 0;
+}
+
+#chat_text {
+  height: 8%;
+  position: absolute;
+  bottom: 0;
+  width: 85%;
+}
+
+#chat_text input {
+  width: 98%;
+  display: block;
+  margin: auto;
+}
+
+#chat_members {
+  list-style-type: none;
+  height: 100%;
+  width: 15%;
+  margin-left: 85%;
+  border-left: 1px solid #9c352f;
+  text-align: right;
+  box-sizing: border-box;
+  min-width: 100px;
+  font-size: 0.8em;
+  padding-top: 5px;
+}
+
+#chat_members li {
+  line-height: 1.2em;
+  padding: 5px 10px 2px 15px;
+}
+
+#chat_members .highlighted {
+  background-color: #c14d45;
+  color: white;
+}
+.chat_member {
+  font-weight: bold;
+}
+.chat_member1 {
+  color: #3626c8;
+}
+.chat_member2 {
+  color: #e38d0b;
+}
+
+#member_search {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 15%;
+  height: 8%;
+}
+
+#member_search input {
+  width: 88%;
+  display: block;
+  margin: auto;
+  text-align: right;
+}

03_dom/uebungen/u11_tasse-01001/index.html

@@ -0,0 +1,107 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+
+    <title>010010000100111101010100</title>
+    <meta name="description" content="JavaScript. HTML mühelos manipuliert" />
+
+    <link rel="stylesheet" href="assets/css/styles.css" type="text/css" media="screen" />
+    <link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon" />
+  </head>
+
+  <body>
+    <header></header>
+
+    <main>
+      <h1 class="article">
+        Hot Binary Heat Changing Mug
+        <span class="keyword">"010010000100111101010100"</span>
+      </h1>
+
+      <img
+        alt="Hot Binary Heat Changing Mug"
+        src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif"
+        class="float_left"
+        id="product_img" />
+
+      <h2>Description</h2>
+
+      <p>
+        Numbers make up
+        <span class="special">everything</span> in our digital world. They flow around us, invisible like the Force or
+        the Matrix, controlling all our many computer-y devices. Two numbers, in particular:
+        <span class="special">0 and 1</span>. <span class="b i">Off and On</span>. Well, we can tell you this: when
+        there's no coffee in our cup, we're completely OFF our game. But when our mug is full of hot coffee, we're
+        totally ON. And now, with the <span class="keyword">Hot Binary Heat Changing Mug</span>, there's a mug that
+        tells us which state our mug is in. In binary!
+      </p>
+
+      <p>
+        See, the
+        <span class="keyword">Hot Binary Heat Changing Mug</span>
+        looks like just a dark mug with binary numbers all over it. That's its OFF or cold state. Add hot coffee (or any
+        liquid) and a series of digits will turn white. Read them continuously from left to right, and you'll read:
+        <span class="keyword">010010000100111101010100</span>. That's <span class="special">in binary</span>. Of course,
+        your
+        <span class="keyword">Hot Binary Heat Changing Mug</span>
+        could just be paying you a compliment. Cheeky, mug.
+      </p>
+
+      <p>
+        <img alt="010010000100111101010100" src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg" />
+      </p>
+
+      <h2>Product Specifications</h2>
+
+      <ul id="product_specification">
+        <li class="keyword">Hot Binary Heat Changing Mug</li>
+        <li>
+          As you add hot liquids, the binary for "HOT" appears (read from left to right in one line, not two:
+          010010000100111101010100)
+        </li>
+        <li>A <span class="keyword">ThinkGeek</span> creation and exclusive!</li>
+        <li>
+          Care Instructions:
+          <span class="i b">Hand wash only. Not microwave or dishwasher safe.</span>
+        </li>
+        <li>Materials: Ceramic</li>
+        <li>Dimensions: approx. 3.15" diameter x 3.75" tall</li>
+      </ul>
+
+      <h3>You wanna buy it?</h3>
+
+      <p class="buy_info_text">If you like to buy this brilliant mug, just do the following steps:</p>
+
+      <ol class="model" data-model="LDV73C-X3">
+        <li>Select how many items do you want.</li>
+        <li>Press "buy".</li>
+      </ol>
+
+      <form id="buy_form">
+        <select>
+          <option>1 item</option>
+          <option>2 items</option>
+          <option>3 items</option>
+          <option>4 items</option>
+        </select>
+        <input type="button" value="buy" />
+      </form>
+    </main>
+
+    <footer>(C) by ThinkGeek &ndash; Produkttext mit freundlicher Genehmigung von ThinkGeek Inc.</footer>
+
+    <script>
+      'use strict';
+      {
+        const $ = (qs) => document.querySelector(qs);
+        const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+        //  Übung 11: — Teil 6
+        // Der neue Wunsch besteht darin, den Text blau (blue) zu färben. Dieses Mal darfst du keine CSS-Klassen verwenden.
+
+        // Weise allen p-Elementen mithilfe des Style-Objektes die Farbe blue zu. Du kannst dafür direkt die JavaScript-Konsole verwenden.
+      }
+    </script>
+  </body>
+</html>

03_dom/uebungen/u12_button-bg-color/index.html

@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Übung 12: Farbe Wechsel Dich</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
+    <style>
+      button[data-color] {
+        border: 5px solid #efefef;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>Übung 12: Farbe Wechsel Dich</h1>
+
+        <div class="buttons">
+          <button class="btn btn-danger button-red" data-color="#c00"><i class="fa-solid fa-droplet"></i>Red</button>
+          <button class="btn btn-success button-green" data-color="#080">
+            <i class="fa-solid fa-droplet"></i>Green
+          </button>
+          <button class="btn btn-primary button-blue" data-color="#00F"><i class="fa-solid fa-droplet"></i>Blue</button>
+        </div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+      (() => {
+        const $ = (qs) => document.querySelector(qs);
+        const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+        // === DOM & VARS =======
+        const DOM = {};
+
+        // === INIT =============
+        const init = () => {};
+
+        // === EVENTHANDLER =====
+
+        init();
+
+        // Übung 12: Farbe wechsle dich
+        // Platziere drei Buttons (button-Tag) auf einer Seite mit den Texten »Red«, »Green« und »Blue«. Bei Betätigung eines Buttons soll sich der Hintergrund der Seite entsprechend färben.
+      })();
+    </script>
+  </body>
+</html>

03_dom/uebungen/u13_range-bg-color/index.html

@@ -0,0 +1,89 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Übung 13: Farbe Wechsel Dich — Teil 2</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <style>
+      .range-colors > div {
+        background-color: rgba(200, 200, 200, 0.6);
+        padding: 2rem;
+        margin: 1rem 0;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>Übung 13: Farbe Wechsel Dich — Teil 2</h1>
+
+        <div class="range-colors">
+          <div class="mb-3">
+            <label for="input-red" class="form-label">Rot</label>
+            <input
+              type="range"
+              class="form-range input-red"
+              name="red"
+              id="input-red"
+              min="0"
+              max="255"
+              step="1"
+              value="255" />
+          </div>
+          <div class="mb-3">
+            <label for="input-green" class="form-label">Grün</label>
+            <input
+              type="range"
+              class="form-range input-green"
+              name="green"
+              id="input-green"
+              min="0"
+              max="255"
+              step="1"
+              value="255" />
+          </div>
+          <div class="mb-3">
+            <label for="input-blue" class="form-label">Blau</label>
+            <input
+              type="range"
+              class="form-range input-blue"
+              name="blue"
+              id="input-blue"
+              min="0"
+              max="255"
+              step="1"
+              value="255" />
+          </div>
+          <div class="mb-3">
+            <strong>Aktuelle Farbe:</strong>
+            <span id="current-color">rgb(255, 255, 255)</span>
+            <span id="current-hex-color">#FFFFFF</span>
+          </div>
+        </div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      (() => {
+        // === DOM & VARS =======
+        const $ = (qs) => document.querySelector(qs);
+        const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+        const DOM = {};
+
+        // === INIT =============
+        const init = () => {};
+
+        // === EVENTHANDLER =====
+
+        // === XHR/FETCH ========
+
+        // === FUNCTIONS ========
+
+        init();
+      })();
+    </script>
+  </body>
+</html>

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

@@ -0,0 +1,86 @@
+.main-wrapper {
+  margin: 5rem auto;
+  width: 650px;
+  padding: 1rem;
+  border: 1px solid black;
+}
+
+.tours-grid {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 200px 200px 0.5fr;
+  gap: 1rem;
+  grid-template-areas:
+    'item1 item2'
+    'item1 item3'
+    'item4 item4';
+}
+
+#fr {
+  grid-area: item1;
+}
+
+#uk {
+  grid-area: item2;
+}
+
+#it {
+  grid-area: item3;
+}
+
+#info {
+  grid-area: item4;
+
+  border: 2px solid #000077;
+  padding: 0.5rem;
+  border-radius: 10px;
+}
+
+img {
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+}
+
+.tours {
+  position: relative;
+}
+
+.m-tours #info img {
+  width: 30px;
+}
+
+.flag {
+  font-size: 1.5rem;
+}
+
+.french-flag::before {
+  content: '';
+  display: inline-block;
+  width: 50px;
+  height: 30px;
+  background: red url('../img/fr.png') no-repeat;
+  background-size: cover;
+  margin-right: 0.5rem;
+}
+
+.union-jack::before {
+  content: '';
+  display: inline-block;
+  width: 60px;
+  height: 30px;
+  background: red url('../img/uk.png') no-repeat;
+  background-size: cover;
+  margin-right: 0.5rem;
+}
+
+.italian-flag::before {
+  content: '';
+  display: inline-block;
+  width: 60px;
+  height: 30px;
+  background: red url('../img/it.png') no-repeat;
+  background-size: cover;
+  margin-right: 0.5rem;
+}

03_dom/uebungen/u14_awesome-tours/assets/img/fr.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-fr" viewBox="0 0 640 480">
+  <path fill="#fff" d="M0 0h640v480H0z"/>
+  <path fill="#000091" d="M0 0h213.3v480H0z"/>
+  <path fill="#e1000f" d="M426.7 0H640v480H426.7z"/>
+</svg>

03_dom/uebungen/u14_awesome-tours/assets/img/it.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-it" viewBox="0 0 640 480">
+  <g fill-rule="evenodd" stroke-width="1pt">
+    <path fill="#fff" d="M0 0h640v480H0z"/>
+    <path fill="#009246" d="M0 0h213.3v480H0z"/>
+    <path fill="#ce2b37" d="M426.7 0H640v480H426.7z"/>
+  </g>
+</svg>

03_dom/uebungen/u14_awesome-tours/assets/img/uk.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-gb" viewBox="0 0 640 480">
+  <path fill="#012169" d="M0 0h640v480H0z"/>
+  <path fill="#FFF" d="m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0z"/>
+  <path fill="#C8102E" d="m424 281 216 159v40L369 281zm-184 20 6 35L54 480H0zM640 0v3L391 191l2-44L590 0zM0 0l239 176h-60L0 42z"/>
+  <path fill="#FFF" d="M241 0v480h160V0zM0 160v160h640V160z"/>
+  <path fill="#C8102E" d="M0 193v96h640v-96zM273 0v480h96V0z"/>
+</svg>

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

@@ -0,0 +1,17 @@
+'use strict';
+
+(() => {
+  // === DOM & VARS =======
+  const DOM = {};
+
+  // === INIT =============
+  const init = () => {};
+
+  // === EVENTHANDLER =====
+
+  // === XHR/FETCH ========
+
+  // === FUNCTIONS ========
+
+  init();
+})();

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

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Übung 14: awesome tours</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="assets/css/awesome-tours.css" />
+    <script src="assets/js/awesome-tours.js" defer></script>
+  </head>
+  <body>
+    <main>
+      <div class="main-wrapper">
+        <h1>Übung 14: awesome tours</h1>
+
+        <div class="m-tours tours-grid">
+          <div id="fr">
+            <img
+              src="assets/img/eiffelturm.jpg"
+              alt="Eiffel Tower"
+              data-description="The Eiffel Tower (/ˈaɪfəl ˈtaʊər/ eye-fəl towr; French: Tour Eiffel French pronunciation: ​[tuʁ‿ɛfɛl] About this sound listen) is a wrought iron lattice tower on the Champ de Mars in Paris, France. It is named after the engineer Gustave Eiffel, whose company designed and built the tower..."
+              data-country-code="fr"
+              data-flag-name="French-Flag" />
+          </div>
+
+          <div id="uk">
+            <img
+              src="assets/img/tower_bridge.jpg"
+              alt="Tower Bride"
+              data-description="Tower Bridge (built 1886–1894) is a combined bascule and suspension bridge in London. The bridge crosses the River Thames close to the Tower of London and has become an iconic symbol of London. Tower Bridge is one of five London bridges now owned..."
+              data-country-code="uk"
+              data-flag-name="Union-Jack" />
+          </div>
+
+          <div id="it">
+            <img
+              src="assets/img/colosseum.jpg"
+              alt="Colosseum"
+              data-description="The Colosseum or Coliseum (/kɒləˈsiːəm/ kol-ə-see-əm), also known as the Flavian Amphitheatre (Latin: Amphitheatrum Flavium; Italian: Anfiteatro Flavio [amfiteˈaːtro ˈflaːvjo] or Colosseo [kolosˈsɛːo]), is an oval amphitheatre in the centre of the city of Rome, Italy. Built of concrete and sand,[1] it is the largest amphitheatre ever built. The Colosseum is situated just east of the Roman Forum. Construction began..."
+              data-country-code="it"
+              data-flag-name="Italian-Flag" />
+          </div>
+          <section id="info">
+            <p>Move your mouse pointer over the images to read the descriptions here!</p>
+          </section>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>