Weather App: Using Skycons with Weather Conditions

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.

Here’s the link to my codepen: http://codepen.io/Qwicksilver/pen/vXAZkK

Let me know what I missed! I bet it’s something simple!

I’m not so familiar with using Skycons, but I see that they require canvas elements. Where do you expect these icons to appear?

Hi,

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.

In fact, as you’re using open weather map you don’t even need to map

For if you don’t end up getting skyicons to work.

2 Likes

I was hoping to have them show up at the last element in the thumbnail div. It’s the square area in the yellow block on the far left.

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. :slight_smile:

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.

Glad you got it working.

It’s always a bit disappointing when something you want to do doesn’t work… and sometimes its just time to move on.

the sky icons are cool but the simplicity of weather icons is also great :slight_smile:

1 Like

If you want to use Skycons, you’re better off with the https://darksky.net Weather API. They made Skycons and it’s integrated into their API.

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.

Hi,

I see you are using the weather icons,

in which case, i’d use a switch inside a function, like so:

var currentWeatherIcon = getIcon(response.current.condition.code, false);

then the function (shortened for brevity)

function getIcon(iconCode, forceDay) {
        var icon;
        switch (iconCode) {
            case 1000:
                if (forceDay === true || (response.current.is_day === 1)) {
                    icon = 'wi-day-sunny';
                } else {
                    icon = 'wi-stars';
                }
                break;
            case 1003:
            case 1006:
                if (forceDay === true || (response.current.is_day === 1)) {
                    icon = 'wi-day-cloudy';
                } else {
                    icon = 'wi-night-alt-cloudy';
                }
                break;
        }
        return icon;
    }

You should note i also tried to distinguish before day and night here to use the appropriate icons.

You also have the option of using the weather api service built in icons like so;

var thisIconIwantToUse = data.weather["0"].icon;

Cheers

Mark

Thanks Mark :p,

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?

3. What does this to do with my project?

I am a new camper, please bear with my questions.
Cheers.

Chelsea

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)

 $('#weather-icon').html('<i class="wi wi-owm-' + data.weather["0"].id + '"></i>');

I think I got everything that I wanted to figure out, Thanks a lot, Mark!
Great explanation:smiley:

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 :slight_smile:
Good Luck!

4 Likes

@hemakshis, you are a life-saver. Thanks for this. Save me a whole lot of stress.

Works perfectly. Guys try it.

1 Like