Please give feedback to my finished Weather Application - highly appreciated

Please give feedback to my finished Weather Application - highly appreciated
0

#1

Hi guys,

I did it. With help of some forum members I finally completed that app.
The building process was very funny and learned a lot.

This is the result: https://codepen.io/GeraltDieSocke/full/yzJrBg/

I just have a default white background. And just 3 backgrounds that changes when the status is rain, sunny or thunderstorm :D.
The weather icons however I have almost 30 or so implemented.
I have it from this site: http://erikflowers.github.io/weather-icons/

Please tell me what I did good and what I did badly. Any feedback is highly appreciated.

Thanks guys!
Have a nice day.


#2

You need to correct several errors appearing in the console (Ctrl+Shft+I in chrome). Also, as I mentioned in the help thread, you need to get rid the call to changeMetric. You removed the function itself, but not the call to it.

The other two errors will also need to be addressed:

  1. Uncaught ReferenceError: callbackFunction is not defined
    at https://query.yahooapis.com/v1/public/yql?q=select%20wind%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text='chicago,%20il')&format=json&callback=callbackFunction:1:5

  2. Uncaught SyntaxError: Invalid or unexpected token font-awesome.min.csss:4


#3

Thx man I fixed all the errors :slight_smile:


#4

One other suggestion is related to your setBackground function. First, since it is really setting the icon, I would call it setIcon. Second, that switch statement is HUGE.

You could get rid of the switch statement and implement something like below:

function setIcon(code) {
  var condIcons = [
    ['tornado',0,1],
    ['hurricane',2],
    // add the remaining conditions and codes as subarrays here
  ];
  var condIcon = 'wi-thermometer-exterior'; // default icon
  for (var cond of condIcons) {
    if (cond.includes(code)) {
      condIcon = 'wi-' + cond[0]; // 1st element of each cond is condition text
      break; // stop searching
    }
  }
  $('#symbol').addClass('wi').addClass(condIcon);
}