02_advanced/unterricht/tag17/01_website-static/assets/css/main.css

@@ -12084,6 +12084,43 @@ blockquote {
   font-family: "Gloria Hallelujah", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
 }
 
+.chuck-norris-joke {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  height: 100vh;
+  background: #555 url("../img/concrete-bg.jpg") center no-repeat fixed;
+  background-size: cover;
+}
+.chuck-norris-joke::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(circle, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.8) 100%);
+}
+.chuck-norris-joke > * {
+  position: relative;
+  z-index: 2;
+}
+.chuck-norris-joke {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.chuck-norris-joke .joke-text {
+  color: white;
+  text-align: center;
+  font-size: 3rem;
+  max-width: 80%;
+  padding: 2rem;
+  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+}
+
 .header-main {
   width: 100%;
   height: 30vh; /* viewport height */

02_advanced/unterricht/tag17/01_website-static/assets/js/build.js

@@ -0,0 +1,42 @@
+"use strict";
+(() => {
+  // dev/js/main.js
+  (() => {
+    const DOM = {
+      chuckNorrisJoke: document.querySelector(".chuck-norris-joke"),
+      jokeText: document.querySelector(".joke-text"),
+      buttonGetJoke: document.querySelector(".button-get-joke")
+    };
+    console.log(DOM);
+    const init = () => {
+      console.log("init...");
+      DOM.buttonGetJoke.addEventListener("click", onClickGetJoke);
+      getJoke().then((data) => {
+        generateJoke(data.value);
+      });
+    };
+    const onClickGetJoke = (e) => {
+      getJoke().then((data) => {
+        generateJoke(data.value);
+      });
+    };
+    const getJoke = async () => {
+      try {
+        const response = await fetch("https://api.chucknorris.io/jokes/random");
+        if (!response.ok) {
+          throw new Error("HTTP-Request went wrong.");
+        }
+        const data = await response.json();
+        return data;
+      } catch (error) {
+        console.error("Error: ", error);
+        throw error;
+      }
+    };
+    const generateJoke = (joke) => {
+      DOM.jokeText.textContent = joke;
+    };
+    init();
+  })();
+})();
+//# sourceMappingURL=build.js.map

02_advanced/unterricht/tag17/01_website-static/assets/js/build.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../dev/js/main.js"],
+  "sourcesContent": ["'use strict';\n\n(() => {\n  // === DOM & VARS =======\n  const DOM = {\n    chuckNorrisJoke: document.querySelector('.chuck-norris-joke'),\n    jokeText: document.querySelector('.joke-text'),\n    buttonGetJoke: document.querySelector('.button-get-joke'),\n  };\n\n  console.log(DOM);\n\n  // === INIT =============\n  const init = () => {\n    console.log('init...');\n    DOM.buttonGetJoke.addEventListener('click', onClickGetJoke);\n\n    // Funktionaufrufe\n    getJoke().then((data) => {\n      generateJoke(data.value);\n    });\n  };\n\n  // === EVENTHANDLER =====\n  const onClickGetJoke = (e) => {\n    getJoke().then((data) => {\n      generateJoke(data.value);\n    });\n  };\n\n  // === XHR/FETCH ========\n  const getJoke = async () => {\n    try {\n      const response = await fetch('https://api.chucknorris.io/jokes/random');\n      if (!response.ok) {\n        throw new Error('HTTP-Request went wrong.');\n      }\n      const data = await response.json();\n      return data; // -> Promise\n    } catch (error) {\n      console.error('Error: ', error);\n\n      throw error;\n    }\n  };\n\n  // === FUNCTIONS ========\n  const generateJoke = (joke) => {\n    DOM.jokeText.textContent = joke;\n  };\n\n  init();\n})();\n"],
+  "mappings": ";;;AAEA,GAAC,MAAM;AAEL,UAAM,MAAM;AAAA,MACV,iBAAiB,SAAS,cAAc,oBAAoB;AAAA,MAC5D,UAAU,SAAS,cAAc,YAAY;AAAA,MAC7C,eAAe,SAAS,cAAc,kBAAkB;AAAA,IAC1D;AAEA,YAAQ,IAAI,GAAG;AAGf,UAAM,OAAO,MAAM;AACjB,cAAQ,IAAI,SAAS;AACrB,UAAI,cAAc,iBAAiB,SAAS,cAAc;AAG1D,cAAQ,EAAE,KAAK,CAAC,SAAS;AACvB,qBAAa,KAAK,KAAK;AAAA,MACzB,CAAC;AAAA,IACH;AAGA,UAAM,iBAAiB,CAAC,MAAM;AAC5B,cAAQ,EAAE,KAAK,CAAC,SAAS;AACvB,qBAAa,KAAK,KAAK;AAAA,MACzB,CAAC;AAAA,IACH;AAGA,UAAM,UAAU,YAAY;AAC1B,UAAI;AACF,cAAM,WAAW,MAAM,MAAM,yCAAyC;AACtE,YAAI,CAAC,SAAS,IAAI;AAChB,gBAAM,IAAI,MAAM,0BAA0B;AAAA,QAC5C;AACA,cAAM,OAAO,MAAM,SAAS,KAAK;AACjC,eAAO;AAAA,MACT,SAAS,OAAO;AACd,gBAAQ,MAAM,WAAW,KAAK;AAE9B,cAAM;AAAA,MACR;AAAA,IACF;AAGA,UAAM,eAAe,CAAC,SAAS;AAC7B,UAAI,SAAS,cAAc;AAAA,IAC7B;AAEA,SAAK;AAAA,EACP,GAAG;",
+  "names": []
+}

02_advanced/unterricht/tag17/01_website-static/dev/js/main.js

@@ -0,0 +1,53 @@
+'use strict';
+
+(() => {
+  // === DOM & VARS =======
+  const DOM = {
+    chuckNorrisJoke: document.querySelector('.chuck-norris-joke'),
+    jokeText: document.querySelector('.joke-text'),
+    buttonGetJoke: document.querySelector('.button-get-joke'),
+  };
+
+  console.log(DOM);
+
+  // === INIT =============
+  const init = () => {
+    console.log('init...');
+    DOM.buttonGetJoke.addEventListener('click', onClickGetJoke);
+
+    // Funktionaufrufe
+    getJoke().then((data) => {
+      generateJoke(data.value);
+    });
+  };
+
+  // === EVENTHANDLER =====
+  const onClickGetJoke = (e) => {
+    getJoke().then((data) => {
+      generateJoke(data.value);
+    });
+  };
+
+  // === XHR/FETCH ========
+  const getJoke = async () => {
+    try {
+      const response = await fetch('https://api.chucknorris.io/jokes/random');
+      if (!response.ok) {
+        throw new Error('HTTP-Request went wrong.');
+      }
+      const data = await response.json();
+      return data; // -> Promise
+    } catch (error) {
+      console.error('Error: ', error);
+
+      throw error;
+    }
+  };
+
+  // === FUNCTIONS ========
+  const generateJoke = (joke) => {
+    DOM.jokeText.textContent = joke;
+  };
+
+  init();
+})();