Weather App -- Toggle between F and C

1

Hi All,
I’ve got my weather app working, and I’m pretty proud of that, but I’m trying to convert the temperature from F to C and back (per this user story: I can push a button to toggle between Fahrenheit and Celsius.)

With my code, I can switch it to C, but it doesn’t switch back. I’ve combed through the forum, googled everything, and I don’t know what is wrong. Can you help?

Here’s the relevant part ot the JS

//change F and C
        $(".btn").on("click", function() {
          var units = response.flags.units;
          if (units === "us") {
            $currentTemp.html("");
            var celsius = Math.round((farenheit - 32)/1.8);
            $currentTemp.append(celsius + " C");
            units = "si";
            console.log(units);
          } else if (units === "si") {
            $currentTemp.html("");
            $currentTemp.append(farenheit + " F");
            units = "us";
          }//close else
        });//close button click

If it helps, here’s all of it:

$(document).ready(function() {
  // declare variables
  var url = "https://api.darksky.net/forecast/e7522759282f3ef892f854a38a7ef757/";
  var latitude = null;
  var longitude = null;
  $currentTemp = $("#currentTemp");
  $currentCond = $("#currentCond");
  $currentWind = $("#currentWind");
  $forecast = $("#forecast");
  
  
  // use geolocation to get the current position
  function getLocation() {
    var geolocation = navigator.geolocation;
    geolocation.getCurrentPosition(showLocation);
  }
  
  function showLocation(position) {
    latitude = position.coords.latitude;
    longitude = position.coords.longitude;
    darkSky(latitude, longitude);
  }
  
  getLocation();
  
  // make the Dark Sky function 
  function darkSky(latitude, longitude) {
    url = url + latitude + "," + longitude + "?exclude=minutely,hourly,alerts";
    
    // make the ajax call to Dark Sky for weather info
    $.ajax({
      type: 'GET',
      url: url,
      dataType: 'jsonp',
      success: function(response) {
        // get current conditions
        var farenheit = Math.round(response.currently.temperature);
        $currentTemp.append(Math.round(response.currently.temperature) + " F");
        $currentCond.append(response.currently.summary);
        $currentWind.append(response.currently.windSpeed + " mph");
        
        // get weekly forecast
        var result = response.daily.data;
        
        for(var i = 0; i < 5; i++) {
          $forecast.append("<div class='box'>" + result[i].summary + "<br>" + Math.floor(result[i].temperatureMin) + "<br>" + Math.floor(result[i].temperatureMax) + "</div>");
        }
      
        /*
        // toggle F and C
        $(".btn").click(function(){
          $currentCond.toggleClass("celsius");
          setCelsius();
        });
        
        function setCelsius(){
          if(".celsius" === true) {
            $currentTemp.html("");
            var celsius = Math.round((farenheit - 32)/1.8);
            $currentTemp.append(celsius + " C");
          }
        }
        */
        //change F and C
        $(".btn").on("click", function() {
          var units = response.flags.units;
          if (units === "us") {
            $currentTemp.html("");
            var celsius = Math.round((farenheit - 32)/1.8);
            $currentTemp.append(celsius + " C");
            units = "si";
            console.log(units);
          } else if (units === "si") {
            $currentTemp.html("");
            $currentTemp.append(farenheit + " F");
            units = "us";
          }//close else
        });//close button click 
       
      }//close success
      
    });//close ajax
      
  }//close darkSky
  
});//close document.ready

And I’ll also link to my codepen: https://codepen.io/emorgan05/pen/NgEYNx
Thanks!

2

It looks like the problem is that at the start of your function, you are setting units equaled to responce.flag.units. Then after you change things your only setting the local copy of units to “us” or “si”. That local var gets discarded at the end of the function. You will have to change responce.flags.units in order for the changes to persist.

2 Likes
3

I was kind of proud with my solution to this.

I created spanss for each, metric and imperial and wrote them to the screen. I gave each a class of metric and imperial but gave the metric class a property of display: none; (making it collapse and disappear) and gave the imperial class a property of display: inline;. Then whenever I wanted to toggle them, I’d just switch the display property.

It worked quite nicely. I’m sure I’m not the first guy to come up with that, but I was quite proud of it.

But Josh is right, that is where the problem is. You may want to consider where you want to set the default value for *response.flag.units". With that in mind, I was able to get your code to work just by putting that line where it should be.

4

Good observation. I used the following for my toggle:

$("#temp").on("click", function() { var temp; console.log("inside Toggle"); if (toggle) { temp = Math.round(tempc); $("#temp").html(temp + " degrees celsius" + "<br><button class=\"btn btn-primary\">" + "Change to Fahrenheit" + "</button>"); } else { temp = Math.round(tempf); $("#temp").html(temp + " degrees fahrenheit" + "<br><button class=\"btn btn-primary\">" + "Change to Celsius" + "</button>"); } //switch toggle = !toggle; });

I had two variables setup which help the values for fahrenheit and celsius and it was able to solve my problem :slight_smile:

I suggestion creating a similar solution to edit the button on the fly.

5

Thanks for all the feedback! You all were right that the response.flags.units and setting that variable was in the wrong place. I moved it outside of the click function and it works to change back as well.

My code looks like this now:

//change F and C
        var units = response.flags.units;
        
        $(".btn").on("click", function() {
          if (units === "us") {
            $currentTemp.html("");
            var celsius = Math.round((farenheit - 32)/1.8);
            $currentTemp.append(celsius + " C");
            units = "si";
          } else {
            $currentTemp.html("");
            $currentTemp.append(farenheit + " F");
            units = "us";
          }//close else
        });//close button click
1 Like