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, 2022 in Web Development by gaurav
• 23,260 points
247 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, 2022 in Web Development by gaurav
• 23,260 points
467 views
0 votes
0 answers

jQuery onclick toggle class name

Using jQuery, how do I toggle classA ...READ MORE

Aug 22, 2022 in Web Development by gaurav
• 23,260 points
257 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,880 points
7,236 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, 2022 in Web Development by rajatha
• 7,680 points
327 views
0 votes
1 answer

Microsoft CDN for jQuery or Google CDN?

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

answered Jun 22, 2022 in Web Development by rajatha
• 7,680 points
481 views
0 votes
1 answer

Pure JS equivalent of Jquery eq()

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

answered Jun 23, 2022 in Web Development by rajatha
• 7,680 points
1,117 views
0 votes
0 answers

Javascript - Window open, use CDN

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

Jul 20, 2022 in Web Development by gaurav
• 23,260 points
293 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,510 points
1,034 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,880 points
14,458 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,880 points
22,554 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP