Weather API Challenge - Can't get my icons to show/hide

Weather API Challenge - Can't get my icons to show/hide
0

#1

Hi. For some reason I can’t figure out what’s wrong with my icons, trying to get it to show/hide based on the weather but it won’t work and can’t figure out the issue

Here’s the link - http://codepen.io/saf94/pen/NRoWmg?editors=1010 and below is the javascript. Can anyone help?

$(document).ready(function() {

var lat = 0;
var lon = 0;
var typeWeather = "";

var getLocation = $.ajax ({
  type: "POST",
  url: "https://www.googleapis.com/geolocation/v1/geolocate?key=AIzaSyD609whsSXw_wAz49vc0g18EDhYngApjDo",
  success: function(data) {
    lat = data.location.lat;
    lon = data.location.lng;
  }
});
  
$.when(getLocation).done(function() {
$.ajax ({
  type: "GET",
  dataType: "json",
  url: "https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&appid=19c9b893457b8f5ea0d0d040c080d04d",
  success: function(data) {
    $(".type").html(data.weather[0].main);
    typeWeather = data.weather[0].main;
  console.log(typeWeather);  $(".theWeatherC").html(Math.round((data.main.temp) - 273) + "°C");
        $(".theWeatherF").html(Math.round((data.main.temp)*(9/5) - 459.67) + "°F");
  }
  
    
});
    $.ajax ({
    type: "GET",
    url: "https://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+lon+"&key=AIzaSyC4ytkcvt-DPWqQUPpea2J5ttOPZamwzGA",
    success: function(data) {
      $(".location").html(data.results[3].formatted_address)
    }
    });
  
  $(".theWeatherF").hide();
  
  $(".degrees").click(function() {
     $(".theWeatherC").toggle();
     $(".theWeatherF").toggle();
    
    
  });
  
  $("img").hide();
  
  if (typeWeather == "Clouds") {
    $(".icon-cloud").show();
  }
});
  

       });

#2

I think you’ll have to hide each image class separately, then show each based on typeWeather, like you did with “Clouds”. If you hide all image tags then try to show one image class (as you did with .icon-cloud), it won’t work.


#3

I actually tried that too and that didn’t work either :confused:


#5

I tried moving everything up in the $.when(getLocation).done function and it works now.

Sorry I can’t be more helpful. I’m rather new at this.


#6

Also, icon-sunny doesn’t work. Probably want to get a different one.