Help Refactoring for Weather App

Help Refactoring for Weather App
0

#1

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)");
          }
        })();

#2

For the 1st function, you will need to simply your html by only having one div named icon. Since you did not post your html I can only assume you have all of these different divs (clear-day, clear-night, etc…) and I assume there is an img tag with a corresponding src of the icon image associated with the applicable div above. If so, then you will need to do a couple of things:

  1. Create an object called icons structured as follows:
var icons = {
  clear-day: 'https://websiteurlcontainingimage.com/nameOfclear-dayImage.fileExention',
  clear-night: 'https://websiteurlcontainingimage.com/nameOfclear-nightImage.fileExention';
   .
   .
   .
  etc...
}

and create a function below which will replace the html contents of the icon div when called.

function showIcon(currentIconURL) {
  $("#icon").html('<img src="' + currentIconURL + '">');
}

You could do something similar with the background images. Now you just need to figure out when and where you would call showIcon.