Convert Fahrenheit back to Celsius. Weather Forecast

I need help in my weather forecast app in freecodecamp challenge.

Here is my code : https://codepen.io/bradrar1/pen/ELwPPR

I have successfully converted Celsius to Fahrenheit by clicking the C . But when I Click F , It doesn’t return back to Celsius temperature.

Do I have typo in my code? Or is there better way to do this?

Thanks

I think the problem is that when the click handler for convertF gets run, that id doesn’t exist yet.

Take a step back. Rather than have a separate handler for F and C, why not just one? You could keep a boolean variable like isCelsius and toggle it on each call so you know what it currently is.

2 Likes

Thanks for the reply,

Can you provide related links to isCelsius that you are talking about? I have encountered it but haven’t read any documentation thoroughly.

Tried to toggle it using the if statement . It’s really hard, so now I resort to adding a button instead. but then again, problem not solved.

mebbe kinda like…

 var tog = 0;
 $("#convert").click(function()
 {
  var tempC =  temp +" °C";
  var tempF = (Math.floor(temp*1.8)+32) + " °F"

   if(tog = !tog)
   {  $("#temperature").html = tempF;
   }
   else
   {  $("#temperature").html = tempC
   }
 });
1 Like

Just tried it. It’s not working.

If i’m not bothering you, can you please explain what is happening in your code? And why create the variable tog = 0?

sorry, i SO friggin HATE json heh… no idea what your code is doing, but…
the… if ( tog = !tog) part… switches between true & false on each click…
also… you mebbe need to change your html bit?

var tog = 0;
 $("#convert").click(function()
 { 
   if(tog = !tog)
   {  $("#temperature").html(tempF);   
   }
   else
   {  $("#temperature").html(tempC); 
   }
 });
1 Like

I would add that there are some other issues here.

First, everything should be wrapped in a

$( document ).ready(function() {
  //...
}

This is standard practice in JQ. It makes sure that the DOM is build before you start trying to target it.

Next, That click handler should be outside the showPosition function.

And because navigator gets slow on repeated calls (like in development) I put this:

  // because navigator takes a long time sometimes on repeated calls,
  // preload with some dummy data
  showPosition({ coords: { latitude: 37.77, longitude: -122.4 }})

to load some dummy data if navigator isn’t coming back soon.

So, Xiija’s function is essentially what I was talking about, once you make the changes she adds. I would have done it a little differently. I would have used a more meaningful name than tog - I’d rather isCelsius or something else that is clear as soon as you look at it. And initializing it as 0 I think is confusing to, making it look like it is supposed to be a number. It works because that number gets coerced to a boolean after the first flip, but still - be clear. Always assume that a stranger is reading your code and trying to figure it out. And if you even have to maintain code after 6 months, I guarantee you, these things will drive you crazy. I’m also not a big fan of if(tog = !tog) I have to stop and think about that every time - is it evaluating to the pre or post value - better to make it clear. I ended up with this:

  var isCelsius = true
  $("#convert").click(function()
                      {
    var tempC =  temp +" °C";
    var tempF = (Math.floor(temp*1.8)+32) + " °F"

    if (isCelcius) {  
      $("#temperature").html(tempF);
    }
    else {  
      $("#temperature").html(tempC)      
    }
    isCelsius = !isCelsius
  });

The last issue is the click handler refers to the variable temp that only has scope in the showPosition function. One solution is to make this variable global.

There is a working pen here.

Lastly I’d ask that you work to keep your code organized. Indent properly. It makes it much easier to read. Learn to do it as you go. And if you select all your JS and do shft-tab, codepen will actually do it for you.

1 Like

Thank you kevinSmith, You’ve done above and beyond what I expected!

I’m sorry about asking the isCelsius variable thing. I thought it’s something new. I just didn’t realize that it’s the name of a variable.

Also, I looked at the working pen you did. The temperature doesn’t change when I click the button. Is it working for you?

Thank you for the shortcut to organize my code automatically. I did not know that.

Sorry, then pen should work now. I misspelled a variable name.

    if (isCelcius) {  

should have been

    if (isCelsius) {  

It should work now.

1 Like

Yes, it’s working now, Thank you again for the wonderful example.

One last question. what does isCelsius = !isCelsius; do? Can you explain what’s happening here?

I tried removing it and it only converts to Fahrenheit and not back to Celsius.
If I’m not mistaken, It’s read as isCelsius is TRUE = !isCelsius is FALSE but I don’t understand what is the logic.

Can you explain the logic behind this?

The value of the variable isCelsius is set to true. Theif in the function checks whether the value is true if (isCelsius) means:
if isCelsius is true then execute the if block. so you post the tempF variable.

at the end, it converts the isCelsius from true to not true. isCelsius = !isCelsius

So once you execute the function again, it sees the value as false and executes the code in the else block. Converting back to Celsius.

By removing that piece of code, the value is always true. so it always executes the if block and posts tempF. There is never a state that triggers the else block and posts celsius.

This is a more elegant solution then the one I came up with, (i wish i thought of this one when I tackled this project) I worked around it by checking whether there was a C or F behind the value in the html to decide how to convert.

2 Likes

My take on whole matter: Your app need to “know” if you clicked or not on element with id=“convert” and to remember it so if you click next time, then to know if you clicked before. If you clicked before then it reverts to it’s original state, in this case to display temperature back in fahrenheit. Further explanation: If you click first time variable tog increases value by one and convert temp to f. When you click second time it convert back to celsius and it resets itself to original value so that if click next you can convert it back to fahrs. And so on so on …

@Xivik

Great explanation. Thank you for this.