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