Local Weather App: Condition based icons

Code Feedback
1

Hi all,

I was wondering if someone could point me in the right direction. For the last three days I haven’t been able to figure out how to add icons based on weather conditions (cloudy, sunny, etc.). I know it’s very bare bones so far, but I it want to be passable before I start changing the format

Here’s my code so far

and here are the icons I’d like to use

any advice?

2

Hi. A few things would have been useful to know, like why it didn’t work and what you have tried already.

I changed the script’s src to https://rawgit.com/darkskyapp/skycons/master/skycons.js, which allowed it to load. The other pen you mention did work as intended after I changed the source.

RawGit serves raw files directly from GitHub with proper Content-Type headers.

Ps. It’d be awesome if you used proper links next time :wink:
[foo](http://foo.com) → foo
or just http://foo.com → http://foo.com

3

Yeah, I see you’re using openweathermap, and looking at their icon codes, they don’t correspond directly to Skycons’ labels (e.g. Skycon distinguishes day from night).

Here’s an example of the workaround that one person did to use openweathermap’s data with a different icon set (not Skycons): https://gist.github.com/tbranyen/62d974681dea8ee0caa1

OR… and I know it sounds like way more work–but you could start over using Forecast’s weather API. The plus to this, for me, is that it works over https, letting me use true navigator.geolocation instead of an IP-based location.

1 Like
4

Thanks for the reply!

I know how to get the icons on my page, but I can’t figure out to load them conditionally based on the weather.

I can get my page to load different backgrounds using
$(‘body’).css(‘background-image’, ‘url("’ + varName + ‘")’);

but I’m having some trouble doing the same with icons

5

I just got your message!

Thanks for responding both there and to my post. You’ve definitely given me a lot to look through… hopefully I can figure out it out from here. Definitely going to look into and stare at that cssdeck a little longer.

I think it might be more efficient (and a helluva lot cleaner) if i just convert over to the church of Forecast.io, so thanks again for the tip.

6

By the way, here’s why I prefer geolocation: http://forum.freecodecamp.com/t/why-does-location-not-work/13501/2

7

Hi, did you figure out how to make the icon shows based on weather conditions?
I am stuck on the same issue.
Here is my pen