Weather App help needed

Weather App help needed
0

#1

I have been working on getting my weather app going and got the darksksy request but now have no clue how to display it please help


How should i format the openeweathermap api in jS
#2

OK, you’ve got too much going on in there. For example, you don’t need to check if geolocation is supported because you’re using geoip-db.

And you have promises going on, and a bunch of other stuff. Some variables are declared twice. Your code formatting is a mess - seriously, it will be so much easier to follow. And you have to check the browser console - you have an unrelated error there you should fix.

In any case, if I remove all that is extraneous and duplicate, I get this:

$.ajax({
  url: "https://geoip-db.com/jsonp",
  jsonpCallback: "callback",
  dataType: "jsonp",
  success: function(location) {
    console.log(location);
    $("#country").html(location.country_name);
    $("#state").html(location.state);
    $("#city").html(location.city);
    var apiKey = "e53bd84ebb1b3648e83fd07a16238c0b";
    var latitude = location.latitude;
    var longitude = location.longitude;
    var unit = "?units=si";
    var url =
        "https://api.darksky.net/forecast/" +
        apiKey +
        "/" +
        latitude +
        "," +
        longitude +
        unit;

    $.ajax({
      url: url,
      jsonpCallback: "callback",
      dataType: "jsonp",
      success: function(data) {
        console.log(data);
      }
    }); // darkski AJAX
  }
}); // geoip-db AJAX

You can see the results in the browser console. Then putting them on the screen is a simple task for JQuery.


#3
  1. If you look at your browser console (Ctrl+Shft+I in Chrome), you will see you are trying to call a function called getLocation when the page loads. The problem is you do not have a function in the global scope (from where the window.onload is called). You do have a function inside the bigone function called getLocation, but it is local to the bigone function only. You need to move the getLocation out of bigone and into the global scope.

  2. You have two functions bigone and getWeather that you do not call anywhere in your code. Why do you have these functions in your program if you are not using them? If you just copied/pasted them into your solution from somewhere else, then you probably need to step back and write out some pseudo-code of what steps you want your program to accomplish before writing any more code.

  3. It would help greatly with readability of your code if you chose names for your variables and functions which describe what they represent (for variables) or do (for functions). A function name of bigone does not give any context to what it is supposed to do, especially since you do not have any comments for your code.


#4

Based on the code I gave you above, if you issue is really putting the data on the screen, then a simple line, like:

        $("#weather").html("<p>temp in C = " + data.currently.temperature + "</p>");

in your darksky AJAX callback will do it, but you’ll have to correct the id in your HTML. Right now you have it as <span id="#weather"></span> but it should be <span id="weather"></span>


#5

I cleaned up my code, hopefully it will be alright now as for this line when I put it into the AJAX it gave me an error saying “Unexpected string” and it did not work.


#6

You are getting the error message, because you tried to stick that statement right in the middle of defining the properties for the AJAX call to use.

You really need to google “How to use AJAX with JQuery”. Your 2nd AJAX call needs to have the same structure as the previous one for getting the coordinates. You do not have the necessary success function defined. You have one for the 1st AJAX call, but not the 2nd. Inside this 2nd success function is where you will be able to display the data you get back from the 2nd AJAX call.


#7

ok thanks I will try that


#8

Once you get you JavaScript code working, it will be difficult to see where it is putting the temperature information. I suggest adding the following to your CSS, so you can at least see the info.

#weather {
  font-size:30px;
  color:white;
}

#9

ok I did everything you guys said to do but it is still not showing up on my screen
this is the complete darksky function

$.ajax({
url: url,
jsonpCallback: “callback”,
dataType: “jsonp”,
success: function() {
$("#weather").html("

temp in C = " + data.currently.temperature + “

”);
}

}); // request AJAX


#11

first off thank you second I had tried that before and it was not working (I assume because it was wrapped in an unnecessary function) but in the end I am glad it has worked


#12

new issue this time it is my Celsius/Fahrenheit converter buttons I am currently trying to get my Fahrenheit button working first and it is not working or doing anything for that matter.


#13

There are various approaches.

One would be to have a button that recalculates the value and uses JQuery to send it to that element. You might consider having only one button, a convert button. You could have a variable to keep track of the current system and toggle it as the button is pushed.

I used a different solution. I created two spans, one with a class of metric and one for imperial and wrote them to the screen. One of those classes was set with a CSS of display: none and the other display: inline. I then used the button to toggle both CSS settings. It worked quite nicely.


#14

That is what I am doing right here but is not working

function buttonactive(data) {
var data;
var c= data.currently.temperature;
var f=(c * 9/5 + 32);
$("#convert").on(“click”, function(){
$("#weather").html(f);
return f;
});//click

}//buttonactive


#15

I am thinking that it could be because it is outside my AJAX darksky call but am not sure and I am working on that now.


#16

Heya,

EDIT: So I decided to try out .toggle() instead of what I had and it works very well with little needed code!

First you need two HTML elements, one for each. It’s important that one of the elements is hidden because .toggle() will do the opposite.

<p class="temperature" id="F" style="display:none;"></p>
<p class="temperature" id="C"></p>

Then you’ll want to set your get the information from your API and set it as the contents of the matching element.

$("#F").html("Temperature: " + Math.round(tempF) + "°");
$("#C").html("Temperature: " + Math.round(tempC) + "°");

Lastly, we make a button do the .toggle() function!

$("#buttonid").on("click", function() {
          $(".temperature").toggle();
        });

That should be all you need to make the temperature switch between C and F.


#17

OK, first of all, a couple things:

When you enter code in the forum, it must be properly formatted so it is readable. You put three backticks (key below ESC) on the line before your code block and three on the line after.

Also, you need to properly indent your code. I don’t see anyone can look at code with sections like:

$.ajax({
  url: "https://geoip-db.com/jsonp",
  jsonpCallback: "callback",
  dataType: "jsonp",
  success: function( location ) {
    $('#country').html(location.country_name);
    $('#state').html(location.state);
    $('#city').html(location.city);
    var apiKey ="e53bd84ebb1b3648e83fd07a16238c0b";
    var latitude  = location.latitude;
    var longitude = location.longitude;
    var unit = "?units=si";
    var url ="https://api.darksky.net/forecast/" + apiKey + "/" + latitude + "," + longitude  + unit;

    $.ajax({
      url: url,
      jsonpCallback: "callback",
      dataType: "jsonp",
      success: function(data) {
        $("#weather").html("<p>Temperature " + data.currently.temperature + "</p>");
        function buttonactive() {
          var data;
          var c= data.currently.temperature;
          var f=(c * 9/5 + 32);
          $("#convert").on("click", function(){ 
            $("#weather").html(f);
            return f;
          });//click
        }
      }               
    });  // request AJAX
  }
});  

function buttonactive(data) {
  var data;
  var c= data.currently.temperature;
  var f=(c * 9/5 + 32);
  $("#convert").on("click", function(){ 
    $("#weather").html(f);
    return f;
  });//click
}//buttonactive

So, your defining your click event twice? And defining the click event should be outside the AJAX calls. I define it outside the AJAX call - it still isn’t going to be called until someone pushes the button.

Also, it’s good to wrap JQuery in a document ready function.

And if we define the click outside the AJAX, then we need to have our variable for the temp global.

And your click function doesn’t need to return anything.

I got this to work - it’s still not pretty, but it works:

$(document).ready(function() {
  
  var f;
  var c;

  $.ajax({
    url: "https://geoip-db.com/jsonp",
    jsonpCallback: "callback",
    dataType: "jsonp",
    success: function(location) {
      $("#country").html(location.country_name);
      $("#state").html(location.state);
      $("#city").html(location.city);
      var apiKey = "e53bd84ebb1b3648e83fd07a16238c0b";
      var latitude = location.latitude;
      var longitude = location.longitude;
      var unit = "?units=si";
      var url =
          "https://api.darksky.net/forecast/" +
          apiKey +
          "/" +
          latitude +
          "," +
          longitude +
          unit;

      $.ajax({
        url: url,
        jsonpCallback: "callback",
        dataType: "jsonp",
        success: function(data) {
          $("#weather").html(
            "<p>Temperature " + data.currently.temperature + "</p>"
          );
          c = data.currently.temperature;
          f = c * 9 / 5 + 32;
        }
      }); // request AJAX
    }
    //    }
  });

  $("#convert").on("click", function() {
    console.log("in click");
    $("#weather").html(f);
  }); //click
});

But I might suggest you take a step back and rethink this a bit.

What if you had a variable that was a string with the temp and and the unit symbol, like “83°F” or “24°C”. That is a global variable. You also have a global boolean variable like isMetric to keep track of whether it is currently metric. Inside your click handler, you check if you are currently metric or not. Based on that, you generate a new string and send it to the output. Then you toggle the isMetric boolean variable.

That seems cleaner to me.


#18

Another idea would be to create a function called outputTemp whose job it was to output the temp to the screen. You would send it the temp in c and the isMetric variable and it would take care of doing the conversion and outputting to the screen. You would call this from your AJAX when you first get the data and in the click function. This way the output would always be the same. You’d just have to remember to toggle isMetric after calling it in the click function.


#19

OK i have tried Bill’s suggestion but is there something wrong or am i just plain stupid?

$("#convert").on("click", function() {
          $(".temperature").toggle();
   $("#fahrenheitid").html("Temperature: " + Math.round(f) + "°");
   $("#celsiusid").html("Temperature: " + Math.round(c) + "°");

        });
 
  });

and if you need more info here is the link


#20

It is working. The celsiusid and fahrenheitid elements are showing up on the lower right of the screen. (It’s hard to see because of your color combinations.) I would also suggest putting the data in them when you get the data, instead of when the button is pushed. The button just has to toggle.


#21

How would I do that?