Question

I am getting some API information from Weather Underground and was wondering if it is possible to change the background color of the entire body through jQuery by using the information provided by the API.

What I would like to do is set a class on the body tag based on a certain range of Temperature that is returned via the API. So for example:

"current_observation": {
    "image": {
    "url":"http://icons-ak.wxug.com/graphics/wu2/logo_130x80.png",
    "title":"Weather Underground",
    "link":"http://www.wunderground.com"
    },
    "display_location": {
    "full":"Bowling Green, KY",
    "city":"Bowling Green",
    "state":"KY",
    "state_name":"Kentucky",
    "country":"US",
    "country_iso3166":"US",
    "zip":"42101",
    "latitude":"37.02899933",
    "longitude":"-86.46366119",
    "elevation":"154.00000000"
    },
    "observation_location": {
    "full":"Ridgeview Drive, Bowling Green, Kentucky",
    "city":"Ridgeview Drive, Bowling Green",
    "state":"Kentucky",
    "country":"US",
    "country_iso3166":"US",
    "latitude":"36.993744",
    "longitude":"-86.522827",
    "elevation":"714 ft"
    },
    "estimated": {
    },
    "station_id":"KKYBOWLI7",
    "observation_time":"Last Updated on May 24, 2:25 PM CDT",
    "observation_time_rfc822":"Thu, 24 May 2012 14:25:18 -0500",
    "observation_epoch":"1337887518",
    "local_time_rfc822":"Thu, 24 May 2012 14:25:29 -0500",
    "local_epoch":"1337887529",
    "local_tz_short":"CDT",
    "local_tz_long":"America/Chicago",
    "local_tz_offset":"-0500",
    "weather":"Clear",
    "temperature_string":"86.8 F (30.4 C)",
    "temp_f":86.8

That is some info I am pulling in. The very last one temp_f is what I want to focus on.

An example of ranges is – 80 through 90 should display background:#dd7f35

I’ve attempted to set up custom variables for this but always wind up breaking things. I can’t seem to figure out how to set up a variable using the information pulled in from the JSON (if that’s even possible since temp_f uses decimals.)

Here is how I am calling the JSON

$().ready(function(){ 
    $.getJSON("http://api.wunderground.com/api/[MY API KEY]/conditions/q/autoip.json?callback=?",
    function(data){
        $.each(data, function(i, json) {
        content = '<h1>' + json.icon + '</h1>';
        content += '<img src=' + json.icon_url +'>';
        content += '<p>' + json.temp_f + '<p>';
        $(content).appendTo("#area");
        });
    console.log(data)
    });
});

Here is something I have tried

var backDrop = ' + json.temp_f + '

I used + json.temp_f +because that is pulling in the temp just fine for the regular HTML but I can kind of assume that’s not going to work in this case?

Any help is greatly appreciated.

Answer 1

 var backDrop = json.temp_f;

Just get rid of the quotes and the pluses.

Or you could do something like this:

 var colorOutput = '';

 if(json.temp_f < 20){
     colorOutput = 'blue'; //use hex color
 }else if(json.temp_f >=20 && json.temp_f < 60){
     colorOutput = 'orange'; //use hex color
 }

 $('#colorMeElement').css('background',colorOutput);