99 lines
4.4 KiB
HTML
99 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="pl">
|
||
<head>
|
||
<meta charset="UTF-8"> <!-- Ustawienie kodowania znaków na UTF-8 -->
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Responsywność na urządzeniach mobilnych -->
|
||
<title>Aplikacja Pogodowa</title> <!-- Tytuł strony w przeglądarce -->
|
||
<link rel="stylesheet" href="/style.css"> <!-- Dołączenie zewnętrznego pliku CSS -->
|
||
</head>
|
||
<body>
|
||
<div class="container"> <!-- Główne opakowanie dla treści -->
|
||
<h1>Aplikacja Pogodowa</h1> <!-- Nagłówek strony -->
|
||
|
||
<!-- Formularz pogodowy wysyłany metodą POST na adres /pogoda -->
|
||
<form id="weather-form" method="POST" action="/pogoda">
|
||
<div class="form-group">
|
||
<label for="country">Wybierz kraj:</label>
|
||
<!-- Lista rozwijana z krajami -->
|
||
<select name="country" id="country" required>
|
||
<option value="">Wybierz kraj...</option>
|
||
<option value="Polska">Polska</option>
|
||
<option value="Niemcy">Niemcy</option>
|
||
<option value="Francja">Francja</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="city">Miasto:</label>
|
||
<!-- Lista rozwijana z miastami (uzupełniana dynamicznie przez JavaScript) -->
|
||
<select name="city" id="city" required>
|
||
<option value="">Wybierz miasto...</option>
|
||
</select>
|
||
</div>
|
||
|
||
<button type="submit">Sprawdź pogodę</button> <!-- Przycisk wysyłający formularz -->
|
||
</form>
|
||
|
||
<!-- Sekcja, w której pojawi się wynik (odpowiedź z serwera) -->
|
||
<div id="weather-result" style="margin-top: 20px;"></div>
|
||
</div>
|
||
|
||
<!-- Skrypt JS do dynamicznej obsługi formularza -->
|
||
<script>
|
||
// Po zmianie wybranego kraju, uzupełniamy listę miast
|
||
document.getElementById("country").addEventListener("change", function() {
|
||
const country = this.value; // Wartość wybranego kraju
|
||
const citySelect = document.getElementById("city"); // Element select z miastami
|
||
|
||
let cities = []; // Lista miast do uzupełnienia
|
||
|
||
// W zależności od kraju, ustawiamy odpowiednie miasta
|
||
if (country === "Polska") {
|
||
cities = ["Warszawa", "Lublin", "Gdańsk"];
|
||
} else if (country === "Niemcy") {
|
||
cities = ["Berlin", "Monachium", "Hamburg"];
|
||
} else if (country === "Francja") {
|
||
cities = ["Paryż", "Marsylia", "Lyon"];
|
||
}
|
||
|
||
// Czyścimy poprzednie opcje i dodajemy nowe
|
||
citySelect.innerHTML = '<option value="">Wybierz miasto...</option>';
|
||
|
||
cities.forEach(function(city) {
|
||
const option = document.createElement("option");
|
||
option.value = city;
|
||
option.textContent = city;
|
||
citySelect.appendChild(option);
|
||
});
|
||
});
|
||
|
||
// Obsługa formularza – wysyłanie danych AJAXem (bez przeładowania strony)
|
||
document.getElementById("weather-form").addEventListener("submit", function(event) {
|
||
event.preventDefault(); // Zatrzymujemy domyślne wysyłanie formularza
|
||
|
||
const country = document.getElementById("country").value; // Wybrany kraj
|
||
const city = document.getElementById("city").value; // Wybrane miasto
|
||
|
||
// Wysyłamy dane do serwera metodą POST
|
||
fetch("/pogoda", {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/x-www-form-urlencoded",
|
||
},
|
||
body: new URLSearchParams({ country, city }) // Przesyłane dane formularza
|
||
})
|
||
.then(response => response.text()) // Odbieramy odpowiedź jako tekst HTML
|
||
.then(data => {
|
||
// Wyświetlamy wynik w <div id="weather-result">
|
||
document.getElementById("weather-result").innerHTML = data;
|
||
})
|
||
.catch(error => {
|
||
// Obsługa błędu – np. brak odpowiedzi z serwera
|
||
document.getElementById("weather-result").innerHTML = "Błąd podczas pobierania pogody.";
|
||
console.error("Błąd:", error);
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|