javascript - Display the corresponding temperature logos with "simpleweatherjs" API -
i relied on exemple : https://codepen.io/fleeting/pen/xklfq , want display logo next days, tried add code display next days temperatures:
for(var i=0;i<weather.forecast.length;i++) { html += '<p class="days">'+'<span class="d">'+weather.forecast[i].day+'</span>'+'<span class="val">'+weather.forecast[i].high+'</span>'+'</p>'; }
i displayed them don't know ho implemtent logos ?
the complete html code:
$(document).ready(function() { $.simpleweather({ location: 'austin, tx', woeid: '', unit: 'f', success: function(weather) { html = '<h2><i class="icon-'+weather.code+'"></i> '+weather.temp+'°'+weather.units.temp+'</h2>'; html += '<ul><li>'+weather.city+', '+weather.region+'</li>'; html += '<li class="currently">'+weather.currently+'</li>'; html += '<li>'+weather.wind.direction+' '+weather.wind.speed+' '+weather.units.speed+'</li></ul>'; //my add here for(var i=0;i<weather.forecast.length;i++) { html += '<p class="days">'+'<span class="d">'+weather.forecast[i].day+'</span>'+'<span class="val">'+weather.forecast[i].high+'</span>'+'</p>'; } $("#weather").html(html); }, error: function(error) { $("#weather").html('<p>'+error+'</p>'); } }); });
the logos contained in css
used in code example on codepen. if have css
referenced in html
, can add following:
html += '<h2><i class="icon-'+weather.forecast[i].code+'"></i></h2>'
to for
loop.
so code following :
//my add here for(var i=0;i<weather.forecast.length;i++) { html += '<p class="days">'+'<span class="d">'+weather.forecast[i].day+'</span>'+'<span class="val">'+weather.forecast[i].high+'</span>'+'</p>'; html += '<h2><i class="icon-'+weather.forecast[i].code+'"></i></h2>'; }
Comments
Post a Comment