I'm trying to create a weather app with the Open Weather Map API. I want to create a button that will allow you to toggle between Fahrenheit and Celsius. I've tried literally everything but I've gone back to the code I wrote before I tried putting a button in.
How could I implement this with my current setup?
<div class="container">
<div class="jumbotron text-center"
style="background-color: #00F0F8FF; font-family: 'Oswald', sans-
serif; color: black;">
<h1>Local Weather App</h1>
<h2><span id="town"></span></h2>
<h2>Temperture: <span id="temp"></span></h2>
<div id="weatherIconBox"></div>
<h2><span id="weatherType"></span></h2>
<button type="submit" id="btn1">F°</button>
<button type="submit" id="btn2">C°</button>
</div>
</div>
var getIP = 'http://ip-api.com/json/';
var openWeatherMap = 'http://api.openweathermap.org/data/2.5/weather'
$.getJSON(getIP).done(function(location) {
$.getJSON(openWeatherMap, {
lat: location.lat,
lon: location.lon,
units: "imperial",
}).done(function(data) {
$('#town').html(data.name);
$('#temp').prepend(Math.floor(data.main.temp) + '°');
$('#weatherType').html(data.weather[0].description).css('textTransform', 'capitalize');
$('#weatherIconBox').prepend('<img id="weatherIcon" src="http://openweathermap.org/img/w/' + data.weather[0].icon + '.png"/>');
});
});