myaa myaa - 3 years ago 36
Javascript Question

Display the corresponding temperature logos with "simpleweatherjs" API

I relied on this exemple : https://codepen.io/fleeting/pen/xklfq and i want to display logo for the next days, i tried to add this code to display the 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 but i don't know ho to implemtent the 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+'&deg;'+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>');
}
});
});

Answer Source

The logos are contained in the CSS used in the code example on CodePen. If you have the CSS referenced in your HTML, you can simply add the following:

html += '<h2><i class="icon-'+weather.forecast[i].code+'"></i></h2>'

to your for loop.

So your code would look like the 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>';
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download