Weather App - Toggling between Celsius and Fahrenheit

Weather App - Toggling between Celsius and Fahrenheit
0.0 0
#1

Hi Guys,

I’m having trouble with toggling the two different temperature metrics. I’ve had a look through the forum, but cant seem to find anything relevant to my issue.

Toggling only seems to work on the first click, after that, I get no response. Can anyone help me resolve this? Codepen is below.

https://codepen.io/KUBIX90/pen/Qqeqjo

To get it to work with the other cities, is it just a case of putting the code in a function and calling it within the scope of each relevant city?

Apologies for the overall quality of the code, I’m going to try and clean it up and make it leaner once I’ve got the app working.

Thanks for your help,

#2

Hi, @KUBIX90, how are you?
At the very begginning of your code you set the variable toggleC to true, so it will only go inside the “if ( toggleC == true)” structure, because it is executed every time you toggle it.

My ideia to you is to use a global variable, the same statment that you did but outside your function, you know?

Hope it helps you

#3

Hi, @KUBIX90. @ThiagoAugustoSM is right, just make you variable “toggleC” global, becuase everytime you toggle you initialize and set it to true. Another thing I notice is that you should use Math.round(tempC) when toggleC is false.

#4

Here are some snippets for what I would change:

		$.getJSON(weatherAPI, function(data){
			var toggleC = false;
			var temp = data.main.temp;
			var tempC = Math.round(temp);
			var tempF = Math.round(temp*9/5 + 32);

…

			$(".slider").on("click", function() {
				toggleC = !toggleC;
			    if (toggleC) {
					$("#weather-degrees").html(tempF + "°F");
					$("#switch-temp--text").html("Fahrenheit");							  
				} else {
					$("#weather-degrees").html(tempC + "°C");
					$("#switch-temp--text").html("Celsius");
#5

That’s exactly how I did it. The results will be identical to how freeCodeCamp’s Local Weather did it too. Liked for the solution.

#6

Hi Guys,

Thanks for the help, much appreciated.

I’ve changed the toggleC variable to global, and whilst it works on the local weather, I can’t seem to get it to work when clicking on other cities, seems to be a scoping issue with the temp & data functions, any ideas? Trying to put it in a function and re-use it but getting the same error.

Thanks!

#7

I’ve updated the JavaScript code in the app to make it a bit cleaner and more readable. I’m still having he same issue though when trying to implement the toggle button for other cities. Any way I can get this to work?

https://codepen.io/KUBIX90/pen/NwWvNb

Thanks