diff --git a/code/script.js b/code/script.js index bdcee0ebc..24cba3ce9 100644 --- a/code/script.js +++ b/code/script.js @@ -9,7 +9,6 @@ const cityInput = document.getElementById("cityInput"); // Global variables -let city = ""; const timezoneOffset = new Date().getTimezoneOffset() * 60; // The function creates an image for Javascript injection later into the HTML @@ -42,46 +41,47 @@ const sunsetIcon = createWeatherImg("./assets/sunset-icon.png", "sunset"); function createFiveDayForecast(filteredForecast) { + weatherContainer.innerHTML = "" for (let i = 0; i < 5; i++) { - chooseWeatherIcon(filteredForecast, i); + const daysWeatherIcon = chooseWeatherIcon(filteredForecast[i]); const days = new Date(filteredForecast[i].dt_txt).toLocaleDateString( "en-US", { weekday: "long" } ); const forecastTemp = Math.round(filteredForecast[i].main.temp * 10) / 10; const forecastWeather = filteredForecast[i].weather.description; - createFiveDaysInnerHTML(days, forecastTemp); - } + weatherContainer.innerHTML += createFiveDaysInnerHTML(days, forecastTemp, daysWeatherIcon); + }; }; //Creates a weather icon based on the forecasted weather -function chooseWeatherIcon(filteredForecast, i) { - let main = filteredForecast[i].weather[0].main; +function chooseWeatherIcon(forecast) { + let main = forecast.weather[0].main; if (main === "Clouds") { - weatherImg = cloudyIcon; + return cloudyIcon; } else if (main === "Rain") { - weatherImg = rainIcon; + return rainIcon; } else if (main === "Thunderstorm") { - weatherImg = stormIcon; + return stormIcon; } else if (main === "Drizzle") { - weatherImg = rainIcon; + return rainIcon; } else if (main === "Fog" || main === "Mist") { - weatherImg = fogIcon; + return fogIcon; } else if (main === "Snow") { - weatherImg = snowIcon; + return snowIcon; } else { - weatherImg = sunIcon; + return sunIcon; } }; //Creates innerHTML for each day in the forecast -function createFiveDaysInnerHTML(days, forecastTemp) { - weatherContainer.innerHTML += ` +function createFiveDaysInnerHTML(days, forecastTemp, daysWeatherIcon) { + return `
${days} ${forecastTemp} °C - ${weatherImg.alt} + ${daysWeatherIcon.alt}
`; @@ -95,12 +95,12 @@ function getTimeOf(time, timezone) { }; //Creates innerHTML to display todays weather and temperatures in the header -function changeHeaderInnerHTML(data, timeOfSunrise, timeOfSunset) { - today.innerHTML = ` +function getHeaderHTML(data, timeOfSunrise, timeOfSunset, weatherIcon) { + return `

${data.name}

${Math.round(data.main.temp * 10) / 10} °C

Feels like: ${Math.round(data.main.feels_like * 10) / 10} °C
- ${weatherImg.alt} + ${weatherIcon.alt}

${data.weather.map((item) => item.description)}

${windIcon.alt} ${Math.round(data.wind.speed * 10) / 10} m/s

${sunriseIcon.alt}Sunrise: ${timeOfSunrise}

@@ -109,36 +109,27 @@ function changeHeaderInnerHTML(data, timeOfSunrise, timeOfSunset) { }; //Changes background image in header depending on todays weather prognosis -function setBackgroundWeather(data) { +function getBackgroundWeatherClass(data) { let main = data.weather.map((item) => item.main); if (main.includes("Clouds")) { - weatherImg = cloudyIcon; - backgroundImg.classList = "clouds"; + return "clouds"; } else if (main.includes("Rain")) { - weatherImg = rainIcon; - backgroundImg.classList = "rain"; + return "rain"; } else if (main.includes("Drizzle")) { - weatherImg = rainIcon; - backgroundImg.classList = "drizzle"; + return "drizzle"; } else if (main.includes("Snow")) { - weatherImg = snowIcon; - backgroundImg.classList = "snow"; + return "snow"; } else if (main.includes("Fog") || (main.includes("Mist"))) { - weatherImg = fogIcon; - backgroundImg.classList = "fog", "mist"; + return "fog"; } else if (main.includes("Clear")) { - weatherImg = sunIcon; - backgroundImg.classList = "clear"; + return "clear"; } else { - weatherImg = atmosphereIcon; - backgroundImg.classList = "atmosphere"; + return "atmosphere"; } }; //Eventlisteners // DON"T DELETE, TO USE LATER! cityBtn.addEventListener('click', (e) => { - today.innerHTML = "" - weatherContainer.innerHTML = "" let city = cityInput.value console.log(city) let WEATHER_API = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&APPID=5000cd66a9090b2b62f53ce8a59ebd9e`; @@ -148,11 +139,12 @@ cityBtn.addEventListener('click', (e) => { fetch(WEATHER_API) .then((res) => res.json()) .then((data) => { - setBackgroundWeather(data); + backgroundImg.classList = getBackgroundWeatherClass(data); let timezone = data.timezone const timeOfSunrise = getTimeOf(data.sys.sunrise, timezone); const timeOfSunset = getTimeOf(data.sys.sunset, timezone) - changeHeaderInnerHTML(data, timeOfSunrise, timeOfSunset); + const weatherIcon = chooseWeatherIcon(data) + today.innerHTML = getHeaderHTML(data, timeOfSunrise, timeOfSunset, weatherIcon); }) .catch((error) => console.error("AAAAAAH!", error)) .finally(() => console.log("YAY!"));