Weather App - Celcius Fahrenheit Toggle probs

1

Hi All,

I’m scratching my head at this one. Basically the document loads with empty fields for Temperature and Degrees symbol, which I update with jQuery after user clicks “Get Weather Data”. The problem comes when I try to reference the html of the Temperature field. I had changed the html with jQuery to reflect the JSON data from API, but when I try to check the value of #temp in the console, it returns “function()” (not a number as I would expect). Please take a look and let me know what you think!

Here is the code for updating temp field when Degrees field is clicked:

$("#degrees").click(function(){    
  var degreesC = temp;  //temp is storing data from JSON
  var degreesF = ((temp * 9/5) + 32);
  var degrees = $("#degrees").html;
  console.log($("#degrees").html); 
  console.log($("#degrees").text); 
    if (degrees == "&deg <a>C</a>"){ //#temp is in Celsius
      $("#temp").html(degreesF);
      $("#degrees").html("&deg <a>F</a>");
    }
    else if (degrees == "&deg <a>F</a>"){//should mean that #temp is in Fahrenheit
      $("#temp").html(degreesC);
      $("#degrees").html("&deg <a>C</a>");  
    }
  });

I had originally tried checking what the value of #temp was and comparing that to variable temp, but ran into the same problem. Here is link to the full CodePen: https://codepen.io/hburn11/pen/WEyLGp

Thanks so much!

3

Awesome!

I see now that when I had tried running with .text() I had left off the parentheses. Thanks again for your help today and the other day.

Would appreciate it if you could off just some general feedback on the appearance/layout of my weather app (https://codepen.io/hburn11/pen/WEyLGp).

4

Just as an info: I’m guessing you tried to match the weather image’s background color but you are just a tiny bit off. If that’s the case the right one would be: #272a33.

6

Thank you both. I changed the background color and will do some digging to keep degrees on same line and keep icon centered