FCC Weather App: Conversion from C to F works, but couldn't be reversed - HELP!

FCC Weather App: Conversion from C to F works, but couldn't be reversed - HELP!
0

#1

This is my first ever question to be posted on this forum. After 5 days of trying on my own to figure out and trying to get to work ~ but still couldn’t.

When clicking on Celsius Degree Temp, it changes from Celsius to Fahrenheit : This part is done
But
when clicking Fahrenheit Degree Temp <<<= It’s NOT converting back to Celsius!!!

This is the linke to my code:

Please have a look and let me know what I did wrong here. Please also show me how I can make it work.

Your help will be greatly appreciated!


#2

Your temperature first updates the span with id=“temp” within the updateWeatherData function in the following code:

    $("#temp")
      .html(cTemp) // this is the line that updates the span text with ctemp
      .click(function() { // this creates a click event, so that when ever the span is clicked, it will only show fTemp
        $("#temp").html(fTemp);
      });

Read my second comment above which pertains to the .click method used. This is why it never turns back to Celsius.


#3

Thank you so much for your timely response :smiley:

I have added the if/else statement to the logic, but it appears to excute both cases at once. It still shows fTemp and never back to cTemp.

Would you please look into it again? (line 143)

Thank you in advance :wink:


#4

The following if statement will always evaluate to true:

if ($("#temp").html(fTemp)) {

Why? Because $("#temp").html(fTemp)) is a jQuery object and all objects are “truthy”, so they get evaluated as true when used inside an if statement condition.

Can you please explain what you were you expecting the following code to do? Better yet, explain in plain language what you would like the if/else statement to do and I will try to give you a hint.

        if ($("#temp").html(fTemp)) {
          console.log("if");
        } else {
          return $("#temp").html(cTemp);
        }

#5

Ohh, I guess the code you saw wasn’t updated.

I was trying to see if the ‘IF’ statement works at all (that’s why I tried logging ‘IF’ ).

Now the code looks different. I’ll try to leave it unchange as you look into it. :slight_smile:

What I want:

  1. Once cTemp shows where #temp is, it should be clickable
  2. When the text is clicked while cTemp shows, return fTemp
  3. Otherwise, return cTemp

Please correct me if the logic isn’t right.

Thank you again in advance :slight_smile:


#6

This is already working.

You need a variable which keeps track of which unit is currently showing. Since you display cTemp first, then could use a variable like showingCelsius and initialize it to true. Then your if statement would check if showingCelsius is equal to true. If it is, then you want to do two things:

  1. display fTemp
  2. change showCelsius to false

If showingCelsius is equal to false, then you want to do two things:

  1. display cTemp
  2. change showCelsius to true

#7

Thank you for your hint :smiley:

Now I need to figure out the way to do it all in Javascript with no jQuery hopping that it will work this time :slight_smile:

Could you please explain why initialising a new variable in this case is needed? Or may be can you explain how JS works in a way that a new variable is needed in a case like this?

I’m just curious, and I think it’d be important to know in order to work on other projects to come.


#8

The extra variable is needed, because you need something to track which value you are currently displaying in order to know which other value to display. It has nothing to do with JavaScript, but instead on the algorithm needed to solve the problem. There might be another way without creating the extra variable, but this solution is the most typical.


#9

Also, make sure to initialize showCel inside the document.ready callback function and not locally to the span click event, because if you initialize it inside the span click event, then it will always be true.

Once you have correctly initialized showCel as I describe above, you could use either of the following to make the toggle work:

    $("#temp")
      .html(cTemp) // this is the line that updates the span text with ctemp
      .click(function() {
        var currTemp = cTemp; // assumes cTemp will be displayed unless cTemp is already being displayed
        if (showCel)) {
          currTemp = fTemp;
        }
        $("#temp").html(currTemp);
        showCel = !showCel;
    });

// OR

    $("#temp")
      .html(cTemp) // this is the line that updates the span text with ctemp
      .click(function() {
        var currTemp = showCel ? fTemp : cTemp; // using the ternary operator
        $("#temp").html(currTemp);
        showCel = !showCel;
    });

#10

THANK YOU!!! YOU SAVED MY LIFE!!! (AND MY WEATHER APP TOO)

Yesterday was in fact hopeless day, for my Weather App bugstuck was far from over.

Now it’s working!!! ~ such a miracle indeed!!!

I finally get to move on to other projects - Thank you so so much :smiley::smiley: :smiley:

p.s. I’m moving on to other projects, but of course I’m coming back to make the new version of this and other projects. So please feel free to comment, give suggestions, for further improvement :wink: