Weather app Toggle button

1

Hello. I figured how to make a toggle button, to toggle between metric and imperial units so that temperature would be shown in Celsius or Fahrenheit and wind speed in km/h or mph. but cant find a way how to make toggle button use api data. and so when you press toggle button it gives you no data.

her’s my pen

2

Hi, when I did this challenge I first create functions like this:

const Faren = c => Math.round(c * (9 / 5) - 459.67);

const Celc = k => Math.round(k - 273.15);

Then I assign like this :

weather.temp_1 = Celc(data.list[1].main.temp);

where weather.temp_1 is a assigned variable of the dom element

3

sorry, i dont understand it. could you write or paste some code as an example? that would really help

4

There is my weather app

1 Like
5

thanks for help. haven’t actually checked your weather app code, cause found i found solution myself.

made simple else if statment:

  //use second api data and load on screen  
    $.getJSON(api, function(data) {
      var tempSwap = true;
      var location = data.name;
      var sky = data.weather[0].description;
      var temperature = data.main.temp;
      var wind = Math.round(data.wind.speed * 1.852);
      $(".location").html(location);
      $(".sky").html(sky);
      $(".temperature").html(temperature + " °C");
      $(".wind").html(wind + " km/h wind");
    //toggle button   
      $(".btn").on("click", function(){
        if(tempSwap===false){
           $(".temperature").html(temperature * 9 / 5 + 32 + " °F");
           $(".wind").html(Math.round(wind / 1.60934) + " mph wind");
           $(".btn").html("Change to Metric units");
           tempSwap = true;  
        }
        else{
          $(".temperature").html(temperature + " °C");
          $(".wind").html(wind + " km/h wind");
          $(".btn").html("Change to Imperial units");
          tempSwap=false;
        }
      });
      
      
    });
6

ok , thats greate :wink:

8

oh, thanks. will look into it