1.2 #permalink HOME API - sekcja pogodowa
Kod HTML:
-
containerApi: Główny kontener strony, który jest wyśrodkowany na stronie i ma szerokość 80% szerokości okna przeglądarki.
-
szukaj: Kontener zawierający elementy związane z wyszukiwaniem miasta. Wykorzystuje flexbox do wyśrodkowania zawartości.
-
col: Kontener kategorii "Search for a City". Jest to kolumna o szerokości 50% szerokości swojego rodzica, zawiera nagłówek, pole do wprowadzania nazwy miasta, przycisk do wyszukiwania, oraz przycisk "Clear History" i listę historii wyszukiwań.
-
col-sm: Kontener dla pojedynczej prognozy pogody w sekcji "5-Day Forecast". Ma szerokość 200px i zawiera datę, obrazek pogodowy, temperaturę i wilgotność.
-
row: Kontener dla wiersza z danymi dotyczącymi aktualnej pogody (np., temperatura, wilgotność, itp.).
-
col-row: Kontener dla aktualnych danych pogodowych. Jest wykorzystywany na szerokość 100% i zawiera dane takie jak nazwa miasta, temperatura, wilgotność, prędkość wiatru i wskaźnik UV.
-
row1: Kontener dla prognozy pogody na 5 dni. Składa się z pięciu kolumn o równej szerokości.
Kod CSS:
-
containerApi: Styl dla głównego kontenera strony. Ma szerokość 80%, jest wyśrodkowany na stronie i posiada marginesy po lewej i prawej stronie.
-
szukaj: Styl dla kontenera "szukaj". Wykorzystuje flexbox do wyśrodkowania zawartości, szerokość wynosi 100%.
-
col: Styl dla kategorii "Search for a City". Ma szerokość 50%, jest wyśrodkowany, posiada tło koloru rgba(233, 236, 239, 0.5), padding, oraz marginesy.
-
col-sm: Styl dla kontenera prognozy pogody na 1 dzień. Ma szerokość 200px, marginesy i padding.
-
row: Styl dla kontenera wiersza z danymi dotyczącymi aktualnej pogody. Ma wyśrodkowaną zawartość, marginesy i tło koloru rgba(233, 236, 239, 0.5).
-
col-row: Styl dla kontenera z aktualnymi danymi pogodowymi. Ma szerokość 100% i tło koloru rgba(233, 236, 239, 0.5).
-
row1: Styl dla kontenera prognozy pogody na 5 dni. Jest to flexbox, który zajmuje 100% szerokości dostępnej przestrzeni.
-
search-city: Styl dla pola tekstowego do wprowadzania nazwy miasta. Ma zaokrąglone rogi, obramowanie i wysokość 35px.
-
City: Styl dla nagłówka "Search for a City". Marginesy, rozmiar czcionki, itp.
-
btn-primary: Styl dla przycisku "🔍" do wyszukiwania. Zaokrąglone rogi, kolor tła i tekst na przycisku.
-
btn-mt-2: Styl dla przycisku "Clear History". Marginesy, tło, kolor tekstu.
-
list-group: Styl dla listy historii wyszukiwań. Padding i stylizacja wyglądu listy.
-
list-group li: Styl dla elementów listy historii wyszukiwań. Marginesy, tło i obramowanie.
-
current-weather i future-weather: Styl dla kontenerów aktualnej pogody i prognozy pogody na 5 dni. Tło, zaokrąglone rogi, padding, marginesy.
-
city-name: Styl dla nazwy miasta w aktualnej pogodzie. Rozmiar czcionki i kolor.
-
current: Styl dla aktualnych danych pogodowych (np. temperatura, wilgotność, itp.). Pogrubiony tekst.
-
col-sm img: Styl dla obrazków pogodowych w prognozie pogody na 5 dni. Marginesy i tło.
-
Media queries: W kodzie znajdują się także media queries, które dostosowują wygląd strony w zależności od szerokości ekranu. Są one odpowiedzialne za reakcję strony na różne rozmiary urządzeń, zmieniając układ elementów, kolory tła, itp.
Search for a City:
Temperature:
Humidity:
Wind Speed:
UV Index:
5-Day Forecast:
Temp:
Humidity:
Temp:
Humidity:
Temp:
Humidity:
Temp:
Humidity:
Temp:
Humidity:
Markup
<div class="containerApi">
<div class="row">
<div class="szukaj">
<div class="col">
<h4 class="City"><strong>Search for a City:</strong></h4>
<div class="input-group">
<input type="text" class="form-control" id="search-city" placeholder="Enter the city" aria-label="City Search" aria-describedby="search-button">
<div class="input-group-append">
<button class="btn btn-primary" id="search-button">🔍</button>
</div>
</div>
<button class="btn-mt-2" type="button" id="clear-history">Clear History</button>
<ul class="list-group mt-2" id="search-history">
</ul>
</div>
<div class="row">
<div class="col-row" id="current-weather">
<h3 class="city-name" id="current-city"></h3>
<p>Temperature: <span class="current" id="temperature"></span></p>
<p>Humidity: <span class="current" id="humidity"></span></p>
<p>Wind Speed: <span class="current" id="wind-speed"></span></p>
<p>UV Index: <span class="current" id="uv-index"></span></p>
</div>
</div>
</div>
<div class="col-smain" id="future-weather">
<h3>5-Day Forecast:</h3>
<div class="row1">
<div class="col-sm">
<p id="fDate0"></p>
<p id="fImg0"></p>
<p>Temp: <span id="fTemp0"></span></p>
<p>Humidity: <span id="fHumidity0"></span></p>
</div>
<div class="col-sm">
<p id="fDate1"></p>
<p id="fImg1"></p>
<p>Temp: <span id="fTemp1"></span></p>
<p>Humidity: <span id="fHumidity1"></span></p>
</div>
<div class="col-sm">
<p id="fDate2"></p>
<p id="fImg2"></p>
<p>Temp: <span id="fTemp2"></span></p>
<p>Humidity: <span id="fHumidity2"></span></p>
</div>
<div class="col-sm">
<p id="fDate3"></p>
<p id="fImg3"></p>
<p>Temp: <span id="fTemp3"></span></p>
<p>Humidity: <span id="fHumidity3"></span></p>
</div>
<div class="col-sm">
<p id="fDate4"></p>
<p id="fImg4"></p>
<p>Temp: <span id="fTemp4"></span></p>
<p>Humidity: <span id="fHumidity4"></span></p>
</div>
</div>
</div>
</div>
</div>
<script>
var city = "";
var searchCity = document.getElementById("search-city");
var searchButton = document.getElementById("search-button");
var clearButton = document.getElementById("clear-history");
var currentCity = document.getElementById("current-city");
var currentTemperature = document.getElementById("temperature");
var currentHumidity = document.getElementById("humidity");
var currentWSpeed = document.getElementById("wind-speed");
var currentUvindex = document.getElementById("uv-index");
var sCity = [];
function find(c) {
for (var i = 0; i < sCity.length; i++) {
if (c.toUpperCase() === sCity[i]) {
return -1;
}
}
return 1;
}
var APIKey = "a0aca8a89948154a4182dcecc780b513";
function displayWeather(event) {
event.preventDefault();
if (searchCity.value.trim() !== "") {
city = searchCity.value.trim();
currentWeather(city);
}
}
function currentWeather(city) {
var queryURL =
"https://api.openweathermap.org/data/2.5/weather?q=" +
city +
"&APPID=" +
APIKey;
var xhr = new XMLHttpRequest();
xhr.open("GET", queryURL, true);
xhr.onload = function () {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var weatherIcon = response.weather[0].icon;
var iconURL = "https://openweathermap.org/img/wn/" + weatherIcon + "@2x.png";
var date = new Date(response.dt * 1000).toLocaleDateString();
currentCity.innerHTML = response.name + " (" + date + ") " + "<img src=" + iconURL + ">";
var tempF = (response.main.temp - 273.15);
currentTemperature.innerHTML = tempF.toFixed(2) + "℃";
currentHumidity.innerHTML = response.main.humidity + "%";
var ws = response.wind.speed;
var windSmph = (ws * 2.237).toFixed(1);
currentWSpeed.innerHTML = windSmph + "MPH";
UVIndex(response.coord.lon, response.coord.lat);
forecast(response.id);
sCity = JSON.parse(localStorage.getItem("cityname")) || [];
if (find(city) > 0) {
sCity.push(city.toUpperCase());
localStorage.setItem("cityname", JSON.stringify(sCity));
addToList(city);
}
} else {
console.log("Błąd: " + xhr.status);
}
};
xhr.send();
}
function UVIndex(ln, lt) {
var uvqURL = "https://api.openweathermap.org/data/2.5/uvi?appid=" + APIKey + "&lat=" + lt + "&lon=" + ln;
var xhr = new XMLHttpRequest();
xhr.open("GET", uvqURL, true);
xhr.onload = function () {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
currentUvindex.innerHTML = response.value;
} else {
console.log("Błąd: " + xhr.status);
}
};
xhr.send();
}
function forecast(cityid) {
var dayover = false;
var queryForcastURL = "https://api.openweathermap.org/data/2.5/forecast?id=" + cityid + "&appid=" + APIKey;
var xhr = new XMLHttpRequest();
xhr.open("GET", queryForcastURL, true);
xhr.onload = function () {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
for (var i = 0; i < 5; i++) {
var date = new Date(response.list[((i + 1) * 8) - 1].dt * 1000).toLocaleDateString();
var iconCode = response.list[((i + 1) * 8) - 1].weather[0].icon;
var iconURL = "https://openweathermap.org/img/wn/" + iconCode + ".png";
var tempK = response.list[((i + 1) * 8) - 1].main.temp;
var tempF = ((tempK - 273.5)).toFixed(2);
var humidity = response.list[((i + 1) * 8) - 1].main.humidity;
document.getElementById("fDate" + i).innerHTML = date;
document.getElementById("fImg" + i).innerHTML = "<img src=" + iconURL + ">";
document.getElementById("fTemp" + i).innerHTML = tempF + "℃";
document.getElementById("fHumidity" + i).innerHTML = humidity + "%";
}
} else {
console.log("Błąd: " + xhr.status);
}
};
xhr.send();
}
function addToList(c) {
var listEl = document.createElement("li");
listEl.textContent = c.toUpperCase();
listEl.className = "list-group-item";
listEl.dataset.value = c.toUpperCase();
document.querySelector(".list-group").appendChild(listEl);
}
function invokePastSearch(event) {
var liEl = event.target;
if (liEl.matches("li")) {
city = liEl.textContent.trim();
currentWeather(city);
}
}
function loadLastCity() {
document.querySelector("ul").innerHTML = "";
var sCity = JSON.parse(localStorage.getItem("cityname"));
if (sCity !== null) {
for (var i = 0; i < sCity.length; i++) {
addToList(sCity[i]);
}
city = sCity[i - 1];
currentWeather(city);
}
}
function clearHistory(event) {
event.preventDefault();
sCity = [];
localStorage.removeItem("cityname");
location.reload();
}
searchCity.addEventListener("keydown", function (event) {
if (event.key === "Enter") {
displayWeather(event);
}
});
function displayWeather(event) {
if (event) {
event.preventDefault();
}
if (searchCity.value.trim() !== "") {
city = searchCity.value.trim();
currentWeather(city);
}
}
searchButton.addEventListener("click", displayWeather);
document.addEventListener("click", invokePastSearch);
window.addEventListener("load", loadLastCity);
clearButton.addEventListener("click", clearHistory);
</script>styleIndex.css, line 1418