Forecast app not working with Skycons

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);
                     };
           })

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.