I am using Skycons and Dark Sky for my Weather app.
I am having an issue with all the if/else statements I am making with jQuery to show/hide the icons based on conditions, as well as if/else statements to change the background of the app depending on the conditions. Too many conditionals and I want to dry it up.
I wrapped them in two IIFE functions because I need then to execute almost immediately. This is another thing that is bothering me about this: perf for this app is not up to par. I’ve compressed the images, hosted them on imgur, etc but it is still very slow to load the image and Skycons.
Can anyone help me figure out how to DRY this jQuery up? Thanks!
(function showIcons(){
if (currentIcon === "clear-day") {
$("#clear-day").show();
} else {
$("#clear-day").hide();
}
if (currentIcon === "clear-night") {
$("#clear-night").show();
} else {
$("#clear-night").hide();
}
if (currentIcon === "partly-cloudy-day") {
$("#partly-cloudy-day").show();
} else {
$("#partly-cloudy-day").hide();
}
if (currentIcon === "partly-cloudy-night") {
$("#partly-cloudy-night").show();
} else {
$("#partly-cloudy-night").hide();
}
if (currentIcon === "cloudy") {
$("#cloudy").show();
} else {
$("#cloudy").hide();
}
if (currentIcon === "rain") {
$("#rain").show();
} else {
$("#rain").hide();
}
if (currentIcon === "sleet") {
$("#sleet").show();
} else {
$("#sleet").hide();
}
if (currentIcon === "snow") {
$("#snow").show();
} else {
$("#snow").hide();
}
if (currentIcon === "wind") {
$("#wind").show();
} else {
$("#wind").hide();
}
if (currentIcon === "fog") {
$("#fog").show();
} else {
$("#fog").hide();
}
})();
(function changeBackground(){
if (currentIcon === "clear-day") {
$("body").css("background-image", "url(https://i.imgur.com/voece1h.jpg)");
} else if (currentIcon === "partly-cloudy-night") {
$("body").css("background-image", "url(https://i.imgur.com/r8haFIj.jpg)");
} else if (currentIcon === "clear-night") {
$("body").css("background-image", "url(https://i.imgur.com/K6Bazrl.jpg)");
} else if (currentIcon === "partly-cloudy-day") {
$("body").css("background-image", "url(https://i.imgur.com/dUS9u9b.jpg)");
} else if (currentIcon === "cloudy") {
$("body").css("background-image", "url(https://i.imgur.com/Kx3ku27.jpg)");
} else if (currentIcon === "rain") {
$("body").css("background-image", "url(https://i.imgur.com/g4afvja.jpg)");
} else if (currentIcon === "sleet") {
$("body").css("background-image", "url(https://i.imgur.com/pjq3VPO.jpg)");
} else if (currentIcon === "snow") {
$("body").css("background-image", "url(https://i.imgur.com/vH9cyKD.jpg)");
} else if (currentIcon === "wind") {
$("body").css("background-image", "url(https://i.imgur.com/ZtSl66b.jpg)");
} else if (currentIcon === "fog") {
$("body").css("background-image", "url(https://i.imgur.com/5z0CXkZ.jpg)");
}
})();