02_advanced/unterricht/tag18/01_ajax-jokes/assets/css/main.css

@@ -12098,7 +12098,7 @@ h6,
   width: 100%;
   height: 100%;
   height: 100vh;
-  background: #222 url("../img/bg-concrete.jpg") center no-repeat;
+  background: #222 url("../img/bg-concrete.jpg") center no-repeat fixed;
   background-size: cover;
   display: flex;
   justify-content: center;
@@ -12127,6 +12127,7 @@ h6,
   text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
   font-size: 3rem;
   max-width: 80%;
+  min-height: 40vh;
 }
 
 /*# sourceMappingURL=main.css.map */

02_advanced/unterricht/tag18/01_ajax-jokes/dev/assets/js/main.js

@@ -0,0 +1,110 @@
+// 'use strict';
+import $ from 'jquery'; // Bundler ist notwendig (esbuild, rollup, webpack, browserify, parcel)
+// esbuild sucht im node_modules Ordner nach Modul
+
+(() => {
+  // === DOM & VARS =======
+  const DOM = {
+    chuckNorrisJoke: document.querySelector('.chuck-norris-joke'),
+    jokeText: document.querySelector('.joke-text'),
+    buttonGetJoke: document.querySelector('.button-get-joke'),
+  };
+
+  // const chuckNorrisJokeEl = document.querySelector('.chuck-norris-joke');
+  // const jokeTextEl = document.querySelector('.joke-text');
+  // const buttonGetJokeEl = document.querySelector('.button-get-joke');
+
+  // console.log(chuckNorrisJokeEl, jokeTextEl, buttonGetJokeEl);
+  console.log(DOM);
+
+  // === INIT =============
+  const init = () => {
+    console.log('init...');
+    DOM.buttonGetJoke.addEventListener('click', onClickGetJoke);
+
+    // getJokeXhr();
+    getJokeJQuery();
+    // getJoke().then((data) => {
+    //   console.log(data);
+    //   generateJoke(data.value);
+    // });
+  };
+
+  // === EVENTHANDLER =====
+  const onClickGetJoke = (e) => {
+    console.log('e:', e); // PointerEvent
+    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('Something went wrong.');
+      }
+      const data = await response.json(); // HTTP-Response Body wird in JS-Object umgewandelt
+
+      // console.log(data);
+      return data; // -> Promise
+    } catch (error) {
+      console.error('Error: ', error);
+      return error;
+    }
+  };
+
+  const getJokeXhr = () => {
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', 'https://api.chucknorris.io/jokes/random');
+    xhr.send();
+
+    xhr.addEventListener('readystatechange', (e) => {
+      console.log(xhr.readyState);
+      // 0	UNSENT	Client has been created. open() not called yet.
+      // 1	OPENED	open() has been called.
+      // 2	HEADERS_RECEIVED	send() has been called, and headers and status are available.
+      // 3	LOADING	Downloading; responseText holds partial data.
+      // 4	DONE	The operation is complete.
+      if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
+        const data = JSON.parse(xhr.responseText);
+        console.log(data);
+        generateJoke(data.value);
+      }
+    });
+  };
+
+  const getJokeJQuery = () => {
+    $.getJSON('https://api.chucknorris.io/jokes/random', (data) => {
+      console.log(data);
+      generateJoke(data.value);
+    });
+
+    // $.ajax({
+    //   method: 'GET',
+    //   url: 'https://api.chucknorris.io/jokes/random',
+    //   dataType: 'json',
+    //   success: (data) => {
+    //     console.log(data);
+    //     generateJoke(data.value);
+    //   },
+    //   error: (err) => {
+    //     console.error(err);
+    //   },
+    // });
+    // .done((data) => {
+    //   generateJoke(data.value);
+    // })
+    // .fail((err) => {
+    //   console.error(err);
+    // });
+  };
+
+  // === FUNCTIONS ========
+  const generateJoke = (joke = '') => {
+    DOM.jokeText.textContent = joke;
+  };
+
+  init();
+})();

02_advanced/unterricht/tag18/01_ajax-jokes/dev/assets/scss/05_modules/_chuck-norris-joke.scss

@@ -3,7 +3,7 @@
   width: 100%;
   height: 100%;
   height: 100vh;
-  background: #222 url('../img/bg-concrete.jpg') center no-repeat;
+  background: #222 url('../img/bg-concrete.jpg') center no-repeat fixed;
   background-size: cover;
 
   display: flex;
@@ -35,5 +35,6 @@
     text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
     font-size: 3rem;
     max-width: 80%;
+    min-height: 40vh;
   }
 }

02_advanced/unterricht/tag18/01_ajax-jokes/index.html

@@ -13,17 +13,14 @@
 
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
     <link rel="stylesheet" href="assets/css/main.css" />
-    <script src="assets/js/main.js" defer></script>
+    <script src="assets/js/build.js" defer></script>
   </head>
   <body>
     <main>
       <section class="section-joke">
         <!-- .chuck-norris-joke>blockquote.joke-text+button.btn.btn-dark.button-get-joke{Get Joke} -->
         <div class="chuck-norris-joke">
-          <blockquote class="joke-text">
+          <blockquote class="joke-text"></blockquote>
-            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit vel ad accusantium, quo iste maxime unde
-            inventore doloribus quasi necessitatibus?
-          </blockquote>
           <button class="btn btn-dark button-get-joke">Get Joke</button>
         </div>
       </section>

02_advanced/unterricht/tag18/01_ajax-jokes/package-lock.json

@@ -8,6 +8,9 @@
       "name": "01_ajax-jokes",
       "version": "1.0.0",
       "license": "ISC",
+      "dependencies": {
+        "jquery": "^4.0.0"
+      },
       "devDependencies": {
         "esbuild": "^0.28.1",
         "http-server": "^14.1.1",
@@ -2210,6 +2213,12 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/jquery": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-4.0.0.tgz",
+      "integrity": "sha512-TXCHVR3Lb6TZdtw1l3RTLf8RBWVGexdxL6AC8/e0xZKEpBflBsjh9/8LXw+dkNFuOyW9B7iB3O1sP7hS0Kiacg==",
+      "license": "MIT"
+    },
     "node_modules/json-parse-better-errors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",

02_advanced/unterricht/tag18/01_ajax-jokes/package.json

@@ -4,9 +4,10 @@
   "description": "",
   "main": "index.js",
   "scripts": {
+    "js": "npx esbuild dev/assets/js/main.js --watch --bundle --outfile=assets/js/build.js",
     "css": "sass dev/assets/scss/main.scss:assets/css/main.css -w -q",
     "server": "npx http-server -c-1 -p 3000",
-    "dev": "run-p css server"
+    "dev": "run-p js css server"
   },
   "keywords": [],
   "author": "",
@@ -17,5 +18,8 @@
     "http-server": "^14.1.1",
     "npm-run-all": "^4.1.5",
     "sass": "^1.101.0"
+  },
+  "dependencies": {
+    "jquery": "^4.0.0"
   }
 }