Basic weather app

Basic weather app
0.0 0

#1

Hi there,

I am currently busy building my weather app, but for some reason, when I try to change the background image with a certain temperature, it does nothing but return a white background.

My Codepen link is: https://codepen.io/mrcj101111/pen/WzKxEW?editors=1010

Thank you in advance.


#2

The problem is on line 29 (seen below), you assign celsius a string value

celsius = ((kelvin - 273.15).toFixed(0)) + "°C";

and then later in your code, your if statement is comparing this string value to a number.

    if (celsius > 23) {
      $("body").css("background-image","url(https://cdn.pixabay.com/photo/2017/11/04/08/14/autumn-sunshine-2916763_960_720.jpg)");
    } else if (celsius < 23) {
      $("body").css("background-image", "url(https://cdn.pixabay.com/photo/2017/11/01/08/16/rain-2907366_960_720.jpg)");
    }

Both of the above if statements will evaluate to false, so neither will execute their respective code blocks. Either do not add the °C on the end of celsius until after the above is statements, or create another variable to hold the numeric value for comparison purposes.


#3

Thank you so much. Really appreciate the help.


#4

FYI - You need to initialize your tempSwap variable to false instead true, because if you do not, you have to click the C/F button twice before it starts switching the temperatures. Why? Because the temperature starts as Celsius, so since your button click handler logic switches to Fahrenheit only if tempSwap is false, it needs to be false to start, so it will make the switch.


#5

Thank you very much. I really appreciate the help.