Czy chciałbyś wyświetlić aktualną pogodę na swojej stronie internetowej za pomocą JavaScriptu? W tym artykule omówimy, jak krok po kroku zaimplementować takie rozwiązanie.
Uzyskanie klucza API
Aby korzystać z API OpenWeatherMap, musisz uzyskać klucz API. Aby to zrobić, przejdź na stronę https://home.openweathermap.org/users/sign_up i utwórz konto. Następnie możesz uzyskać klucz API z https://home.openweathermap.org/api_keys.
Tworzenie formularza
Najpierw musimy utworzyć formularz HTML, który pozwoli użytkownikowi wprowadzić nazwę miasta. W pliku HTML dodajmy poniższy kod:
<form>
<label for="city">Podaj nazwę miasta:</label>
<input type="text" id="city" name="city">
<button type="submit">Sprawdź pogodę</button>
</form>
Pobieranie danych z API
Teraz musimy napisać kod JavaScript, który pobierze dane z API OpenWeatherMap na podstawie wprowadzonej nazwy miasta. Do pobierania danych będziemy używać funkcji fetch().
const form = document.querySelector('form');
const input = document.querySelector('#city');
form.addEventListener('submit', (e) => {
e.preventDefault();
const city = input.value;
const apiKey = 'twój_klucz_api';
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;
fetch(url)
.then(response => response.json())
.then(data => {
console.log(data);
});
});
Powyższy kod pobiera wartość wprowadzoną do pola tekstowego, łączy ją z kluczem API i tworzy adres URL, który jest przekazywany do funkcji fetch(). Następnie używamy metody then() do przetworzenia odpowiedzi API, która jest zwracana jako obiekt JSON.
Wyświetlanie danych
Teraz możemy wyświetlić pobrane dane w naszej aplikacji. Możemy na przykład wyświetlić temperaturę i opis pogody. Do tego celu użyjemy metody document.createElement() do utworzenia nowych elementów HTML.
const form = document.querySelector('form');
const input = document.querySelector('#city');
const result = document.querySelector('#result');
form.addEventListener('submit', (e) => {
e.preventDefault();
const city = input.value;
const apiKey = 'twój_klucz_api';
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;
fetch(url)
.then(response => response.json())
.then(data => {
const temperature = Math.round(data.main.temp - 273.15);
const description = data.weather[0].description;
const tempElement = document.createElement('p');
tempElement.textContent = `Temperatura: ${temperature}°C`;
const descElement = document.createElement('p');
descElement.textContent = Opis: ${description};
result.innerHTML = '';
result.appendChild(tempElement);
result.appendChild(descElement);
});
});
Dodawanie stylów CSS
form {
display: flex;
flex-direction: column;
align-items: center;
margin: 50px;
}
label {
font-size: 24px;
margin-bottom: 10px;
}
input {
font-size: 18px;
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
button {
font-size: 18px;
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
background-color: #007bff;
color: #fff;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
button:hover {
background-color: #0069d9;
}
#result {
display: flex;
flex-direction: column;
align-items: center;
margin: 50px;
}
p {
font-size: 24px;
margin-bottom: 10px;
}
Kod CSS stylizuje formularz, przycisk i wynik wyszukiwania. Możesz oczywiście dostosować te style do swojego projektu.
Podsumowanie
W tym artykule omówiliśmy, jak użyć JavaScriptu do wyświetlenia aktualnej pogody na stronie internetowej. W trakcie implementacji musieliśmy uzyskać klucz API, utworzyć formularz, pobierać dane z API i wyświetlać wyniki. Dodatkowo stylizowaliśmy naszą aplikację za pomocą CSS. Dzięki tym krokom możesz teraz wyświetlać aktualną pogodę na swojej stronie internetowej!