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