I want to show a specific color based on the value i get from the Json response.


if the temp = any number between 1 and 15 it will show a blue box below and...

if the temp = any number between 16 and 25 it will show a green box below





url: 'http://api.wunderground.com/api/36b799dc821d5836/conditions/q/UK/London.json'

dataType: 'jsonp'

data: 'url'

success: (data) ->

for index, result of data

 temp = result.temp_c

 icon = result.icon_url

 weather = result.weather

        $('p.currenttemp').html "#{temp}"
        $('p.currentcondition').html "#{weather}"
        $('div.currentIcon').html "<img src='#{icon}' >"

if ($('p.currenttemp').is('1 - 15')) $('.blue.box').show();
if ($('p.currenttemp').is('16 - 25')) $('.green.box').show();
if ($('p.currenttemp').is('25 - 35')) $('.red.box').show();

Possibly remove the 'display:none' from your box class. You don't need those 3 boxes, you can just use one div and use jquery methods addClass and removeClass to change it's color.
You have a class named currentConditions, but your code uses currentcondition.
Sorry, apart from that I can't get much further, have you tried getting it to work in JavaScript instead of coffeescript?

I changed the language from coffeescript to JavaScript and this works, tho I left out the image retrieval part. Maybe this will help you work out the coffescript version anyway:

    url: 'http://api.wunderground.com/api/36b799dc821d5836/conditions/q/UK/London.json',
    dataType: 'jsonp',
    data: '?',
    success: function(weatherData){
        if (weatherData["current_observation"] != null
           && typeof weatherData["current_observation"] === 'object')
function DisplayWeather(obsData)
    // alert("Observation country: " + obsData.observation_location.country);
    var tmpC = parseInt(obsData.temp_c);

    if (tmpC < 16)
    else if (tmpC < 26)