My current issue involves integrating the JavaScript plugin "Skycons" with the Yahoo weather RSS feed. The problem arises when multiple days have the same weather forecast, as the plugin retrieves icons based on ID rather than class. This prevents me from displaying the same icon more than once.
For instance, all icons below will display except for the last li element due to the repeated use of the ID "snow":
<ul class="days">
<li class="col-md-3 col-sm-3 col-xs-3"><strong>Saturday</strong>
<canvas id="snow" width="50" height="50"></canvas>
<span>19°</span>
</li>
<li class="col-md-3 col-sm-3 col-xs-3"><strong>Sunday</strong>
<canvas id="rain" width="50" height="50"></canvas>
<span>19°</span>
</li>
<li class="col-md-3 col-sm-3 col-xs-3"><strong>Monday</strong>
<canvas id="sleet" width="50" height="50"></canvas>
<span>19°</span>
</li>
<li class="col-md-3 col-sm-3 col-xs-3"><strong>Wednesday</strong>
<canvas id="snow" width="50" height="50"></canvas>
<span>19°</span>
</li>
</ul>
Below is my initialization JS:
<!--SkyCons-->
<script type="text/javascript" src="js/vendors/skycons/skycons.js"></script>
<script>
var icons = new Skycons({"color": "#fff"}),
list = [
"clear-day", "clear-night", "partly-cloudy-day",
"partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
"fog"
],
i;
for(i = list.length; i--; )
icons.set(list[i], list[i]);
icons.play();
</script>
Additionally, you can access the referenced JS file at the following link:
https://github.com/darkskyapp/skycons/blob/master/skycons.js