Weather app Toggle button

Weather app Toggle button


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


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


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


There is my weather app


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 =;
      var sky =[0].description;
      var temperature = data.main.temp;
      var wind = Math.round(data.wind.speed * 1.852);
      $(".temperature").html(temperature + " °C");
      $(".wind").html(wind + " km/h wind");
    //toggle button   
      $(".btn").on("click", function(){
           $(".temperature").html(temperature * 9 / 5 + 32 + " °F");
           $(".wind").html(Math.round(wind / 1.60934) + " mph wind");
           $(".btn").html("Change to Metric units");
           tempSwap = true;  
          $(".temperature").html(temperature + " °C");
          $(".wind").html(wind + " km/h wind");
          $(".btn").html("Change to Imperial units");


ok , thats greate :wink:


I was checking out your weather app and in case you are not aware, you have a slight logic issue which prevents the temperature changing the first time you click the button. Once you click the button 2 or more times, it displays the applicable temperature.


oh, thanks. will look into it