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 `
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!"));