Concerning Bootstrap css!

That makes sense, and thx for both answers! It still isn't working: I add selectors to my h1 for instance which gets changed, and then apply the specific selector in my css, but the bootstrap still messes it up. Is there a certain version of bootstrap I should use for codepen. I'm using the one that says Bootstrap 3.3.6.

Regardless of what styles you use if an external style has more specificity over styles then those styles would be applied. You can always link your codepen.

Here is the link to my pen: http://codepen.io/xGabey/pen/NbLzZo And if you remove the boostrap cdn from the css tray, you'll see a difference; very small, but annoying nonetheless.

I see subtle difference, but help me out, what specifically are you struggling with?

Yeah, actually the styles don't bother me right now so much. They're pretty petty. But what I don't understand is why my bootstrap weather icons won't work. If you look toward the bottom of my JS tray, you can see the code that I'm using to replace the old icons with the new. I also have a var currentWeatherIcon declared at the top. Can you see a problem with this? (of course, I have to include boostrap, but it doesn't work with that, even.)

Ohh yeah, okay. Well, you're not really every telling the browser to replace the image. You're setting the area weather icon with this code here.

$(".area-weather-icon").html("<img src='http://openweathermap.org/img/w/" + currentWeatherIcon + ".png'>");

That's literally saying, to the area-weather-icon div, add this html, and you're getting the icon, which we're seeing on the page.

Than you do go into your if, else statement, and the browser is parsing it, but you're not telling it to do anything with. Really, what you should have is a function that returns the correct weather icon. You would pass the id of the weather icon into the function call, the function would return the correct html, and insert it into the page.

Also, you while not required to be valid, you should look at a switch statement instead of a lot of if else if statements. Anything more than about 3, I usually use a switch case statement instead. Easier to write, easier to troubleshoot. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

Take a stab at re-writing it now that I gave you a hint. I don't usually re-write code for others, but I'll help you figure it out on your own.

Thanks a ton! I'm really learning a lot in this project, (which should be complete in about an hour xD ). Quick question, I understand about the callback function, but would it wrap around all the switch statements? And if so, above the switches, would I somehow insert the specific icon's id using jquery's .html() ? Thanks again for all your time. G

Sure, no problem. Let's keeps this really simple. Jquery's html allows you to pass in a function, that returns something. Awesome.

http://api.jquery.com/html/#html-function

currentWeatherIcon = data2.weather[0].icon;
$(".area-weather-icon").html(function(currentWeatherIcon) {

switch (currentWeatherIcon) {
case "01d":
  return '<i class="wi-day-sunny"></i>';
  break;
case "01n"
  return '<i class="wi-night-clear"></i>';
  break;

//repeat on and on
//you can finish if you want with a default
//like this
default:
  return; //something when it can't find a case to match the icon to


});

Now I think this will work - I have't tested it, but go ahead and give it a shot yourself, and let me know.

Hey thanks Kevin! It's funny, if I keep the .html() code that you posted a few posts back, the one that places the icon, and then also use the new code, it just keeps the old icon. But it I take out that .html() code which is the one that has the '.png' suffix, it puts the id of the icon on the page, not actually the icon itself. Is this a pretty obvious fix? It beats me at the moment. :)

Here, check this out:

http://codepen.io/kevink/pen/eBoYYV

The code is messy, but you're now getting the html back you want. Your icon html is there, now you just need to your icon fonts so something actually shows up.

Also, you'll still need to follow the case, return, break patter for the remaining different codes and icon could be, and what you want the html to be if it's that.

When you mean icon fonts, do you mean the icon itself? I feel like the code in the pen your posted should make the icon appear, so I think I'm still missing something. probably really simple, it just hasn't clicked yet.

Yep, I don't know what icon set you're using, but it's not loading on my codepen, which is why you don't see an icon. It says this: Failed to load resource: the server responded with a status of 403 (Forbidden)