Add background image for Weather App

Add background image for Weather App
0

#1

I need help with my project. I can’t display a background according to the weather
Here is my JS code, please help guys :slight_smile:

 $(document).ready(function() {
    if (navigator.geolocation) {       navigator.geolocation.getCurrentPosition(function(position) {
            var lon = position.coords.longitude
            var lat = position.coords.latitude;
            var url = "https://cors-anywhere.herokuapp.com/https://fcc-weather-api.glitch.me/api/current?lat=" + lat + "&lon=" + lon;
            $.getJSON(url, function(data) {
                console.log(data);
              var celsius = data.main.temp;
              var fahrenheit;
              var tempSwap;
              var tempMin = data.main.temp_min;
              var tempMax = data.main.temp_max;
              var location = data.name;
              var weather = data.weather[0].description;
              var weatherIcon = data.weather[0].icon;
              var mainWeather = data.weather[0].main;
              console.log(mainWeather);
              fahrenheit = Math.floor((celsius * 1.8) + 32);
              $(".temp").html(celsius + " C");
              $(".temp").on('click', function(){
                if(tempSwap){
                  $(".temp").html(fahrenheit + " F");
                  tempSwap = false;
                  } else {
                  $(".temp").html(celsius + " C");
                    tempSwap = true;
                  }
              });
              $(".location").html(location);
               $(".weather").html(weather);
              $(".weather").append("<br> <img src =" + weatherIcon + '">');
              switch(mainWeather) {
                  case 'Drizzle':
        $('body').css("background-image", "url(http://cloud-maven.com/wp-content/forum/uploads/2014/11/DSC_0061.jpg)");
        break;
      case 'Clouds':
        $('body').css("background-image", "url(http://www.pd4pic.com/images/sky-blue-cloud-cloudy-background-weather-sunny.jpg)");
        break;
      case 'Rain':
        $('body').css("background-image", "url(https://wallpaperscraft.com/image/rain_drops_splashes_heavy_rain_dullness_bad_weather_60638_3840x2400.jpg)");
        break;
      case 'Snow':
        $('body').css("background-image", "url(https://www.walldevil.com/wallpapers/a52/snow-wallpaper-scene-nature-weather-scenery-albums.jpg)");
        break;
      case 'Clear':
        $('body').css("background-image", "url(http://cache3.asset-cache.net/xd/479233488.jpg?v=1&c=IWSAsset&k=2&d=62CA815BFB1CE480904DC2BDF8D84279DD9BE2D9A1DB104C6FCD593B398CCC9B4C7E1CCD6B915F7E)");
        break;
      case 'Thunderstom':
       $('body').css("background-image", "url(https://s-media-cache-ak0.pinimg.com/564x/7e/fb/1e/7efb1e6d25184aac0998fb966732325d.jpg)");
        break;
      default:
        $('body').css("background-image", "url(http://exchangedownloads.smarttech.com/public/content/c7/c7b7d2f6-0e68-41bc-b320-063ae2783f69/previews/medium/0001.png)");
        break;
    }
                                }
            })
        });
    }
});

#2

Are you using codepen for your weather app? Please post it if you do.


#3

Yes here is the link.


#4

You might want to use the body selector instead of * in the stylesheet.

In your switch block, what exactly is mainWeather? Maybe you meant using weather?


#5

OK, thanks :slight_smile: