Show local weather: can't get alternating pictures

Show local weather: can't get alternating pictures
0

#1

I have been working on the show local weather app for about 3 days now and I can’t seem to figure out how to get the images in the background to change. I have been using if statements to get them to change depending on the temperature. I have pretty much followed the codingtutorials360 videos on youtube, but still can’t get it. Anyway here is the code if anyone has any suggestions. https://codepen.io/Twilson23/pen/NXxJmW?editors=1111

Thanks in advance,
Tyler


#2

I can see a couple of issues. First, your images are all being accessed via HTTP while your CodePen is HTTPS. Your browser’s security policy will block the downloading of insecure content from a secure connection. Find some images that are securely hosted. The second problem I see is that you’re trying to make numerical comparisons with the variable fTemp, which is a string. You’ll have to figure out a way to compare the temperature as a number.


#3

Awesome thanks, Finding secure photos should be easy enough. The second part is going to take a bit to figure out


#4

Does anyone have any ideas on how I can fix my if/ else statement issue? or if there is a better way to go about it?


#5

Can you explain what you want to do and what is happening that is a problem?

EDIT: If you are wondering why if the current temperature is say 60 degrees F, why your code does not change the background? You use fTemp to compare to various numeric values such as 50, 40, 30, 20, 10, and 0 to determine which background image to display. The problem is, fTemp is not a number. It is a string (as @PortableStick pointed out before). Actually, it is not just a string that looks like a number like “60”. It actually looks like “60.00&#8457”. That is definitely not a number. To resolve this issue, you need to separate the actual fTemp (which needs to be a numeric value to make the comparisons work) from the fTemp you display (with the extra &#8457 attached to the end).


#6

So I need a second fTemp variable that only represents the number?


#7

I don’t think that is neccessary. You just need to store the numeric version of the temperature in both fTemp and cTemp and then where ever you have:

$("#fTemp").html(fTemp );

or

$("#fTemp").html(cTemp );

maybe you could create a function (let’s call it displayTemp) to call with what ever type of temp (F or C) you want to display. For F, you would call the function like:

$("#fTemp").html(displayTemp(temp, unit));

Notice I added some parameters to the function so you can pass in the temp and applicable symbol.


#8

Awesome I’ll give that a shot thanks