Refining My Weather App Project (Weather Icon Not Showing & Wrong City Displayed)

Refining My Weather App Project (Weather Icon Not Showing & Wrong City Displayed)
0

#1

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

});
 

#2

The city of “Shuzenji” is the default I believe.

There are some problems here. In your code:

  $.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){

Where are you getting the lon and lat from? Did you check the output in the console? Your data2 is:

error: "Please provide longitude as lon and latitude as lat as numbers/floats."

You seem to be expecting that API to return your lat and long, but that API, expects the long and lat and returns the weather. You need to find a way to get the lat and lon.

Your wild temp numbers are because you seem to be assuming that the temps are in Kelvin - but they are Celsius.


#3

Hi @kevinSmith, yeah, I saw that error message in the console, I’m currently working on resolving it. Is that error with the lat and long also causing my weather icon to not be displayed?


#4

Your icon is getting written to the DOM just fine, but it is in a child of #weatherType. Then you overwrite it with:

$("#weatherType").html(weatherType);

and its children (including the icon) get overwritten.

If I replace it with:

        $("#weatherType").append("<span>" + weatherType + "</span>");

it works - I’ll let you figure out how to format them better.

Also, in your CSS:

#icon{
  height: 30px;
  width: 30px;
  background-color: red;
  border: 1 px solid red;
}

it should be:

  border: 1px solid red;

no space in the “1px”.


#5

@kevinSmith, what made you think like that, for example, the thought of including .append and <span></span>? What would make me thing like that? I want to be able to think like that too lol!:neutral_face:


#6

Just experience, man. I inspected the DOM and saw that the #icon element wasn’t where it should be. Then I saw the html method and theorized that it was overwriting it (as a child of that element). I confirmed it by commenting out that line. So I changed it to append because I thought I remembered that that took an HTML element, and not a simple string - but I could be wrong.

Just keep at it. The only way to learn to write code well is to struggle and write bad code for a while. I’m on the same ladder, just a few rungs higher. I help you up a little and in a while you’ll be helping up the guy below you. Just keep at it, you’ll get there.


#7

According to the documentation, if you only need to append unformatted text, then you can simply write:

$("#weatherType").append(weatherType);

If you wanted to style the text, then the addition of the span tags would be needed or some clever CSS.


#8

I looked at your JavaScript and when I saw all of the if/else if statements, I thought of a way for you to use the new Map object to replace all of that.

var picsAndTemps = new Map([
  [100, 'https://s2.postimg.cc/6ss6kyuhl/yamaha_yzf_r1-wallpaper-1024x768.jpg'],
  [91, 'https://s2.postimg.cc/lapdsz8y1/beyonce_knowles_2-wallpaper-1024x768.jpg'],
  [81, 'https://s2.postimg.cc/i54s2ennd/Beyonce_in_Jamaica.jpg'],
  [71, 'https://s2.postimg.cc/t4pzebr0p/golf_course_landscape-wallpaper-1024x768.jpg'],
  [61, 'https://s9.postimg.cc/435hgvvq7/rihanna_17-wallpaper-1024x768.jpg'],
  [51, 'https://s2.postimg.cc/8xcjlpoax/rihanna_9-wallpaper-1024x768.jpg'],
  [41, 'https://s2.postimg.cc/8xcjlpoax/rihanna_9-wallpaper-1024x768.jpg'],
  [31, 'https://s2.postimg.cc/nhtmgb6c9/white_snowy_road-wallpaper-1024x768.jpg'],
  [21, 'https://s2.postimg.cc/9a3xrntnd/rihanna_dior_sunglasses-wallpaper-1024x768.jpg'],
  [11, 'https://s1.postimg.cc/14i3xf2um7/Hummer-_H1-_Snow-_Turn-_Headlights-1024x768.jpg'],
  [1, 'https://s2.postimg.cc/r05mdaf49/snowy_cabin_mountains_winter-wallpaper-1024x768.jpg'],
  [-200, 'https://s2.postimg.cc/7v2d3i5l5/skiing-wallpaper-1024x768.jpg']
];  
         
for (var [temp, bg] of picsAndTemps) {
  if (fTemp >= Number(temp)) {
    $(".container").css("background-image", "url('" + bg +"')");
    break;
  }  
}

I noticed you were using the same background for temperatures greater than 40 and less than 60, so if that was intentional, then you could delete the following in the above code.

  [51, 'https://s2.postimg.cc/8xcjlpoax/rihanna_9-wallpaper-1024x768.jpg'],

#9

Wow @randelldawson! Cool stuff! Thanks for this information…it’s always good to write less code…haha…and having the same background images for different temps, that might definitely be a mistake. I will go back over this info, you presented as soon as I finish getting help on another topic.