Help understanding how to create and use functions

1

Hey everyone,

I have completed my weather app, but have been trying to improve it and make my code better. I created it using a lot of trial and error and don’t fully understand how and why it works. I have a lot of questions about this stuff, but I’m going to try and minimize it to two specific ones for now.

First, here is a link to my weather app pen - http://codepen.io/derekbmcintire/pen/oZoJLB

If you have any trouble with it loading let me know, it doesn’t work for me on my laptop unless i run, then refresh debug mode, but others have said it works fine for them.

So, my first question is about the function getWeather(); - you can see that I declared a bunch of variabes and then called this function. The function appears in yellow. Below it is where the function is actually written out. If I delete the call at the top, and call the function below where it is written out, the program no longer works and getWeather(); appears in blue. Why is this? It seems like the call turns blue when it matches to an existing function, so I expected the opposite to happen.

My second question has to do with the weather icon. It functions correctly, but since I have added a search bar, when the city is changed, the weather icon also needs to change. I accomplished this by writing the exact same code twice, once in the getWeather function, and the second time in the onClick function. I was under the impression that the purpose of functions was to reduce the amount of code you have to write and I am sure there is a way of doing this without writing that huge if/else statement out twice, but I have not been able to figure out how. I have been working on this off and on over the last month and have even asked about it here on the forum but the only response I got told me to check out reactJS, which doesn’t really help me understand what is happening or why.

Also, if anyone has any easy sources for understanding functions more please send them my way. I have read through a lot of the static resources linked here and watched several youtube tutorials, but have trouble applying what I learned on really simple straight forward examples to my own projects.

Thanks!

2

Yes, the getWeather() is yellow because it hasn’t been declared yet. It’s fine, it’s just that when the browser reads top down, it hasn’t been declared yet, but it still works fine. And it works just fine for me when I move it below the function declaration. Are you sure you’re moving it to the right place? And deleting the first one? It can get confusing in files that big. I like to put inline comments after curly braces if they are far from the opening, like putting // getWeather() after that curly brace. You can check to makes sure it’s the right one by selecting it and seeing which open bracket also gets highlighted. You can also minimize blocks of code that are done to get them out of the way.

As to your second question, can’t you just create a function?

function weatherIcon(iCode) {
  var iUrl;
  if (iCode === "50d" || iCode === "50n") {
    iUrl = "https://c2.staticflickr.com/4/3861/33395954835_7c4db3de46_o.png";
  } else if (iCode === "02d") {
    iUrl = "https://c2.staticflickr.com/4/3904/33262934491_90070796be_o.png";
  } else if (iCode === "03d" || iCode === "03n" || iCode === "04d" || iCode === "04n") {
    iUrl = "https://c2.staticflickr.com/4/3838/33350077826_ff64d291ea_o.png";
  } else if (iCode === "09d" || iCode === "09n" || iCode === "10d" || iCode === "10n") {
    iUrl = "https://c1.staticflickr.com/1/586/33350078206_8c3e508336_o.png";
  } else if (iCode === "01d") {
    iUrl = "https://c1.staticflickr.com/1/633/32547787054_50a79ff2da_o.png";
  } else if (iCode === "02n") {
    iUrl = "https://c2.staticflickr.com/4/3667/32547791124_f25bdccb99_o.png";
  } else if (iCode === "01n") {
    iUrl = "https://c2.staticflickr.com/4/3716/33262938171_94881efd98_o.png";
  } else if (iCode === "13d" || iCode === "13n") {
    iUrl = "https://c2.staticflickr.com/4/3737/33262938961_7209bd6b25_o.png";
  } else if (iCode === "11d" || iCode === "11n") {
    iUrl = "https://c1.staticflickr.com/1/678/32547792224_93d33d8ae4_o.png";
  }
  return iUrl;
}

Or something like that.

3

Thanks… can you check this and tell me if it works? Maybe I am doing something wrong still, or maybe it’s just my computer/internet connection/location as I am traveling through Indonesia right now, but I just can’t get it to work. I forked the project and just moved the getWeather declaration below the curley braces.

http://codepen.io/derekbmcintire/pen/QpPveL?editors=1010

4

It seems to work for me. It correctly identifies my city as Oakland, CA and gives the weather. When I type “Paris, France”, it seems to give me correct info for there.

Now just bundle the icon code in a function.

5

Okay, seems like I have another problem then and that’s why I can’t get anything to work!

Thanks.

6

Logged in using a VPN on another device and it works fine… would have figured this out a week ago if not for that :confused: