How DoI Get My Weather App to Change Images for Different Temperatures?

Question

Hi how do I get my weather app to automatically change the background image per the different temperatures? I have the code for that process integrated into the web app, but it's not working!

Here is my HTML:

<html>
  <title></title>
  <head><link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'></head>
  <body> 
    <div class="container">
      <div class="About">
      <h2>Your Local Weather App</h2>
      </div>
      <div class="holder">
        <div class = "btn btn-default" id="city">
        </div>
        <div class = "btn btn-default"  id="weatherType">
        </div>
        <div class = "btn btn-default"  id="fTemp">
        </div>
        <div class = "btn btn-default"  id="windSpeed">
        </div>
      </div>
    </div>  
</body>

....and here is my CSS code:

.container{
  text-align: center;
  background: url("https://s1.postimg.org/14i3xf2um7/Hummer-_H1-_Snow-_Turn-_Headlights-1024x768.jpg") no-repeat fixed;
  background-size: cover;
  background-position: center;
  /*background-color: blue;*/
  width: 100%;
  height: 1000px;
  margin: auto;  
}

.About{
  /*background-color: blue;*/
  /*transform: translateY(650%)*/ 
  position: fixed;
    top:35%;
    left: 0;
    right: 0;
    margin: auto;
}

h2{
  color: white;
  font-size: 1.5em
}

.holder{
  border: 3px;
  background-color: rgba(0, 0, 0, .80);
  width: 55%;
  height: auto;
  position: fixed;
    top:50%;
    left: 0;
    right: 0;
    margin: auto;
  padding-top:  5px;
  padding-bottom: 10px;
  padding-left: 3px;
  padding-right: 3px;
  border: 3px solid grey;
  border-radius: 10px;  
   display: grid;
   grid-template-columns: 1fr;  
   grid-row-gap: 1em;

}

#city, #weatherType,  #fTemp, #windSpeed{
  transform: translateY(9%);
  background-color: #c6c6c4;
  border-bottom:2px inset #FFF;
  border-right:2px inset #FFF;
  border-radius:5px;
  height: 30px;
  width: 90%;
  margin: auto;
  /*padding-bottom: 2px ;*/
}

.btn.btn-default{
  color: #0040ff;
  font-size: .80em;
  font-family: Orbitron, sans-serif;
  line-height: 2.45em;  
}



@media(min-width: 500px){
  .holder{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;  
  }
}

@media(min-width: 500px{

}

oh and here's my JavaScript code!

$(document).ready(function(){
 var lat;
  var long;
  $.getJSON("https://freegeoip.net/json/",function(data2){
    lat=data2.latitude;
    long=data2.longitude;
    console.log(lat);
    console.log(long);
 //creating an api with the user's geolocation 
  var api = "https://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&appid=b6e4d569d1718b07a44702443dd0ed77"


  //json call for the api
  $.getJSON(api, function(data) {
      var fTemp;
  var cTemp;
  var tempSwap = true;

   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(2);
    cTemp = (kTemp-273).toFixed(1);

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

    $("#fTemp").html(fTemp + "&#8457;");
    $("#fTemp").click(function(){
      if (tempSwap===false) {
        $("#fTemp").html(fTemp + "&#8457;");
        tempSwap=true;
      }
      else {
        $("#fTemp").html(cTemp + "&#8451;");
        tempSwap=false;
      }
    });


    $("#windSpeed").html(windSpeed + "m/sec");
 })

    if(fTemp>=100){
      $("container").css("background-image","url(https://s2.postimg.org/6ss6kyuhl/yamaha_yzf_r1-wallpaper-1024x768.jpg)");
    }
      else if(fTemp<90){
        $("container").css("background-image", "url(https://s2.postimg.org/lapdsz8y1/beyonce_knowles_2-wallpaper-1024x768.jpg)")
      }
      else if (fTemp>80){
       $("container").css("background-image", "url(https://s2.postimg.org/i54s2ennd/Beyonce_in_Jamaica.jpg)")
      }
      else if (fTemp<70){
       $("container").css("background-image", "url(https://s2.postimg.org/t4pzebr0p/golf_course_landscape-wallpaper-1024x768.jpg)") 
      }
      else if (fTemp<60){
       $("container").css("background-image", "url()")  
      }
       else if (fTemp<50){
       $("container").css("background-image", "url(https://s2.postimg.org/8xcjlpoax/rihanna_9-wallpaper-1024x768.jpg)")
      }
       else if (fTemp=37.40){
       $("container").css("background-image", url("https://s2.postimg.org/8xcjlpoax/rihanna_9-wallpaper-1024x768.jpg")) 
      }
       else if (fTemp<30){
       $("container").css("background-image", "url(https://s2.postimg.org/nhtmgb6c9/white_snowy_road-wallpaper-1024x768.jpg)")
      }
       else if (fTemp<20){
       $("container").css("background-image", "url(https://s2.postimg.org/9a3xrntnd/rihanna_dior_sunglasses-wallpaper-1024x768.jpg)") 
      }
       else if (fTemp<10){
       $("container").css("background-image", "url()")
      }
       else if (fTemp<0){
       $("container").css("background-image", "url(https://s2.postimg.org/r05mdaf49/snowy_cabin_mountains_winter-wallpaper-1024x768.jpg)")
      }
       else if (fTemp<-10){
       $("container").css("background-image", "url(https://s2.postimg.org/7v2d3i5l5/skiing-wallpaper-1024x768.jpg)")

  };


  });

});

Is there something that I need to add, or change in my code? Thanks for your help in advance!

Where is the code? I just see the markup and the stylesheet. — Iskandar Reza, Dec 22 '17 at 19:27
It looks fine, weird that it doesn't work. What if you set different css classes in your stylesheet for the different temperatures and than just use jquery removeClass/addClass? Would that work? — Iskandar Reza, Dec 22 '17 at 19:55
Something like this: https://stackoverflow.com/a/6558772/5330050 — Iskandar Reza, Dec 22 '17 at 20:03
@I.R.R., I will def check this out....also, sometimes the weather changes and the description spills outside one of the four alotted boxes....how do I prevent this!? :( — codebwoy, Dec 22 '17 at 20:09
For starters you have a syntax error. Fix the url on this background-image: $("container").css("background-image", "url(https://s2.postimg.org/8xcjlpoax/rihanna_9-wallpaper-1024x768.jpg)") — Jonathan Chaplin, Dec 23 '17 at 02:08
Also, you have a problem with your jQuery selectors. This $("container") is a tag selector. In your case you want a class selector. $(".container") — Jonathan Chaplin, Dec 23 '17 at 11:35
@codebwoy did this solution work for you? If not maybe we can enter a chat room? — Jonathan Chaplin, Dec 27 '17 at 14:41
@JonathanChaplin, hey! I will be working on it over the weekend. And yes, if necessary, a chatroom convo would be totally awesome! Thanks for the inquiry! — codebwoy, Dec 29 '17 at 22:17

Jonathan Chaplin · Accepted Answer · 2017-12-31T03:47:29.670

2

Once I fixed the 2 issues I mentioned in the comments, I found one more. Your getJSON calls are not occuring in the proper order. Since the second getJSON call is dependent on the first you need something like this:

$.getJSON("https://freegeoip.net/json/",function(data2){
console.log("1");
console.log(data2);
    var lat = data2.latitude;
    var long = data2.longitude;
    var api = "https://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&appid=b6e4d569d1718b07a44702443dd0ed77";
        $.getJSON(api).done(function(data, dataOther){

             var fTemp;
             var cTemp;
             var tempSwap = true;

        });
});

Note the done function at the end of the second getJSON call, which ensures the code to change the background will change be called after the second request completes.

Working fiddle here.

You should also look at your if / else logic. If the temp is over 100 you will get the yamaha picture, else if it is less than 90 you will get the beyonce picture. You need to set up the logic so each picture falls in a range. For example see the below snippet.:

 if (fTemp >= 100) {
    $(".container").css("background-image", "url(https://s2.postimg.org/6ss6kyuhl/yamaha_yzf_r1-wallpaper-1024x768.jpg)");
} else if (fTemp > 90) {
    $(".container").css("background-image", "url(https://s2.postimg.org/lapdsz8y1/beyonce_knowles_2-wallpaper-1024x768.jpg)")
} else if (fTemp > 80) {
    $(".container").css("background-image", "url(https://s2.postimg.org/i54s2ennd/Beyonce_in_Jamaica.jpg)")
}

By the way, nice pics!

edited Dec 31 '17 at 03:47

answered Dec 23 '17 at 11:55

Jonathan Chaplin

2,442
1
18
21

thanks.....I know right pics are woooohoooo! Hahaha...how did you see them though!?? LOL! – codebwoy Dec 29 '17 at 22:18
Check out the fiddle. I tested some data. By the way, your if/else conditionals need a little work. – Jonathan Chaplin Dec 30 '17 at 00:06
Hey, @Jonathan Chaplin, thanks for even putting all that work in and creating a jsfiddle to help me out! I highly appreciate it! Do you want to go to the chatroom? I don't even know where the chatroom is lol......but the first thing that I see in your Fiddle...is that the current picture showing right now, which is Beyonce, is suppose to show only when the temperature is greater than 80! – codebwoy Dec 30 '17 at 01:55
Like I said above your if / else block is the problem. I'll update my answer to reflect this. – Jonathan Chaplin Dec 31 '17 at 03:33
hi, I fixed it yesterday I came up with a better if/else statement using a different operand. Thanks for all your help! – codebwoy Dec 31 '17 at 21:07
No problem. If you like my solution consider accepting it. – Jonathan Chaplin Dec 31 '17 at 22:55
Oh yeah, I 'd forgotten about that, because your analysis, and corrections DID help me out! – codebwoy Dec 31 '17 at 22:59

How DoI Get My Weather App to Change Images for Different Temperatures?

1 Answers1