Skip to content

Commit bf03908

Browse files
codepeccodepec
committed
update
1 parent 73e119c commit bf03908

3 files changed

Lines changed: 101 additions & 172 deletions

File tree

‎weatherApp/index.html‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,28 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<head>
4-
<title>Weather App</title>
5-
<link rel="stylesheet" type="text/css" href="styles.css">
6-
<script defer src="script.js"></script>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Weather App</title>
7+
<link rel="stylesheet" href="styles.css">
8+
<script defer src="script.js"></script>
79
</head>
810
<body>
9-
<h1>Weather App</h1>
10-
11-
<form id="weatherForm" onsubmit="return false;">
12-
<label for="locationInput">Location:</label>
13-
<input type="text" id="locationInput" placeholder="Enter location">
14-
<button onclick="showWeather()">Get Weather</button>
15-
</form>
16-
17-
<div class="weatherContainerClass" id="weatherContainer"></div>
18-
19-
11+
<h1>Weather App</h1>
2012

13+
<form id="weatherForm">
14+
<label for="citySelect">Select a city:</label>
15+
<select id="citySelect">
16+
<option value="">-- Choose a city --</option>
17+
<option value="New York">New York</option>
18+
<option value="Malibu">Malibu</option>
19+
<option value="Pakistan">Pakistan</option>
20+
<option value="Cape Town">Cape Town</option>
21+
<option value="Hamburg">Hamburg</option>
22+
</select>
23+
<button type="submit">Get Weather</button>
24+
</form>
2125

26+
<div id="weatherContainer"></div>
2227
</body>
2328
</html>

‎weatherApp/script.js‎

Lines changed: 47 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,67 @@
11
const weatherData = {
2-
"New York": {
3-
condition: "Cloudy",
4-
tempDay: 20,
5-
tempNight: 11
6-
},
7-
"Malibu": {
8-
condition: "Sunny",
9-
tempDay: 26,
10-
tempNight: 18
11-
},
12-
"Pakistan": {
13-
condition: "Partly Cloudy",
14-
tempDay: 32,
15-
tempNight: 24
16-
},
17-
"Cape Town": {
18-
condition: "Rainy",
19-
tempDay: 15,
20-
tempNight: 8
21-
},
22-
"Hamburg": {
23-
condition: "Windy",
24-
tempDay: 18,
25-
tempNight: 12
26-
}
2+
"New York": { condition: "Cloudy", tempDay: 20, tempNight: 11 },
3+
"Malibu": { condition: "Sunny", tempDay: 26, tempNight: 18 },
4+
"Pakistan": { condition: "Partly Cloudy", tempDay: 32, tempNight: 24 },
5+
"Cape Town": { condition: "Rainy", tempDay: 15, tempNight: 8 },
6+
"Hamburg": { condition: "Windy", tempDay: 18, tempNight: 12 }
277
};
288

9+
document.getElementById("weatherForm").addEventListener("submit", function(event) {
10+
event.preventDefault();
11+
showWeather();
12+
});
13+
2914
function showWeather() {
30-
const location = document.getElementById("locationInput").value;
15+
const city = document.getElementById("citySelect").value;
3116
const weatherContainer = document.getElementById("weatherContainer");
3217

33-
console.log("Selected location:", location);
18+
// Clear previous content safely
19+
weatherContainer.innerHTML = "";
3420

35-
if (!location || !weatherData[location]) {
36-
console.log("Weather information not available for this location.");
37-
weatherContainer.textContent = "Weather information not available for this location.";
38-
return;
21+
if (!city) {
22+
const message = document.createElement("p");
23+
message.textContent = "Please select a city.";
24+
weatherContainer.appendChild(message);
25+
return;
3926
}
4027

41-
console.log("Weather data for", location, ":", weatherData[location]);
42-
43-
weatherContainer.innerHTML = "";
28+
const weather = weatherData[city];
4429

30+
// Create a weather tile securely
4531
const weatherTile = document.createElement("div");
4632
weatherTile.className = "weatherTile";
4733

48-
const h2 = document.createElement("h2");
49-
h2.textContent = `Weather in ${location}`;
50-
weatherTile.appendChild(h2);
34+
const title = document.createElement("h2");
35+
title.textContent = `Weather in ${city}`;
5136

52-
const conditionElement = document.createElement("p");
53-
conditionElement.textContent = `Condition: ${weatherData[location].condition}`;
54-
weatherTile.appendChild(conditionElement);
37+
const conditionText = document.createElement("p");
38+
conditionText.textContent = `Condition: ${weather.condition}`;
5539

56-
const tempDayElement = document.createElement("p");
57-
tempDayElement.textContent = `Temperature (Day): ${weatherData[location].tempDay} °C`;
58-
weatherTile.appendChild(tempDayElement);
40+
const tempDayText = document.createElement("p");
41+
tempDayText.textContent = `Temperature (Day): ${weather.tempDay}°C`;
5942

60-
const tempNightElement = document.createElement("p");
61-
tempNightElement.textContent = `Temperature (Night): ${weatherData[location].tempNight} °C`;
62-
weatherTile.appendChild(tempNightElement);
43+
const tempNightText = document.createElement("p");
44+
tempNightText.textContent = `Temperature (Night): ${weather.tempNight}°C`;
6345

46+
// Append elements safely
47+
weatherTile.appendChild(title);
48+
weatherTile.appendChild(conditionText);
49+
weatherTile.appendChild(tempDayText);
50+
weatherTile.appendChild(tempNightText);
6451
weatherContainer.appendChild(weatherTile);
52+
53+
updateBackground(weather.condition);
6554
}
6655

67-
window.addEventListener("DOMContentLoaded", () => {
68-
const locations = Object.keys(weatherData);
69-
locations.forEach((location) => {
70-
showWeather(location);
71-
});
72-
});
56+
function updateBackground(condition) {
57+
const body = document.body;
58+
if (condition.includes("Rain")) {
59+
body.style.backgroundColor = "#4a90e2";
60+
} else if (condition.includes("Sunny")) {
61+
body.style.backgroundColor = "#f7d154";
62+
} else if (condition.includes("Cloudy")) {
63+
body.style.backgroundColor = "#95a5a6";
64+
} else {
65+
body.style.backgroundColor = "#83a8c2";
66+
}
67+
}

‎weatherApp/styles.css‎

Lines changed: 34 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,36 @@
1-
/* Allgemeine Stile */
2-
31
body {
4-
background-color: rgb(83, 168, 194);
5-
font-family: Arial, sans-serif;
6-
margin: 0;
7-
padding: 0;
8-
}
9-
10-
h1 {
11-
color: white;
12-
text-align: center;
13-
padding: 20px 0;
14-
box-shadow: 5px 5px 10px 10px black;
15-
}
16-
17-
/* Formularstil */
18-
19-
#weatherForm {
20-
text-align: center;
21-
margin-bottom: 20px;
22-
}
23-
24-
label {
25-
color: white;
26-
font-weight: bold;
27-
}
28-
29-
input[type="text"] {
30-
padding: 5px;
31-
width: 200px;
32-
margin-right: 10px;
33-
}
34-
35-
button {
36-
padding: 5px 10px;
37-
background-color: white;
38-
color: rgb(83, 168, 194);
39-
border: none;
40-
cursor: pointer;
41-
}
42-
43-
/* Wetterkachelstil */
44-
45-
.weatherContainerClass {
46-
display: flex;
47-
flex-wrap: wrap;
48-
justify-content: center;
49-
}
50-
51-
.weatherTile {
52-
background-color: black;
53-
border: 1px solid white;
54-
box-shadow: 0 0 15px white;
55-
color: white;
56-
padding: 20px;
57-
margin: 5px;
58-
text-align: center;
59-
border-radius: 15px;
60-
}
61-
62-
.weatherTile h2 {
63-
font-size: 20px;
64-
margin-bottom: 10px;
65-
}
66-
67-
.weatherTile p {
68-
margin-bottom: 5px;
69-
}
70-
71-
/* Medienabfragen für die Responsive-Ansicht */
72-
73-
@media screen and (max-width: 768px) {
74-
.weatherTile {
75-
flex: 0 0 calc(50% - 40px); /* Breite auf 50% setzen, Abstand von 20px berücksichtigen */
76-
}
77-
}
78-
79-
@media screen and (max-width: 480px) {
80-
.weatherTile {
81-
flex: 0 0 calc(100% - 10px); /* Breite auf 100% setzen, Abstand von 5px berücksichtigen */
82-
}
2+
font-family: Arial, sans-serif;
3+
text-align: center;
4+
background-color: rgb(83, 168, 194);
5+
color: white;
6+
margin: 0;
7+
padding: 0;
8+
}
9+
10+
h1 {
11+
padding: 20px;
12+
box-shadow: 5px 5px 10px black;
13+
}
14+
15+
form {
16+
margin: 20px;
17+
}
18+
19+
select, button {
20+
padding: 10px;
21+
margin: 10px;
22+
font-size: 16px;
23+
}
24+
25+
#weatherContainer {
26+
margin-top: 20px;
27+
}
8328

84-
.weatherContainerClass {
85-
display: flex;
86-
flex-wrap: wrap;
87-
justify-content: center;
88-
}
89-
90-
.weatherTile {
91-
background-color: black;
92-
border: 1px solid white;
93-
box-shadow: 0 0 5px white;
94-
color: white;
95-
padding: 20px;
96-
margin: 5px;
97-
text-align: center;
98-
flex: 0 0 calc(50% - 10px); /* Breite auf 50% setzen, Abstand von 5px berücksichtigen */
99-
}
100-
input[type="text"] {
101-
padding: 5px;
102-
width: 100%;
103-
margin-bottom: 10px;
104-
}
105-
106-
}
107-
29+
.weatherTile {
30+
display: inline-block;
31+
background-color: black;
32+
border-radius: 10px;
33+
padding: 20px;
34+
box-shadow: 0 0 10px white;
35+
margin-top: 20px;
36+
}

0 commit comments

Comments
 (0)