80 lines
2.3 KiB
JavaScript
80 lines
2.3 KiB
JavaScript
const cityForm = document.querySelector("form");
|
|
const card = document.querySelector(".card");
|
|
const details = document.querySelector(".details");
|
|
const time = document.querySelector("img.time")
|
|
const icon = document.querySelector(".icon img")
|
|
const forecast = new Forecast();
|
|
console.log(forecast);
|
|
|
|
const updateUI = (data) => {
|
|
|
|
console.log(data)
|
|
// const cityDets = data.cityDets;
|
|
// const weather = data.weather;
|
|
|
|
// das Gleiche als da oben
|
|
// destructure properties
|
|
const { cityDets, weather } = data;
|
|
|
|
// Aktualisierung der Stadt-Daten (Template)
|
|
details.innerHTML = `
|
|
<h5 class="my-3">${cityDets.EnglishName}</h5>
|
|
<div class="my-3">${weather.WeatherText}</div>
|
|
<div class="display-4 my-4">
|
|
<span>${weather.Temperature.Metric.Value}</span>
|
|
<span>°</span>
|
|
</div>
|
|
`;
|
|
|
|
// aktualisierung des day/night Fotos
|
|
const iconSrc = `img/icons/${weather.WeatherIcon}.svg`;
|
|
icon.setAttribute("src", iconSrc);
|
|
|
|
let timeSrc = null;
|
|
weather.IsDayTime ? timeSrc = "img/day.svg" : timeSrc = "img/night.svg";
|
|
|
|
time.setAttribute("src", timeSrc);
|
|
|
|
if (card.classList.contains("d-none")) {
|
|
card.classList.remove("d-none")
|
|
}
|
|
};
|
|
|
|
const updateCity = async (city) => {
|
|
|
|
// console.log(city);
|
|
const cityDets = await getCity(city);
|
|
const weather = await getWeather(cityDets.Key);
|
|
|
|
return {
|
|
cityDets: cityDets,
|
|
weather: weather
|
|
// cityDets,
|
|
// weather
|
|
};
|
|
}
|
|
|
|
cityForm.addEventListener("submit", e => {
|
|
// prevent default action
|
|
e.preventDefault();
|
|
|
|
// fordern den Stadt-Wert
|
|
const city = cityForm.city.value.trim();
|
|
cityForm.reset();
|
|
|
|
// update the UI with new city
|
|
forecast.updateCity(city)
|
|
.then((data) => updateUI(data))
|
|
.catch(err => console.log(err));
|
|
|
|
// Einstellung den localen Speicher
|
|
localStorage.setItem("city", city);
|
|
});
|
|
|
|
// wenn eine Stadt schon im lokalen Speciher existiert, dann wird diese Stadt bei dem nächsten Besuch der App verwendet
|
|
if (localStorage.getItem("city")) {
|
|
forecast.updateCity(localStorage.getItem("city"))
|
|
.then(data => updateUI(data))
|
|
.catch(err => console.log(err))
|
|
}
|