WEATHER APP: Toggling Between Farenheit / Celsius

1

Hey guys, I apologise for not having a CodePen to make things easier, I’ve been trying to do the projects locally to get some experience of setting up different environments.

I’m trying to make the temperature on my weather app so that when you click it, the code knows if Celsius or Fahrenheit is currently displayed, and does the math to convert it to the alternative. The problem is it only seems to work one way (the temperature is shown as C by default, when clicked it changes to F correctly, but if clicked again, nothing happens). The else part of my if/else doesn’t do anything. Can anyone read anything wrong with this code?

var tempC = Math.floor((data.currently.temperature - 32) * 5 / 9);

var tempF = Math.floor(data.currently.temperature);

$("#temp").hide().html(tempC + "˚").fadeIn("slow");

$("#temp").click(function() {
 if($(this).text() === tempF)
  $(this).text(tempC + "˚")
 else {
  $(this).text(tempF + "˚")
 }
});
2

You have to tell the if/else statement to clear out the if statement

1 Like
3

Thanks, any pointers on how? I’ve tried .hide to no avail before.

4

I did not test your code, but it looks like in your if/else statements, you’re comparing a tempF or tempC with the value of $(this).text(), which you haven’t defined as tempF or tempC, but tempF + “°” or tempC + “°”, am I right ? the string 100° cannot be converted to a number, and so is never equal to tempF or tempC.

The first click attempt works because your else condition is true as long as $(this).text() is any value other than tempF, so it works for 100° but could also work for “ohµ%µ/bioh;!:nbo$il”

update : One way to solve it would be to “lock” the values of tempF or tempC, for easy further comparison :

var data = {
  temperature:50
};

var tempC = Math.floor((data.temperature - 32) * 5 / 9) + "°"; // <== adding "°" from the start

var tempF = Math.floor(data.temperature) + "°"; // <== adding "°" from the start

$("#temp").hide().html(tempC).fadeIn("slow");

$("#temp").click(function() {
 if($(this).text() === tempF)
  $(this).text(tempC)
 else {
  $(this).text(tempF)
 }
});
3 Likes
5

Thanks! This helped me work it out in the end :slight_smile:

1 Like