ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
Philippe Torrel
2026-09-30 09:42:22 +02:00
parent 102a818a83
commit 635c23d5e8
6 changed files with 38 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
02_advanced/unterricht/tag17/03_wetter-box/assets/css/main.css
+4 -1
View File
@@ -12111,7 +12111,7 @@ blockquote {
}
.weather-box {
background-color: #efefef;
background-color: #fff;
padding: 1rem;
border-radius: 1rem;
font-family: "Source Sans 3", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
@@ -12167,10 +12167,13 @@ blockquote {
text-align: center;
}
.weather-box .weather-information .wind-information .icon-compass {
transition: all 0.8s ease-out;
transition-delay: 200ms;
font-size: 48px;
color: #777;
width: 48px;
height: 48px;
transform: rotate(-45deg);
margin: 0 1rem 0 2rem;
}
02_advanced/unterricht/tag17/03_wetter-box/assets/css/main.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
02_advanced/unterricht/tag17/03_wetter-box/assets/js/build.js
+12 -3
View File
@@ -40,9 +40,18 @@
}
};
const setWeather = (data) => {
DOM.weatherIcon.src = `https://openweathermap.org/img/wn/04d@2x.png`;
DOM.figcaption.textContent = data.weather[0].main;
DOM.description.textContent = data.weather[0].description;
const { temp_min: tempMin, temp_max: tempMax, temp } = data.main;
const { speed, deg } = data.wind;
const { main, description, icon } = data.weather[0];
DOM.weatherIcon.src = `https://openweathermap.org/img/wn/${icon}@2x.png`;
DOM.figcaption.textContent = main;
DOM.description.textContent = description;
DOM.temp.textContent = temp;
DOM.tempMin.textContent = tempMin;
DOM.tempMax.textContent = tempMax;
DOM.speed.textContent = speed;
DOM.deg.textContent = deg;
DOM.iconCompass.style.transform = `rotate(${Number(deg) - 45}deg)`;
};
init();
})();
02_advanced/unterricht/tag17/03_wetter-box/assets/js/build.js.map
+2 -2
View File
@@ -1,7 +1,7 @@
{
"version": 3,
"sources": ["../../dev/js/main.js"],
"sourcesContent": ["'use strict';\n\n(() => {\n // === DOM & VARS =======\n const DOM = {\n weatherBox: document.querySelector('.weather-box'),\n weatherIcon: document.querySelector('.weather-pic img'),\n figcaption: document.querySelector('figcaption'),\n description: document.querySelector('.description'),\n temp: document.querySelector('.temp'),\n tempMin: document.querySelector('.temp-min'),\n tempMax: document.querySelector('.temp-max'),\n iconCompass: document.querySelector('.icon-compass'),\n speed: document.querySelector('.speed'),\n deg: document.querySelector('.wind-deg'),\n };\n\n console.log(DOM);\n\n // BITTE EIGENEN API KEY VERWENDEN\n const API_KEY = 'EIGENER_KEY';\n // https//latlong.net\n const LAT = 43.720215;\n const LON = 7.352606;\n\n // https://api.openweathermap.org/data/4.0/onecall/timeline/1day?cnt=10&lat=51.5000&lon=-0.1000&start=1776596400&appid={API key}\n // === INIT =============\n const init = () => {\n getWeather().then((data) => {\n console.log(data);\n setWeather(data);\n });\n };\n\n // === EVENTHANDLER =====\n\n // === XHR/FETCH ========\n const getWeather = async () => {\n try {\n const res = await fetch(\n `https://api.openweathermap.org/data/2.5/weather?lat=${LAT}&lon=${LON}&units=metric&appid=${API_KEY}`,\n );\n if (!res.ok) {\n throw Error('Fetch Error');\n }\n const data = await res.json();\n return data; // -> Promise\n } catch (error) {\n console.error(error);\n throw error;\n }\n };\n\n // === FUNCTIONS ========\n const setWeather = (data) => {\n // https://openweathermap.org/img/wn/04d@2x.png\n DOM.weatherIcon.src = `https://openweathermap.org/img/wn/04d@2x.png`;\n\n DOM.figcaption.textContent = data.weather[0].main;\n DOM.description.textContent = data.weather[0].description;\n };\n\n init();\n})();\n"],
"mappings": ";;;AAEA,GAAC,MAAM;AAEL,UAAM,MAAM;AAAA,MACV,YAAY,SAAS,cAAc,cAAc;AAAA,MACjD,aAAa,SAAS,cAAc,kBAAkB;AAAA,MACtD,YAAY,SAAS,cAAc,YAAY;AAAA,MAC/C,aAAa,SAAS,cAAc,cAAc;AAAA,MAClD,MAAM,SAAS,cAAc,OAAO;AAAA,MACpC,SAAS,SAAS,cAAc,WAAW;AAAA,MAC3C,SAAS,SAAS,cAAc,WAAW;AAAA,MAC3C,aAAa,SAAS,cAAc,eAAe;AAAA,MACnD,OAAO,SAAS,cAAc,QAAQ;AAAA,MACtC,KAAK,SAAS,cAAc,WAAW;AAAA,IACzC;AAEA,YAAQ,IAAI,GAAG;AAGf,UAAM,UAAU;AAEhB,UAAM,MAAM;AACZ,UAAM,MAAM;AAIZ,UAAM,OAAO,MAAM;AACjB,iBAAW,EAAE,KAAK,CAAC,SAAS;AAC1B,gBAAQ,IAAI,IAAI;AAChB,mBAAW,IAAI;AAAA,MACjB,CAAC;AAAA,IACH;AAKA,UAAM,aAAa,YAAY;AAC7B,UAAI;AACF,cAAM,MAAM,MAAM;AAAA,UAChB,uDAAuD,GAAG,QAAQ,GAAG,uBAAuB,OAAO;AAAA,QACrG;AACA,YAAI,CAAC,IAAI,IAAI;AACX,gBAAM,MAAM,aAAa;AAAA,QAC3B;AACA,cAAM,OAAO,MAAM,IAAI,KAAK;AAC5B,eAAO;AAAA,MACT,SAAS,OAAO;AACd,gBAAQ,MAAM,KAAK;AACnB,cAAM;AAAA,MACR;AAAA,IACF;AAGA,UAAM,aAAa,CAAC,SAAS;AAE3B,UAAI,YAAY,MAAM;AAEtB,UAAI,WAAW,cAAc,KAAK,QAAQ,CAAC,EAAE;AAC7C,UAAI,YAAY,cAAc,KAAK,QAAQ,CAAC,EAAE;AAAA,IAChD;AAEA,SAAK;AAAA,EACP,GAAG;",
"sourcesContent": ["'use strict';\n\n(() => {\n // === DOM & VARS =======\n const DOM = {\n weatherBox: document.querySelector('.weather-box'),\n weatherIcon: document.querySelector('.weather-pic img'),\n figcaption: document.querySelector('figcaption'),\n description: document.querySelector('.description'),\n temp: document.querySelector('.temp'),\n tempMin: document.querySelector('.temp-min'),\n tempMax: document.querySelector('.temp-max'),\n iconCompass: document.querySelector('.icon-compass'),\n speed: document.querySelector('.speed'),\n deg: document.querySelector('.wind-deg'),\n };\n\n console.log(DOM);\n\n // BITTE EIGENEN API KEY VERWENDEN\n const API_KEY = 'EIGENER_KEY';\n // https//latlong.net\n const LAT = 43.720215;\n const LON = 7.352606;\n\n // https://api.openweathermap.org/data/4.0/onecall/timeline/1day?cnt=10&lat=51.5000&lon=-0.1000&start=1776596400&appid={API key}\n // === INIT =============\n const init = () => {\n getWeather().then((data) => {\n console.log(data);\n setWeather(data);\n });\n };\n\n // === EVENTHANDLER =====\n\n // === XHR/FETCH ========\n const getWeather = async () => {\n try {\n const res = await fetch(\n `https://api.openweathermap.org/data/2.5/weather?lat=${LAT}&lon=${LON}&units=metric&appid=${API_KEY}`,\n );\n if (!res.ok) {\n throw Error('Fetch Error');\n }\n const data = await res.json();\n return data; // -> Promise\n } catch (error) {\n console.error(error);\n throw error;\n }\n };\n\n // === FUNCTIONS ========\n const setWeather = (data) => {\n const { temp_min: tempMin, temp_max: tempMax, temp } = data.main;\n const { speed, deg } = data.wind;\n const { main, description, icon } = data.weather[0];\n\n // https://openweathermap.org/img/wn/04d@2x.png\n DOM.weatherIcon.src = `https://openweathermap.org/img/wn/${icon}@2x.png`;\n\n DOM.figcaption.textContent = main;\n DOM.description.textContent = description;\n DOM.temp.textContent = temp;\n DOM.tempMin.textContent = tempMin;\n DOM.tempMax.textContent = tempMax;\n DOM.speed.textContent = speed;\n DOM.deg.textContent = deg;\n\n DOM.iconCompass.style.transform = `rotate(${Number(deg) - 45}deg)`;\n };\n\n init();\n})();\n"],
"mappings": ";;;AAEA,GAAC,MAAM;AAEL,UAAM,MAAM;AAAA,MACV,YAAY,SAAS,cAAc,cAAc;AAAA,MACjD,aAAa,SAAS,cAAc,kBAAkB;AAAA,MACtD,YAAY,SAAS,cAAc,YAAY;AAAA,MAC/C,aAAa,SAAS,cAAc,cAAc;AAAA,MAClD,MAAM,SAAS,cAAc,OAAO;AAAA,MACpC,SAAS,SAAS,cAAc,WAAW;AAAA,MAC3C,SAAS,SAAS,cAAc,WAAW;AAAA,MAC3C,aAAa,SAAS,cAAc,eAAe;AAAA,MACnD,OAAO,SAAS,cAAc,QAAQ;AAAA,MACtC,KAAK,SAAS,cAAc,WAAW;AAAA,IACzC;AAEA,YAAQ,IAAI,GAAG;AAGf,UAAM,UAAU;AAEhB,UAAM,MAAM;AACZ,UAAM,MAAM;AAIZ,UAAM,OAAO,MAAM;AACjB,iBAAW,EAAE,KAAK,CAAC,SAAS;AAC1B,gBAAQ,IAAI,IAAI;AAChB,mBAAW,IAAI;AAAA,MACjB,CAAC;AAAA,IACH;AAKA,UAAM,aAAa,YAAY;AAC7B,UAAI;AACF,cAAM,MAAM,MAAM;AAAA,UAChB,uDAAuD,GAAG,QAAQ,GAAG,uBAAuB,OAAO;AAAA,QACrG;AACA,YAAI,CAAC,IAAI,IAAI;AACX,gBAAM,MAAM,aAAa;AAAA,QAC3B;AACA,cAAM,OAAO,MAAM,IAAI,KAAK;AAC5B,eAAO;AAAA,MACT,SAAS,OAAO;AACd,gBAAQ,MAAM,KAAK;AACnB,cAAM;AAAA,MACR;AAAA,IACF;AAGA,UAAM,aAAa,CAAC,SAAS;AAC3B,YAAM,EAAE,UAAU,SAAS,UAAU,SAAS,KAAK,IAAI,KAAK;AAC5D,YAAM,EAAE,OAAO,IAAI,IAAI,KAAK;AAC5B,YAAM,EAAE,MAAM,aAAa,KAAK,IAAI,KAAK,QAAQ,CAAC;AAGlD,UAAI,YAAY,MAAM,qCAAqC,IAAI;AAE/D,UAAI,WAAW,cAAc;AAC7B,UAAI,YAAY,cAAc;AAC9B,UAAI,KAAK,cAAc;AACvB,UAAI,QAAQ,cAAc;AAC1B,UAAI,QAAQ,cAAc;AAC1B,UAAI,MAAM,cAAc;AACxB,UAAI,IAAI,cAAc;AAEtB,UAAI,YAAY,MAAM,YAAY,UAAU,OAAO,GAAG,IAAI,EAAE;AAAA,IAC9D;AAEA,SAAK;AAAA,EACP,GAAG;",
"names": []
}
02_advanced/unterricht/tag17/03_wetter-box/dev/js/main.js
+15 -4
View File
@@ -53,11 +53,22 @@
// === FUNCTIONS ========
const setWeather = (data) => {
// https://openweathermap.org/img/wn/04d@2x.png
DOM.weatherIcon.src = `https://openweathermap.org/img/wn/04d@2x.png`;
const { temp_min: tempMin, temp_max: tempMax, temp } = data.main;
const { speed, deg } = data.wind;
const { main, description, icon } = data.weather[0];
DOM.figcaption.textContent = data.weather[0].main;
DOM.description.textContent = data.weather[0].description;
// https://openweathermap.org/img/wn/04d@2x.png
DOM.weatherIcon.src = `https://openweathermap.org/img/wn/${icon}@2x.png`;
DOM.figcaption.textContent = main;
DOM.description.textContent = description;
DOM.temp.textContent = temp;
DOM.tempMin.textContent = tempMin;
DOM.tempMax.textContent = tempMax;
DOM.speed.textContent = speed;
DOM.deg.textContent = deg;
DOM.iconCompass.style.transform = `rotate(${Number(deg) - 45}deg)`;
};
init();
02_advanced/unterricht/tag17/03_wetter-box/dev/scss/05_modules/_weather-box.scss
+4 -2
View File
@@ -1,7 +1,7 @@
@use 'sass:color';
.weather-box {
background-color: #efefef;
background-color: #fff;
padding: 1rem;
border-radius: 1rem;
font-family: $font-copy;
@@ -61,11 +61,13 @@
display: flex;
text-align: center;
.icon-compass {
transition: all 0.8s ease-out;
transition-delay: 200ms;
font-size: 48px;
color: #777;
width: 48px;
height: 48px;
// transform: rotate(-45deg);
transform: rotate(-45deg);
margin: 0 1rem 0 2rem;
}
}