jQuery Toggle Fahrenheit Celsius

0 votes

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&#176;</button>
        <button type="submit" id="btn2">C&#176;</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) + '&#176;');
$('#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"/>');

    });
});

Jul 22 in Web Development by gaurav
• 17,580 points
14 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In Web Development

0 votes
0 answers

jQuery Slide toggle and fade in issue

As you can see when clicking on ...READ MORE

Jul 28 in Web Development by gaurav
• 17,580 points
9 views
0 votes
1 answer

How to download a file by jQuery.Ajax?

Hello @kartik, You don't need to do this ...READ MORE

answered Sep 18, 2020 in Web Development by Niroj
• 82,740 points
5,613 views
0 votes
1 answer

How can I create a simple page vertical scroll bar without using jQuery?

Surprisingly, there is not a great, simple ...READ MORE

answered Jun 22 in Web Development by rajatha
• 7,040 points
23 views
0 votes
1 answer

Microsoft CDN for jQuery or Google CDN?

You should absolutely use the Google CDN ...READ MORE

answered Jun 22 in Web Development by rajatha
• 7,040 points
29 views
0 votes
1 answer

Pure JS equivalent of Jquery eq()

To get the element index in the ...READ MORE

answered Jun 23 in Web Development by rajatha
• 7,040 points
17 views
0 votes
1 answer

$("#select option:second").val() jquery - keep select second value of select box option

Yes, you want the special jQuery eq() selector. ...READ MORE

answered Jun 22 in Web Development by rajatha
• 7,040 points
7 views
0 votes
0 answers

Javascript - Window open, use CDN

Simple question. I cannot get a new ...READ MORE

Jul 20 in Web Development by gaurav
• 17,580 points
5 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,500 points
308 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,740 points
8,878 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,740 points
15,869 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP