[Help] jQuery append function not working

1

Hi all,

I’m new around the forum. Nice to meet you :smiley:

I’m working on the “API Weather” challenge and I got stuck when trying to show the proper icon.

Here is my pen: https://codepen.io/matiasnunes/pen/KmrEQP

After retrieving the data from Dark Sky, I try to append to a string from an array field to a figure tag, which is nothing else than a HTML canva piece with an ID, but nothing happens. The code is actually appended, but not shown.

Of course I’ve tried to add the canva tag manually into the HTML code and that way works just as expected, so there’s nothing wrong with it.

What I’m I doing wrong? Any help is much appreciated.

2

Haiiiiyo!

I don’t think that’s how you use the Skycons or tat it’s a very convoluted way to implement it. :frowning: I think taking another look at the documentation would help a lot.

In case that’s what you already did and the currently implementation is due a misunderstanding, the basic implementation is as follows:

/* HTML */
<canvas id="weather-icon" width="96" height="96"></canvas>


/* JavaScript */
const skycons = new Skycons({"color": "salmon"});

// And assuming that data is whatever you get from Dark Sky's API call
skycons.set("weather-icon", data.currently.icon);

I actually found out by accident that you can simply supply data.currently.icon without doing any transformation. For example, you get the same result with all of the following:

skycons.set("weather-icon", "clear-night");
skycons.set("weather-icon", "CLEAR_NIGHT");
skycons.set("weather-icon", Skycons.CLEAR_NIGHT);
skycons.set("weather-icon", Skycons["CLEAR_NIGHT"]);

Animation also works fine in all cases.

I hope that helps. :slight_smile:

1 Like
3

Thanks, @honmanyau. My code was indeed convulted, so your critique is very welcome.
Anyway, after implementing Skyicons the way you pointed it still wasn’t working, until I found that I’ve misspelled a variable name and that was causing the code to break :frowning:

It’s solved now. Thanks again for your time and help!

1 Like