-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathweather.html
88 lines (57 loc) · 3.37 KB
/
weather.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title id="title">Wetter</title>
<link rel="stylesheet" href="./assets/css/styles.css">
<link rel="stylesheet" href="./assets/css/dark-styles.css">
<link rel="stylesheet" href="./assets/css/line-colors.css">
<link rel="shortcut icon" type="image/x-icon" href="./assets/branding/favicon.ico">
<link rel="manifest" href="/manifest.json" type="application/json" >
<meta name="theme-color" content="#000">
</head>
<body class="bodyWithPopup">
<script src="./assets/src/pinnedPopup.js"></script>
<center>
<nav id="navbar"><div class="tabs"><span class="active"> Wetter <span id="city"></span> </a></div><div class="iconbar bigonly"><a href="#" onclick="history.go(-1)">Schließen</a></div><div class="iconbar"><a href="#" onclick="history.go(-1)"><img src="./assets/icons/close.svg" class="mediumicon"></a></div></nav>
<div class="blanktext">
<br>
<span class="aligner" id="weatherheader"></span>
<p id="description"></p>
<p id="feelsLike"></p>
<p id="minMax"></p>
<p id="pressure"></p>
<p id="humidity"></p>
<p id="wind"></p>
<p id="clouds"></p>
<div id="warnings"></div>
<p><small>Wetterdaten: Open Weather Map</small></p>
</div>
</center>
<script>
const urlParams = new URLSearchParams(window.location.search);
var city = urlParams.get('city');
fetch(`https://data.cuzimmartin.dev/weather?city=${city}`)
.then(response => response.json())
.then(weatherdata => {
console.log(weatherdata.main.temp);
console.log(weatherdata.weather[0].description);
document.getElementById('city').innerHTML = weatherdata.name;
document.getElementById('weatherheader').innerHTML = "<span class=\"big\">" + Math.floor(weatherdata.main.temp) + "°C</span> <img src=\"./assets/weatcherIcons/" + weatherdata.weather[0].icon + ".svg\" class=\"megaicon noinvert\">";
document.getElementById('feelsLike').innerHTML = "Gefühlt wie: " + Math.floor(weatherdata.main.feels_like) + "°C";
document.getElementById('description').innerHTML = weatherdata.weather[0].description;
document.getElementById('minMax').innerHTML = "🔽 " + weatherdata.main.temp_min + "°C / 🔼 " + weatherdata.main.temp_max + "°C";
document.getElementById('pressure').innerHTML = "⏱ Luftdruck: " + weatherdata.main.pressure + " mbar";
document.getElementById('humidity').innerHTML = "💧 Luftfeuchte: " + weatherdata.main.humidity + " %";
document.getElementById('wind').innerHTML = "💨 Wind: " + Math.floor(weatherdata.wind.speed) + " km/h / "+ weatherdata.wind.deg + "°";
document.getElementById('clouds').innerHTML = "☁ Bewölkung: " + weatherdata.clouds.all + " %";
if (weatherdata?.alerts?.[0]?.properties?.EVENT != null) {
document.getElementById('warnings').innerHTML = "<div class=\"weatherwarning\"><small class=\"secondary\">📢 Wetterwarnung</small><br><b>" + weatherdata.alerts[0].properties?.EVENT + "</b><br><small>" + weatherdata.alerts[0].properties?.DESCRIPTION + "<hr><b>Herausgeber:</b> " + weatherdata.alerts[0].properties?.CONTACT + "</small></div>";
}
document.getElementById('title').innerHTML = weatherdata.name + " " + Math.floor(weatherdata.main.temp) + "°C - " + weatherdata.weather[0].description;
})
fetchAndDisplayData();
</script>
</body>
</html>