Hi folks,
I’ve gone back to my since-completed weather project to add some refining. I want to add weather icons to my display as well as enable the weather app to show the weather of the location of the user whereever they are. None of these are happening, unfortunately.
1st. My weather icons are not showing
2nd. My display is showing weather for the city of Shuzenji
3rd. The temperature readings are huge amounts? Why?
What could possibly the problem? Thanks in advance for your help!
Here is a link to my CodePen: https://codepen.io/IDCoder/pen/NwNOgq?editors=1011
And here is my javascript code:
$(document).ready(function(){
var lat;
var long;
$.getJSON("https://fcc-weather-api.glitch.me/api/current?/json/",function(data2){
console.log("1");
console.log(data2);
var lat = data2.latitude;
var long = data2.longitude;
var api = "https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139";
$.getJSON(api).done(function(data, dataOther){
$('#icon').attr('src', data.weather[0].icon)
var fTemp;
var cTemp;
var tempSwap = true;
console.log("2");
console.log(data);
console.log(dataOther);
var weatherType = data.weather[0].description;
var kTemp = data.main.temp;
var windSpeed = data.wind.speed;
var city = data.name;
$("#city").html(city);
fTemp = (kTemp * (9 / 5) - 459.67).toFixed(1);
cTemp = (kTemp - 273).toFixed(1);
$("#api").html(api);
$("#weatherType").html(weatherType);
$("#fTemp").html(fTemp + "℉");
$("#fTemp").click(function() {
if (tempSwap === false) {
$("#fTemp").html(fTemp + "℉");
tempSwap = true;
} else {
$("#fTemp").html(cTemp + "℃");
tempSwap = false;
}
});
$("#windSpeed").html(windSpeed + "m/sec");
if (fTemp >= 100) {
$(".container").css("background-image", "url(https://s2.postimg.cc/6ss6kyuhl/yamaha_yzf_r1-wallpaper-1024x768.jpg)");
} else if (fTemp > 90 && fTemp <100 ) {
$(".container").css("background-image", "url(https://s2.postimg.cc/lapdsz8y1/beyonce_knowles_2-wallpaper-1024x768.jpg)")
} else if (fTemp > 80 && fTemp <90) {
$(".container").css("background-image", "url(https://s2.postimg.cc/i54s2ennd/Beyonce_in_Jamaica.jpg)")
} else if (fTemp > 70 && fTemp <80 ) {
$(".container").css("background-image", "url(https://s2.postimg.cc/t4pzebr0p/golf_course_landscape-wallpaper-1024x768.jpg)")
} else if (fTemp > 60 && fTemp <70 ) {
$(".container").css("background-image", "url(https://s9.postimg.cc/435hgvvq7/rihanna_17-wallpaper-1024x768.jpg)")
} else if (fTemp > 50 && fTemp <60) {
$(".container").css("background-image", "url(https://s2.postimg.cc/8xcjlpoax/rihanna_9-wallpaper-1024x768.jpg)")
} else if (fTemp >40 && fTemp <50 ) {
$(".container").css("background-image", "url(https://s2.postimg.cc/8xcjlpoax/rihanna_9-wallpaper-1024x768.jpg)")
} else if (fTemp > 30 && fTemp<40 ) {
$(".container").css("background-image", "url(https://s2.postimg.cc/nhtmgb6c9/white_snowy_road-wallpaper-1024x768.jpg)")
} else if (fTemp >20&& fTemp <30) {
$(".container").css("background-image", "url(https://s2.postimg.cc/9a3xrntnd/rihanna_dior_sunglasses-wallpaper-1024x768.jpg)")
} else if (fTemp > 10&& fTemp <20) {
$(".container").css("background-image", "url(https://s1.postimg.cc/14i3xf2um7/Hummer-_H1-_Snow-_Turn-_Headlights-1024x768.jpg)")
} else if (fTemp > 0&& fTemp <10) {
$(".container").css("background-image", "url(https://s2.postimg.cc/r05mdaf49/snowy_cabin_mountains_winter-wallpaper-1024x768.jpg)")
} else if (fTemp > -10&& fTemp <0) {
$(".container").css("background-image", "url(https://s2.postimg.cc/7v2d3i5l5/skiing-wallpaper-1024x768.jpg)")
}
});
});
});