CODEWITHSUNDEEP
javascriptjquery
spr1x
spr1x

Reputation: 37

jQuery toggle between celsius and fahrenheit (bad logic from my side)

I am using Ajax to work with the openweather API. Everything works fine except for one thing.

I'm trying to make a button toggle between celsius and fahrenheit. On the first click, the function converts the value to fahrenheit, but for some reason when you click the button again it doesn't convert it back to celsius. I've found different solutions which work, but I would really like to avoid copy pasting and to figure out where's the error in my function's logic. I would appreciate your help on this. Js Fiddle: https://jsfiddle.net/m8w7gyxe/1/

LE: Turns out that there were more errors than one :). Thank you everbody.

J.M.'s solution works great. https://jsfiddle.net/m8w7gyxe/31/

<form>
   <input type="text" name="city" id="searchInput" placeholder="Search for a city...">
   <button type="button" id="searchBtn">
      <span class=" fa fa-search"></span>
   </button>
</form>
<div class="temperature">
   <div class="toggleBtn">
      <span>&#8451;</span> //celsius icon
   </div>
   <span id="temperature"></span>
</div>
<script>
    let degree = '&#8451'; //celsius icon
    let city = $('#searchInput');

    const celsiusToFahrenheit = (celsius) => {
        return (celsius * 9 / 5 + 32);
    }

    $('#searchBtn').on('click', function() {
        $.ajax({
            url: 'https://api.openweathermap.org/data/2.5/weather?q=' + city.val() + '&units=metric&APPID=MYAPPIDHERE',
            type: 'POST',
            dataType: 'json',
            success(response) {
                getResponse(response)
            },
            error(jqXHR, status, errorThrown) {
                alert('City not found...'); 
            }
        });
    });

    function getResponse(response) {
        $('#temperature').html(response.main.temp.toFixed() + ' ' + degree);

        $('.toggleBtn').on('click', function() {
            if (degree = '&#8451') { //if degree is celsius
                degree = '&#8457'; //change degree to fahrenheit
                $('#temperature').html(celsiusToFahrenheit(response.main.temp.toFixed()) + ' ' + degree);
            }
            if (degree = '&#8457') { // if degree is fahrenheit
                degree = '&#8451'; // change degree to celsius
                $('#temperature').html(response.main.temp.toFixed()  + ' ' + degree);

                console.log(degree); //&#8451
            }
        });
    }
</script>

Upvotes: 0

Views: 510

Answers (2)

Scaramouche
Scaramouche

Reputation: 3257

Several issues:

  1. Yes, the handler for the .on('click') should be taken outside the response, as Mackija stated, you only need the values, not the response, to perform the conversions.

  2. You say it works from Celsius to Fahrenheit but not the other way, I don't see a function to convert from Fahrenheit to Celsius.

  3. if (degree = '&#8451') is not comparing, it's assigning, so always passes. Use if (degree == '&#8451') instead

  4. You missed an important else in else if (degree == '&#8457'), without it both ifs were being run.

Relevant edits here:

    let fahrenheitToCelsius = (fahrenheit) => {
        return ((fahrenheit -32) * 5/9).toFixed(2);
    }
    $('.toggleBtn').on('click',function() {
        if (degree == '&#8451') { //if degree is celsius
            degree = '&#8457'; //change degree to fahrenheit
            $('#temperature').html(celsiusToFahrenheit(parseFloat($('#temperature').text()))  + ' ' + degree);
        }
        else if (degree == '&#8457') { //if degree is fahrenheit
            degree = '&#8451'; //change degree to celsius
            $('#temperature').html(fahrenheitToCelsius(parseFloat($('#temperature').text()))  + ' ' + degree);
        }
    });

try it and let me know: https://jsfiddle.net/m8w7gyxe/26/

Upvotes: 2

Mackija
Mackija

Reputation: 317

I think the problem is that you handler is being declared inside your "getResponse" function, which means when it is clicked it tries to use

response.main.temp.toFixed()

Which it can't because there is no response at that time. Try moving the handler outside of the getResponse, and instead of using the degrees from the response get it from what is currently on the page (You only need the number to convert back and forth, not the response)

Upvotes: 1

Related Questions