02_advanced/unterricht/tag17/03_wetter-box/assets/css/main.css

@@ -12048,6 +12048,32 @@ textarea.form-control-lg {
   font-weight: 900;
   src: url("../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-900italic.woff2") format("woff2");
 }
+.drop-shadow-curved {
+  position: relative;
+  float: left;
+  width: 40%;
+  padding: 1em;
+  margin: 2em 10px 4em;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
+}
+.drop-shadow-curved:before, .drop-shadow-curved:after {
+  content: "";
+  width: 3px;
+  position: absolute;
+  z-index: -1;
+  top: 10px;
+  bottom: 10px;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
+  border-radius: 10px/100px;
+}
+.drop-shadow-curved:before {
+  left: 0;
+}
+.drop-shadow-curved:after {
+  right: 0;
+}
+
 /* Color Theme Swatches in Hex */
 *,
 html {
@@ -12084,41 +12110,68 @@ blockquote {
   font-family: "Gloria Hallelujah", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
 }
 
-.chuck-norris-joke {
+.weather-box {
-  position: relative;
+  background-color: #efefef;
-  width: 100%;
+  padding: 1rem;
-  height: 100%;
+  border-radius: 1rem;
-  height: 100vh;
+  font-family: "Source Sans 3", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-  background: #555 url("../img/concrete-bg.jpg") center no-repeat fixed;
+  max-width: 400px;
-  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 {
+.weather-box .weather-pic {
-  color: white;
+  width: 45%;
+}
+.weather-box .weather-pic figure {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.weather-box .weather-pic figure img,
+.weather-box .weather-pic figure svg {
+  width: 100%;
+}
+.weather-box .weather-pic figure img {
+  border-radius: 1rem;
+}
+.weather-box .weather-pic figure figcaption {
+  text-align: center;
+  line-height: 1.5;
+}
+.weather-box .weather-pic figure .description {
+  text-align: center;
+  color: #ccc;
+  line-height: 1.5;
+}
+.weather-box .weather-information {
+  padding: 2.5rem 0 0;
+  width: 55%;
+}
+.weather-box .weather-information .text-temp {
   text-align: center;
   font-size: 3rem;
-  max-width: 80%;
+  margin: 0;
-  padding: 2rem;
+  color: #555;
-  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+}
+.weather-box .weather-information .temp-unit {
+  font-size: 2.5rem;
+  color: #777777;
+}
+.weather-box .weather-information .text-temp-min-max {
+  text-align: center;
+  color: #ccc;
+  line-height: 1;
+  margin: 0 0 2rem;
+}
+.weather-box .weather-information .wind-information {
+  display: flex;
+  text-align: center;
+}
+.weather-box .weather-information .wind-information .icon-compass {
+  font-size: 48px;
+  color: #777;
+  width: 48px;
+  height: 48px;
+  margin: 0 1rem 0 2rem;
 }
 
 /*# sourceMappingURL=main.css.map */

02_advanced/unterricht/tag17/03_wetter-box/dev/js/main.js

@@ -1,97 +1,56 @@
-import $ from 'jquery'; // Bundler ist notwendig (esbuild, rollup, rolldown, webpack, parcel, browserify)
+'use strict';
 
 (() => {
   // === DOM & VARS =======
   const DOM = {
-    chuckNorrisJoke: document.querySelector('.chuck-norris-joke'),
+    weatherBox: document.querySelector('.weather-box'),
-    jokeText: document.querySelector('.joke-text'),
+    weatherIcon: document.querySelector('.weather-pic img'),
-    buttonGetJoke: document.querySelector('.button-get-joke'),
+    figcaption: document.querySelector('figcaption'),
+    description: document.querySelector('.description'),
+    temp: document.querySelector('.temp'),
+    tempMin: document.querySelector('.temp-min'),
+    tempMax: document.querySelector('.temp-max'),
+    iconCompass: document.querySelector('.icon-compass'),
+    speed: document.querySelector('.speed'),
+    deg: document.querySelector('.wind-deg'),
   };
 
   console.log(DOM);
 
+  // BITTE EIGENEN API KEY VERWENDEN
+  const API_KEY = 'b62eaccfd1a09cf1d04b00bd2ec689e7';
+  // https//latlong.net
+  const LAT = 43.720215;
+  const LON = 7.352606;
+
+  // https://api.openweathermap.org/data/4.0/onecall/timeline/1day?cnt=10&lat=51.5000&lon=-0.1000&start=1776596400&appid={API key}
   // === INIT =============
   const init = () => {
-    console.log('init...');
+    getWeather().then((data) => {
-    DOM.buttonGetJoke.addEventListener('click', onClickGetJoke);
+      console.log(data);
-
-    // Funktionaufrufe
-    // getJoke().then((data) => {
-    //   generateJoke(data.value);
-    // });
-    // getJokeXhr();
-    getJokeJQuery();
-  };
-
-  // === EVENTHANDLER =====
-  const onClickGetJoke = (e) => {
-    getJoke().then((data) => {
-      generateJoke(data.value);
     });
   };
 
+  // === EVENTHANDLER =====
+
   // === XHR/FETCH ========
-  const getJoke = async () => {
+  const getWeather = async () => {
     try {
-      const response = await fetch('https://api.chucknorris.io/jokes/random');
+      const res = await fetch(
-      if (!response.ok) {
+        `https://api.openweathermap.org/data/2.5/weather?lat=${LAT}&lon=${LON}&units=metric&appid=${API_KEY}`,
-        throw new Error('HTTP-Request went wrong.');
+      );
+      if (!res.ok) {
+        throw Error('Fetch Error');
       }
-      const data = await response.json();
+      const data = await res.json();
       return data; // -> Promise
     } catch (error) {
-      console.error('Error: ', error);
+      console.error(error);
-
       throw error;
     }
   };
 
-  const getJokeXhr = () => {
-    const xhr = new XMLHttpRequest();
-    xhr.open('GET', 'https://api.chucknorris.io/jokes/random');
-    xhr.send();
-
-    // 0	UNSENT	Der Client wurde erstellt. open() wurde noch nicht aufgerufen.
-    // 1	OPENED	open() wurde aufgerufen.
-    // 2	HEADERS_RECEIVED	send() wurde aufgerufen, und Header und Status sind verfügbar.
-    // 3	LOADING	Wird heruntergeladen; responseText enthält teilweise Daten.
-    // 4	DONE	Der Vorgang ist abgeschlossen.
-
-    xhr.addEventListener('readystatechange', (e) => {
-      console.log(e, xhr);
-      console.log('Ready state: ', xhr.readyState);
-
-      if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
-        const data = JSON.parse(xhr.responseText);
-        generateJoke(data.value);
-      }
-    });
-  };
-
-  const getJokeJQuery = () => {
-    $.getJSON('https://api.chucknorris.io/jokes/random', (data) => {
-      generateJoke(data.value);
-    });
-
-    // $.ajax({
-    //   method: 'GET',
-    //   url: 'https://api.chucknorris.io/jokes/random',
-    //   dataType: 'json',
-    //   success: (data) => {
-    //     generateJoke(data.value);
-    //   },
-    //   error: (err) => {
-    //     console.log(err);
-    //   },
-    // })
-    //   .done((data) => console.log(data))
-    //   .fail((err) => console.error(err));
-  };
-
   // === FUNCTIONS ========
-  const generateJoke = (joke) => {
-    DOM.jokeText.textContent = joke;
-  };
 
   init();
 })();

02_advanced/unterricht/tag17/03_wetter-box/dev/scss/03_base/_utils.scss

@@ -0,0 +1,32 @@
+// Shadow Effects ==========================
+// https://codepen.io/sdthornton/pen/wBZdXq
+.drop-shadow-curved {
+  position: relative;
+  float: left;
+  width: 40%;
+  padding: 1em;
+  margin: 2em 10px 4em;
+  background: #fff;
+  box-shadow:
+    0 1px 4px rgba(0, 0, 0, 0.3),
+    0 0 40px rgba(0, 0, 0, 0.1) inset;
+
+  &:before,
+  &:after {
+    content: '';
+    width: 3px;
+    position: absolute;
+    z-index: -1;
+
+    top: 10px;
+    bottom: 10px;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
+    border-radius: 10px / 100px;
+  }
+  &:before {
+    left: 0;
+  }
+  &:after {
+    right: 0;
+  }
+}

02_advanced/unterricht/tag17/03_wetter-box/dev/scss/05_modules/_index.scss

@@ -1,4 +1,5 @@
-@import 'chuck-norris-joke';
+// @import 'chuck-norris-joke';
 // @import 'header-main';
 // @import 'logo-main';
 // @import 'menu-main';
+@import 'weather-box';

02_advanced/unterricht/tag17/03_wetter-box/dev/scss/05_modules/_weather-box.scss

@@ -0,0 +1,73 @@
+@use 'sass:color';
+
+.weather-box {
+  background-color: #efefef;
+  padding: 1rem;
+  border-radius: 1rem;
+  font-family: $font-copy;
+  max-width: 400px;
+
+  display: flex;
+
+  .weather-pic {
+    width: 45%;
+    figure {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      img,
+      svg {
+        width: 100%;
+      }
+      img {
+        border-radius: 1rem;
+      }
+      figcaption {
+        text-align: center;
+        line-height: 1.5;
+      }
+      .description {
+        text-align: center;
+        color: #ccc;
+        line-height: 1.5;
+      }
+    }
+  }
+
+  .weather-information {
+    padding: 2.5rem 0 0;
+    width: 55%;
+
+    .text-temp {
+      text-align: center;
+      font-size: 3rem;
+      margin: 0;
+      color: #555;
+    }
+    .temp-unit {
+      font-size: 2.5rem;
+      // color: lighten(#555, 20%);
+      color: color.scale(#555, $lightness: 20%);
+    }
+
+    .text-temp-min-max {
+      text-align: center;
+      color: #ccc;
+      line-height: 1;
+      margin: 0 0 2rem;
+    }
+
+    .wind-information {
+      display: flex;
+      text-align: center;
+      .icon-compass {
+        font-size: 48px;
+        color: #777;
+        width: 48px;
+        height: 48px;
+        // transform: rotate(-45deg);
+        margin: 0 1rem 0 2rem;
+      }
+    }
+  }
+}

02_advanced/unterricht/tag17/03_wetter-box/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Chuck Norris Joke (API)</title>
+    <title>Wetter (API)</title>
     <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
 
     <link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96" />
@@ -13,16 +13,45 @@
     <meta name="apple-mobile-web-app-title" content="Wetter" />
     <link rel="manifest" href="/favicon/site.webmanifest" />
 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.3.1/css/all.min.css" />
     <link rel="stylesheet" href="/assets/css/main.css" />
+
     <script src="/assets/js/build.js" defer></script>
   </head>
   <body>
     <main>
-      <section class="section-joke">
+      <section class="section-weather">
-        <!-- .chuck-norris-joke>blockquote.joke-text+button.btn.btn-dark.button-get-joke{Get Joke} -->
+        <div class="container py-5">
-        <div class="chuck-norris-joke">
+          <h2>Weather Box</h2>
-          <blockquote class="joke-text"></blockquote>
+          <!-- ▼ weather-box ▼ -->
-          <button class="btn btn-dark button-get-joke">Get Joke</button>
+          <div class="weather-box drop-shadow-curved">
+            <!-- .weather-pic>figure>img+figc+p.description{WEATHER_DESCRIPTION} -->
+            <div class="weather-pic">
+              <figure>
+                <img src="https://dummyimage.com/100x100.jpg" alt="" />
+                <figcaption>{TITLE}</figcaption>
+                <p class="description">WEATHER_DESCRIPTION</p>
+              </figure>
+            </div>
+            <!-- .weather-information>p.text-temp>span.temp{00}+span.temp-unit{°C} -->
+            <div class="weather-information">
+              <p class="text-temp"><span class="temp">00</span><span class="temp-unit">°C</span></p>
+              <p class="text-temp-min-max"><span class="temp-min">00</span> - <span class="temp-max">99</span></p>
+
+              <!-- .wind-information>i.fa-regular.fa-compass.icon-compass+p.text-wind-info -->
+              <div class="wind-information">
+                <i class="fa-regular fa-compass icon-compass"></i>
+                <p class="text-wind-info">
+                  <span class="speed">{00}</span>
+                  <span class="speed-unit">km/h</span>
+                  <br />
+                  <span class="wind-deg">{359}</span>
+                  <span class="wind-deg-unit">°</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <!-- ▲ /weather-box ▲ -->
         </div>
       </section>
     </main>

02_advanced/unterricht/tag17/03_wetter-box/package.json

@@ -4,7 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "server": "npx http-server -p 3000 -c-1",
+    "http-server": "npx http-server -p 3000 -c-1",
+    "server": "npx browser-sync start --server --files 'assets/css/*.css, assets/js/*.js, **/*.html, *.html'",
     "css": "npx sass dev/scss/main.scss:assets/css/main.css -w -q",
     "js": "npx esbuild dev/js/main.js --watch --bundle --sourcemap --outfile=assets/js/build.js",
     "dev": "run-p css js server"
@@ -12,6 +13,7 @@
   "keywords": [],
   "type": "module",
   "devDependencies": {
+    "browser-sync": "^3.0.4",
     "esbuild": "^0.28.2",
     "http-server": "^14.1.1",
     "npm-run-all": "^4.1.5",