Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Laurel Natale
Laurel Natale
Courses Plus Student 4,977 Points

Weather app modification

I followed this tutorial I found to create a weather app: http://tutorialzine.com/2013/05/weather-web-app-geolocation-revisited/

Here is the fiddle: http://jsfiddle.net/laurelrose18/DSYwx/

I want to change the names of the forecast. I know that the words used are Clouds, Clear, Rain, etc.. I am trying to pull the word that is returned and replace it with my own. I tried this:

 $.each(cache.data.list, function(){
                // "this" holds a forecast object

                // Get the local time of this forecast (the api returns it in utc)
                var localTime = new Date(this.dt*1000 - offset);

                addWeather(
                  var forecast = this.weather[0].main;
                   $.each(astrocst, function(condition){
                   if(condition == "Clouds") {
                   forecast = "Puffy";
                     }
                     else if(condition == "Clear") {
                     forecast = "Glassy";
                       }
                    else if(condition == "Rain") {
                    forecast = "Slippery";
                   }

                    });

                    this.weather[0].icon,
                    moment(localTime).calendar(),   // We are using the moment.js library to format the date
                    forecast + ' <b>' + convertTemperature(this.main.temp_min) + '°' + DEG +
                                            ' / ' + convertTemperature(this.main.temp_max) + '°' + DEG+'</b>'
                );

5 Answers

Joao Parreira
Joao Parreira
8,094 Points

Hello,

Please note the result of condition is a string with more text than the condition you are searching:

Rain <b>15°c / 15°c</b>

This kind of works, but you loose the temperatures. For the full solution you probably need something a bit more clever.

if ( condition.indexOf("Clouds") == 0 ) {
    condition = "Puffy";
} else if( condition.indexOf("Clear") == 0 ) {
    condition = "Glassy";
} else if( condition.indexOf("Rain") == 0 ) {
    condition = "Slippery";
}

In the full solution you should probably create another variable for the condition and another one for the temperature and split the original string.

Hope it helps.

EDIT:

Here is a possible solution, it can be improved, maybe even put all the terms of the conditions available in an array.

function addWeather(icon, day, condition){

    var single, temp;

    if ( condition.indexOf("Clouds") == 0 ) {
        single = "Puffy";
        temp = condition.replace("Clouds", "");
    } else if( condition.indexOf("Clear") == 0 ) {
        single = "Glassy";
        temp = condition.replace("Clear", "");
    } else if( condition.indexOf("Rain") == 0 ) {
        single = "Slippery";
        temp = condition.replace("Rain", "");
    }
    var markup = '<li>'+
        '<img src="assets/img/icons/'+ icon +'.png" />'+
        ' <p class="day">'+ day +'</p> <p class="cond">'+ single + ' ' + temp +
        '</p></li>';

    scroller.append(markup);
}
Laurel Natale
Laurel Natale
Courses Plus Student 4,977 Points

Thank you Joao. Did you get this to work? I am still getting clouds. I understand what you are saying though, and I will look into this.

Joao Parreira
Joao Parreira
8,094 Points

Hello Laurel.

I believe it's working: [fiddle http://jsfiddle.net/LFTtq/]

Joao Parreira
Joao Parreira
8,094 Points

Wrong link here is the correct one: [http://jsfiddle.net/LFTtq/1/]

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Laurel Natale - Personally I don't find the code in that tutorial to be terribly readable.

I made this a while back http://codepen.io/jamesbarnett/pen/dfAjq you might find it's code a little more readable, of course you still have to use code similar to the above to change the names for the conditions.

Laurel Natale
PLUS
Laurel Natale
Courses Plus Student 4,977 Points
Laurel Natale
Laurel Natale
Courses Plus Student 4,977 Points

I have updated my code:

function addWeather(icon, day, condition){

    var astrocast;

    if (condition == "Clouds"){
         astrocast = "Love";
    }
    else if (condition == "Rain"){
         astrocast = "Money";
    }
    else if (condition == "Clear"){
         astrocast = "Career";
    };


    var markup = '<li>'+
        '<img src="assets/img/icons/'+ icon +'.png" />'+
        ' <p class="day">'+ day +'</p> <p class="cond">'+ astrocast +
        '</p></li>';

    scroller.append(markup);
}

but the result is undefined, instead of the new word.. I do not understand why...?

Laurel Natale
PLUS
Laurel Natale
Courses Plus Student 4,977 Points
Laurel Natale
Laurel Natale
Courses Plus Student 4,977 Points

Joao, it so helped!! Thank you so much!

Joao Parreira
Joao Parreira
8,094 Points

No problem at all.

Laurel Natale
PLUS
Laurel Natale
Courses Plus Student 4,977 Points
Laurel Natale
Laurel Natale
Courses Plus Student 4,977 Points

James, Thank you so much!!! I am looking at this now, and your code is much easier to understand and follow. I will study and learn. :)

James Barnett
James Barnett
39,199 Points

That's what I thought when I saw the code from the tutorial. I wrote that all myself, no tutorial needed. Feel free to fork and improve it. Drop a link back in this thread if you do anything cool with it.