FCC Weather App , weather icon not showing

FCC Weather App , weather icon not showing
0

#1

Hello, I am using Geo location and FCC weather app for the Local Weather project. Weather icon form this api are not showing for some reason. here is my code pen link.

Weather APP

<div id="data" class="text-center">
     you are here 
</div>
<div class="text-center">
   <p><span id = "city" > city</span>
     <span id = "country" > country</span>
   </p>       
  
  <p><span id="temp" > </span>
 <span id="tempunit" ></span>       
 </p>
 
  <p id="desc" ></p>
  </div >
     
 

<div id="icon"><Weather Icon</div>
var api = "https://fcc-weather-api.glitch.me/api/current?"; var lat; var lon; var tempUnit = 'C'; var currentTempInCelsius; $(document).ready(function(){ if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var lat = "lat=" + position.coords.latitude; var lon= "lon=" + position.coords.longitude; }); } else { console.log("Geolocation is not supported by this browser."); }

$("#tempunit").click(function(){
var currentTempUnit = $("#tempunit").text();
var newTempUnit = currentTempUnit == “C” ? “F” : “C”;
$("#tempunit").text(newTempUnit);
if (newTempUnit == “F”){
var fahTemp = Math.round(parseInt($("#temp").text()) * 9 / 5 + 32);
$("#temp").text(fahTemp + " " + String.fromCharCode(176));
} else {
$("#temp").text(currentTempCelcius + " " + String.fromCharCode(176));
}
});
})

function getWeather(lat, lon) {
var urlString = api + lat + “&” + lon;

$.ajax({
url: urlString, success: function (result) {
$("#city").text(result.name + “, “);
$(”#country”).text(result.sys.country);
currentTempInCelsius = Math.round(result.main.temp * 10) / 10;
$("#temp").text(result.main.temp);
$("#tempunit").text(tempUnit);
$("#desc").text(result.weather[0].main);
$("#icon").append(result.weather[0].icon);
}

});
}


#3

I figured out the issue and could successfully retrieve icon from data provided by FCC. I tried to post that particular part of the code here but editor is not showing the whole code for some reason.
$("#icon").html(’’);


#4

To enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#5

Following line of code helped me to get the weather icon from FCC data given in the challenge and I did not have to use any other icon gallary etc. One app for all the info !!


$("#icon").html('<img src =' + "https://cdn.glitch.com/6e8889e5-7a72-48f0-a061-863548450de5%2F10n.png?1499366021399" + result.weather[0].icon + ".png" + '>');