In the final stretch of my weather app and have run into a hang up with using Skycons for my weather icons. I found a post on Stack Overflow that helps change my icons from using ids to using classes. Only problem is now the icons are not showing up with the new classes. Not sure what I did wrong and I’ve been looking at this for far too long and most likely overlooking something simple.
There’s also Weather Icons which are a set of icon fonts that you use the same as font awesome. No need to change any classes or anything. You just map your icon code from json response to an icon within your JS.
I’m really liking how Weather Icons is set up. I’ll definitely take a look at it as an alternative option. I was hoping to get skycons to work but if it’s this confusing I’ll take the simpler method at this point. I like a challenge but sometimes its better to just find something that works.
I was actually able to get the weather app working using Weather Icons luke @MARKJ78 mentioned. It works great for what I would like to show for my app. I would still like to eventually figure out a way to use Skycons for my app, but for now this definitely helps with what I’m trying to achieve.
Hi, can you be more specific about “map your icon code from json response to an icon within your JS”, I am currently stuck on making icon shows according to weather condition. Thanks a lot.
here is my pen.
1.Can you explain the following line to me please?
var currentWeatherIcon = getIcon(response.current.condition.code, false);
where does this response belong to ?
2. Do I need to send a API request to weather icons?
This is the variable that will hold the current weather icon, this is the bit your webpage will see. Use getElementById or the jquery equivalent to place the icon in your page in the element you want it to appear.
Nope, weather Icons use CSS, similar to font awesome or google fonts. You have already done enough to use them.
Oh i see, I didn’t realise OpenWeatherMap was an option here (i used a different weather API that was unsupported in my project), THIS CHANGES THINGS. and makes it easier.
you can build the icon in a similar way to how you built the url,
What is done here is use the API code for weather icons, (the wi wi-owm- bit, and combine it with the icon code you get in the api response which is data.weather["0"].id
put them together and combine with jQuery (or vai vanilla JS via getElementById) to insert into the page and you have the following line. (total spoiler by the way)
Okay I was also having this same trouble and saw another pen who used them but still I was clueless as to how it’s working for him and not me. Then it clicked me that there must be some link for connecting skycons just like bootstrap. And I was write we had to attach this link with our JS in the settings: https://rawgithub.com/darkskyapp/skycons/master/skycons.js
problems solved
Good Luck!