Looking for help with some JS for WeatherApp

My problem is in displaying some icons. I’m using https://darkskyapp.github.io/skycons/ which were made to be used with the https://developer.forecast.io/ I am using.

I had some trouble getting it to work in codepen but I have it hosted here http://br3ntor.com/weather/

All the icons are displayed at the moment but once I figure out a solution it will only be one icon.

I’m trying to set the icon by updating the <canvas> id attribute. The inline script in the html file links the <canvas> id’s to the animations in the skycons.js file.

Line 17 in my weather.js file changes the <canvas> id to display the icon for the weather in the users location. I see that this does update the id but it doesn’t change the icon.

I first assumed it was the order of my scripts but I can’t get anything from rearranging them.

I feel like I’m missing something rather small, anyone have any suggestions?

Doesn’t the JSON from forecast.io have an icon property? You’ll just have to plug it in.

var icon = data.currently.icon;

var skycons = new Skycons();
// the <canvas> has `id="icon-canvas"`
skycons.add("icon-canvas", icon);
skycons.play();

Thank you sir. This seems to work and helped me to understand how this wants to work better.

Thanks again!