I followed a youtube video of creating a weather app. I recreated the app and am now trying to use Skycons for a 7 day forecast. I have tried indexing the canvas and the icon id does work. I can see it in the console log. But I can not get the skycons to load. I can not see what I am doing wrong. Here is a snippet.
for (x = 0; x < dailyForecast.length; x++) {
//Setting forecast data for length of forecast
let day = dailyForecast[x];
//rotating thru week day
if (dayCalWeek > 6) {
dayCalWeek = dayCalWeek - 7;
}
let icon = day.weather[0].main;
displayDailyTemp(
icon,
);
}
};
let displayDailyTemp = function (
icon,
) {
let uniqueIcon = 'icon' + x.toString();
let createSwiper =
`<a href='#' class='week swiper-slide'>
<div class='date-box'>
......
<div class='icon'>
<canvas id ='icon' + ${x} width='64' height='64'></canvas>
</div>
</a>`;
document.querySelector('.swiper-wrapper').innerHTML += createSwiper;
//Get Skycons to Display
setIcons(icon, uniqueIcon);
};
//set icons
let setIcons = function (icon, uniqueIcon) {
const skycons = new Skycons({ monochrome: false });
const currentIcon = icon.replace(/-/g, '-').toUpperCase();
skycons.play();
return skycons.add(uniqueIcon,currentIcon);
};
})