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
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;
}
});
});
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.
