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
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.
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>
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.
ok thanks I will try that
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
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
1 Like
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.
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.
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
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.
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.
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.
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.
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
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.
How would I do that?
I think that these two lines:
$("#fahrenheitid").html( Math.round(f) + "°F");
$("#celsiusid").html(Math.round(c) + "°C");
shouldn’t be in your click function. They should be in the callback of your weather AJAX call, right after those variables are defined.They get written to the screen immediately, just that one of them is hidden.
Hmm, interesting I will try that.
Well I am pleased to tell you that it worked great. Quick question though which API did you use for the icons or should I just load images into an array, e.g. If the sky is sunny then show the picture of a sunny day (as background image) .If the latter suggestion would work than what element from my Darksky API do I need to know to address the array?