02_advanced/unterricht/tag19/01_weather-box/assets/js/build.js

@@ -21,7 +21,10 @@
       console.log("init!");
       getWeather().then((data) => {
         console.log(data);
+        if (data) {
+          DOM.weatherBox.classList.add("show", "animate__flipInX");
           setWeather(data);
+        }
       });
     };
     const getWeather = async () => {
@@ -38,15 +41,23 @@
       }
     };
     const setWeather = (data) => {
-      DOM.figcaption.textContent = data.weather[0].main;
-      DOM.description.textContent = data.weather[0].description;
-      DOM.temp.textContent = Number(data.main.temp).toFixed(1);
-      DOM.tempMin.textContent = Number(data.main.temp_min).toFixed(2);
-      DOM.tempMax.textContent = Number(data.main.temp_max).toFixed(2);
-      DOM.speed.textContent = Number(data.wind.speed);
-      DOM.deg.textContent = Number(data.wind.deg);
-      DOM.weatherIcon.src = `https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`;
-      DOM.windIcon.style.transform = `rotate(${Number(data.wind.deg) - 45}deg)`;
+      const { main, description, icon } = data.weather[0];
+      const { temp, temp_min: tempMin, temp_max: tempMax } = data.main;
+      const { deg, speed } = data.wind;
+      DOM.figcaption.textContent = main;
+      DOM.description.textContent = description;
+      DOM.temp.textContent = Number(temp).toFixed(1);
+      DOM.tempMin.textContent = Number(tempMin).toFixed(2);
+      DOM.tempMax.textContent = Number(tempMax).toFixed(2);
+      DOM.speed.textContent = Number(speed);
+      DOM.deg.textContent = Number(deg);
+      DOM.weatherIcon.src = `https://openweathermap.org/img/wn/${icon}@2x.png`;
+      DOM.windIcon.style.transform = `rotate(${Number(deg) - 45}deg)`;
+      if (Number(temp) >= 30) {
+        DOM.temp.classList.add("danger");
+      } else if (Number(temp) <= 10) {
+        DOM.temp.classList.add("frozen");
+      }
     };
     init();
   })();

02_advanced/unterricht/tag19/01_weather-box/dev/assets/js/main.js

@@ -18,7 +18,7 @@
   // console.log(DOM);
 
   // BITTE EIGENEN API KEY VERWENDEN
-  const API_KEY = 'b62eaccfd1a09cf1d04b00bd2ec689e7';
+  const API_KEY = '';
   const LAT = 43.72072300281546;
   const LON = 7.352450291796612;
 
@@ -27,7 +27,10 @@
     console.log('init!');
     getWeather().then((data) => {
       console.log(data);
+      if (data) {
+        DOM.weatherBox.classList.add('show', 'animate__flipInX');
         setWeather(data);
+      }
     });
   };
 
@@ -52,17 +55,27 @@
 
   // === FUNCTIONS ========
   const setWeather = (data) => {
-    DOM.figcaption.textContent = data.weather[0].main;
-    DOM.description.textContent = data.weather[0].description;
-    DOM.temp.textContent = Number(data.main.temp).toFixed(1);
-    DOM.tempMin.textContent = Number(data.main.temp_min).toFixed(2);
-    DOM.tempMax.textContent = Number(data.main.temp_max).toFixed(2);
-    DOM.speed.textContent = Number(data.wind.speed);
-    DOM.deg.textContent = Number(data.wind.deg);
+    const { main, description, icon } = data.weather[0];
+    const { temp, temp_min: tempMin, temp_max: tempMax } = data.main;
+    const { deg, speed } = data.wind;
 
-    DOM.weatherIcon.src = `https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`;
+    DOM.figcaption.textContent = main;
+    DOM.description.textContent = description;
+    DOM.temp.textContent = Number(temp).toFixed(1);
+    DOM.tempMin.textContent = Number(tempMin).toFixed(2);
+    DOM.tempMax.textContent = Number(tempMax).toFixed(2);
+    DOM.speed.textContent = Number(speed);
+    DOM.deg.textContent = Number(deg);
 
-    DOM.windIcon.style.transform = `rotate(${Number(data.wind.deg) - 45}deg)`;
+    DOM.weatherIcon.src = `https://openweathermap.org/img/wn/${icon}@2x.png`;
+
+    DOM.windIcon.style.transform = `rotate(${Number(deg) - 45}deg)`;
+
+    if (Number(temp) >= 30) {
+      DOM.temp.classList.add('danger');
+    } else if (Number(temp) <= 10) {
+      DOM.temp.classList.add('frozen');
+    }
   };
 
   init();

02_advanced/unterricht/tag19/01_weather-box/dev/assets/scss/04_plugins/_index.scss

@@ -0,0 +1,2 @@
+//@import 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css';
+@import 'animate-4.1.1/animate';

02_advanced/unterricht/tag19/01_weather-box/dev/assets/scss/05_modules/_weather-box.scss

@@ -1,6 +1,11 @@
 @use 'sass:color';
 
 .weather-box {
+  opacity: 0;
+  &.show {
+    opacity: 1;
+  }
+
   background-color: #f8f8f8;
   padding: 1rem;
   border-radius: 1rem;
@@ -41,6 +46,12 @@
       font-size: 3rem;
       margin: 0;
       color: #555;
+      .danger {
+        color: tomato;
+      }
+      .frozen {
+        color: steelblue;
+      }
     }
     .temp-unit {
       font-size: 2.5rem;
@@ -60,6 +71,7 @@
       text-align: center;
       .fa-compass {
         transition: all 0.8s ease-out;
+        transition-delay: 500ms;
         font-size: 48px;
         width: 48px;
         height: 48px;

02_advanced/unterricht/tag19/01_weather-box/index.html

@@ -23,7 +23,7 @@
         <h1>Weather Box</h1>
 
         <!-- ▼ Weather Box ▼ -->
-        <div class="weather-box drop-shadow-curved">
+        <div class="weather-box drop-shadow-curved animate__animated">
           <!-- .weather-pic>figure>img+figc+p.description{WEATHER_DESCRIPTION} -->
           <div class="weather-pic">
             <figure>