-
Notifications
You must be signed in to change notification settings - Fork 0
/
weather.html
136 lines (121 loc) · 5.38 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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="main1.css">
<meta charset="UTF-8">
<head>
<title>Wetterbericht</title>
</head>
<body>
<h1>Wetterbericht für <span id="city"></span></h1>
<form>
<input type="text" placeholder="Suche nach einem Ort" autofocus id="search-input">
<button type="submit">Suchen</button>
<span class="msg"></span>
</form>
<div class="current-weather">
<h2>Aktuelles Wetter</h2>
<p><span class="temperature"><span></span>°C<br><small></small></span></p>
<p><span class="weather-panel"></span></p>
</div>
<div class="forecast-weather">
<h2>5-Tages-Vorschau</h2>
<ul class="forecast"></ul>
</div>
<script>
const API_KEY = "Your_API";
const citySpan = document.getElementById("city");
const temperatureSpan = document.querySelector(".temperature span");
const minMaxSpan = document.querySelector(".temperature small");
const descSpan = document.querySelector(".weather-panel");
const forecastList = document.querySelector(".forecast");
const form = document.querySelector("form");
const input = document.querySelector("input");
const msg = document.querySelector(".msg");
//Search Button
form.addEventListener("submit", e => {
e.preventDefault();
const cityName = input.value.trim();
if (cityName === "") {
msg.textContent = "Bitte gib einen Städtenamen ein!";
} else {
msg.textContent = "";
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${API_KEY}&units=metric&lang=de`)
.then(response => {
if (!response.ok) {
throw new Error("Stadt konnte nicht gefunden werden.");
}
return response.json();
})
.then(data => {
const city = data.name;
const temperature = data.main.temp;
const minTemp = temperature;
const maxTemp = temperature;
const description = data.weather[0].description;
const icon = data.weather[0].icon;
// set the values in the HTML
citySpan.textContent = city;
temperatureSpan.textContent = Math.round(temperature);
descSpan.textContent = description;
msg.textContent = "";
})
.catch(error => {
msg.textContent = error.message;
citySpan.textContent = "";
temperatureSpan.textContent = "";
minMaxSpan.textContent = "";
descSpan.textContent = "";
});
//Forecast fetch
fetch(`https://api.openweathermap.org/data/2.5/forecast?q=${cityName}&appid=${API_KEY}&units=metric&lang=de`)
.then(response => {
if (!response.ok) {
throw new Error("Stadt konnte nicht gefunden werden..");
}
return response.json();
})
.then(data => {
forecastList.innerHTML = "";
const forecastData = data.list.filter(item => item.dt_txt.includes("12:00:00"));
let minTempFore = Number.MAX_VALUE;
let maxTempFore = Number.MIN_VALUE;
for (let i = 0; i < forecastData.length; i++) {
const date = new Date(forecastData[i].dt * 1000);
const day = date.toLocaleDateString("de-DE", { weekday: "long" });
const temperatureFore = Math.round(forecastData[i].main.temp);
const description = forecastData[i].weather[0].description;
const icon = forecastData[i].weather[0].icon;
const precipitationProb = forecastData[i].pop * 100; // get the probability of precipitation
const precipitation = forecastData[i].rain ? forecastData[i].rain["3h"] * 8 : 0; // get the daily precipitation volume
if (temperatureFore < minTempFore) {
minTempFore = temperatureFore;
}
if (temperatureFore > maxTempFore) {
maxTempFore = temperatureFore;
}
const li = document.createElement("li");
li.innerHTML = `<span>${day}</span>
<span style="font-weight: bold; font-size: 24px;">${temperatureFore}°C</span>
<span style="font-weight: bold; font-size: 16px; margin-top:1em; class="weather-panel">${description}</span>
<span style="font-weight: lighter; color:#757575; font-size: 16px;">${precipitationProb}% Niederschlag</span>
<span style="font-weight: lighter; color:#757575; font-size: 16px;">${precipitation.toFixed(1)} mm Niederschlag</span>`;
forecastList.appendChild(li);
}
minMaxSpan.textContent = `${Math.round(minTempFore)}°C / ${Math.round(maxTempFore)}°C`;
})
.catch(error => {
msg.textContent = error.message;
citySpan.textContent = "";
temperatureSpan.textContent = "";
minMaxSpan.textContent = "";
descSpan.textContent = "";
});
}
});
// set the current date in the HTML
const currentDate = new Date();
const dateOptions = { weekday: "long", year: "numeric", month: "long", day: "numeric" };
document.getElementById("current-date").textContent = currentDate.toLocaleDateString("de-DE", dateOptions);
</script>
</body>
</html>