I’m not sure if this is even possible but, I’m trying to loop through an array of weather conditions, and apply different icons to different divs with the same class if they match the weather condition. Even if it’s not possible any help with a workaround would be greatly appreciated 
var weather = data.forecast.simpleforecast.forecastday;
for (var i = 0; i < weather.length; i++) {
var wC = weather[i].conditions;
switch (wC) {
case "Clear":
case "Sunny":
$(".weatherIcon").addClass ("wi wi-day-sunny");
break;
case "Mostly Cloudy":
$(".weatherIcon").addClass ("wi wi-cloudy");
break;
}
}
This is what I’ve been trying to use but i understand why it’s not working.
Html example:
<div class="row bottomRow">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-4 text-center">
<div id="fDay1"></div>
<i class="weatherIcon"></i>
<div id="minMax1"></div>
</div>
<div class="col-xs-4 text-center">
<div id="fDay2"></div>
<i class="weatherIcon"></i>
<div id="minMax2"></div>
</div>
<div class="col-xs-4 text-center">
<div id="fDay3"></div>
<i class="weatherIcon"></i>
<div id="minMax3"></div>
</div>
</div>
</div>
</div>
logging wC returns
console_runner-d0a557e….js:1 Clear
console_runner-d0a557e….js:1 Mostly Cloudy
console_runner-d0a557e….js:1 Partly Cloudy
console_runner-d0a557e….js:1 Mostly Cloudy
The problem is every time it gets to the end of the array it changes everything with the class “.weatherIcon” to the icon which represents “Mostly Cloudy”. I was hoping there was a way to apply the “Clear” icon to the first “Mostly Cloudy” to the second and so on. Cheers in advance
Hi, I’m on my phone so can’t really play with your code,
However, I did a similar thing with mine, you can see the code here, there’s a big switch in it and its commented where the process begins.
https://github.com/MARKJ78/FCC-Weather-App/blob/master/js/index.js
The method I used was to create a variable for each place I wanted to use a weather icon and it’s value was set to pass the icon code from the API call (you may or may not have codes available depending on which API you’re using), to a function that runs a switch and have the correct icon returned.
I then assigned that variable to complete the<i> string in an html insertion to display the icon.
HTH.
1 Like
Cheers I ended up getting it to work by assigning separate id’s with a number at the end then looping through them.
I have another problem if you reckon you could help with that 
?
I can try, I’m not very good tbh… Sometimes I get lucky and a question pops up I can answer 
I hate the way this indents bahaha. Outside of the change function minMax logs exactly what I want but inside it logs the same output 4 times.
I have 4 separate id’s with a number at the end which i’m looping through and sending them the temperature. When I want to change it to fahrenheit I can’t do it without a function but inside the function it just returns the same number 4 times instead of 4 different numbers.
Sorry i’m terrible at explaining.
for (var i = 0; i < 4; i++) {
var wC = weather[i].conditions;
var minMax = $("#minMax" + (i + 1));
var lowC = data.forecast.simpleforecast.forecastday[i].low.celsius;
var highC = data.forecast.simpleforecast.forecastday[i].high.celsius;
var lowF = data.forecast.simpleforecast.forecastday[i].low.fahrenheit;
var highF = data.forecast.simpleforecast.forecastday[i].high.fahrenheit;
var fDay = data.forecast.simpleforecast.forecastday[i].date.weekday_short;
console.log (wC);
switch (wC) {
case "Clear": case "Sunny":
$("#weatherIcon" + (i + 1)).addClass ("wi wi-day-sunny");
break;
case "Mostly Sunny": case "Mostly Clear": case "Partly Sunny": case "Partly Cloudy":
$("#weatherIcon" + (i + 1)).addClass ("wi wi-day-cloudy");
break;
case "Mostly Cloudy": case "Overcast": case "Scattered Clouds":
$("#weatherIcon" + (i + 1)).addClass ("wi wi-cloudy");
break;
}
$("#todayTemp").html (todayTempC + "°");
minMax.html (lowC + "° / " + highC + "°");
console.log (minMax);
$("input:radio[name=\"system\"]").change (function () {
if ($(this).val() == "cel"){
$("#todayTemp").html (todayTempC + "°");
minMax.html (lowC + "° / " + highC + "°");
}
else if ($(this).val() == "far") {
$("#todayTemp").html (todayTempF + "°");
minMax.html (lowF + "° / " + highF + "°");
}
});
$("#fDay" + i).html (fDay);
}
probably better off looking at this Codepen
Well apparently the function doesn’t run until the loop has finished anyway so I need to find a way around that
Hi,
Your API gives you temp_f & temp_c in its response.
You can tell your page which to display using an if else statement with the if condition set to detect which f/c is selected. Miine was slightly different but here you can see I have checked if my switch is “on” (on being C and off being F, but you have radio buttons so will be different) and then decided to fill all the divs I need according to if the “on” the condition was met.
So you could base an if else statement on the condition of your radio buttons (as you have) but then also fill all the individual divs with whatever you need.
//Centigrade/Fahrenheit units switch - pages are filled by default first above, (in 'POPULATE FORECAST PANELS')
$('#temp-toggle').click(function() {
$(this).toggleClass('units-toggle-on');
var button = document.getElementById("temperature-button");
if ($('#temp-toggle').hasClass('units-toggle-on')) {
button.innerHTML = "°C";
$('.temp .main').html(Math.floor(response.current.temp_c) + '<span class="degs">°C<span>');
$('.temp .sub1').html("<i class='wi wi-direction-down'></i>" + " " + Math.floor(response.forecast.forecastday[0].day.mintemp_c) + "°C");
$('.temp .sub2').html("<i class='wi wi-direction-up'></i>" + " " + Math.floor(response.forecast.forecastday[0].day.maxtemp_c) + "°C");
$('#1 .fSub3').html("<i class='wi wi-thermometer'></i>" + " " + Math.floor(response.forecast.forecastday[1].day.maxtemp_c) + "°C");
$('#2 .fSub3').html("<i class='wi wi-thermometer'></i>" + " " + Math.floor(response.forecast.forecastday[2].day.maxtemp_c) + "°C");
$('#3 .fSub3').html("<i class='wi wi-thermometer'></i>" + " " + Math.floor(response.forecast.forecastday[3].day.maxtemp_c) + "°C");
$('#4 .fSub3').html("<i class='wi wi-thermometer'></i>" + " " + Math.floor(response.forecast.forecastday[4].day.maxtemp_c) + "°C");
$('#5 .fSub3').html("<i class='wi wi-thermometer'></i>" + " " + Math.floor(response.forecast.forecastday[5].day.maxtemp_c) + "°C");
} else {
button.innerHTML = "°F";
$('.temp .main').html(Math.floor(response.current.temp_f) + '<span class="degs">°F<span>');
$('.temp .sub1').html("<i class='wi wi-direction-down'></i>" + " " + Math.floor(response.forecast.forecastday[0].day.mintemp_f) + "°F");
$('.temp .sub2').html("<i class='wi wi-direction-up'></i>" + " " + Math.floor(response.forecast.forecastday[0].day.maxtemp_f) + "°F");
$('#1 .fSub3').html("<i class='wi wi-thermometer'></i>" + " " + Math.floor(response.forecast.forecastday[1].day.maxtemp_f) + "°F");
$('#2 .fSub3').html("<i class='wi wi-thermometer'></i>" + " " + Math.floor(response.forecast.forecastday[2].day.maxtemp_f) + "°F");
$('#3 .fSub3').html("<i class='wi wi-thermometer'></i>" + " " + Math.floor(response.forecast.forecastday[3].day.maxtemp_f) + "°F");
$('#4 .fSub3').html("<i class='wi wi-thermometer'></i>" + " " + Math.floor(response.forecast.forecastday[4].day.maxtemp_f) + "°F");
$('#5 .fSub3').html("<i class='wi wi-thermometer'></i>" + " " + Math.floor(response.forecast.forecastday[5].day.maxtemp_f) + "°F");
}
});
Not too sure if thats what you were asking!
That would work fine I was just trying to do it as part of the loop to shorten the code bahah I’ll do it that way though it’ll save the trouble thankyou
