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-29 14:51:19 +02:00
parent 4fe074b619
commit 6ceab20458
3 changed files with 18 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
02_advanced/unterricht/tag17/03_wetter-box/assets/js/build.js
+7 -1
View File
@@ -15,12 +15,13 @@
deg: document.querySelector(".wind-deg")
};
console.log(DOM);
const API_KEY = "b62eaccfd1a09cf1d04b00bd2ec689e7";
const API_KEY = "EIGENER_KEY";
const LAT = 43.720215;
const LON = 7.352606;
const init = () => {
getWeather().then((data) => {
console.log(data);
setWeather(data);
});
};
const getWeather = async () => {
@@ -38,6 +39,11 @@
throw error;
}
};
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;
};
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 = 'b62eaccfd1a09cf1d04b00bd2ec689e7';\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 });\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\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;AAAA,MAClB,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;AAIA,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 // 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;",
"names": []
}
02_advanced/unterricht/tag17/03_wetter-box/dev/js/main.js
+9 -1
View File
@@ -18,7 +18,7 @@
console.log(DOM);
// BITTE EIGENEN API KEY VERWENDEN
const API_KEY = 'b62eaccfd1a09cf1d04b00bd2ec689e7';
const API_KEY = 'EIGENER_KEY';
// https//latlong.net
const LAT = 43.720215;
const LON = 7.352606;
@@ -28,6 +28,7 @@
const init = () => {
getWeather().then((data) => {
console.log(data);
setWeather(data);
});
};
@@ -51,6 +52,13 @@
};
// === FUNCTIONS ========
const setWeather = (data) => {
// https://openweathermap.org/img/wn/04d@2x.png
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;
};
init();
})();