I’ve seen a bunch of different ways to tackle this app. And they’re as varied as all get out.
I have the OWM account/key
I have a basic understanding of what is being returned by JSON
I understand I need to use lat/long conversion passed to the JSON string
Question is how can I tackle this with as few lines as possible?
Should my first order of business be to get the IP converted to lat/long?
How to tackle the F/C* button conversion?
This should never be a concern for you unless you’re competing in code golf. Make it readable above all else.
I advise against this. The browser’s native geolocation API should be your go-to. You’ll also need to keep a CORS proxy in mind. cors-anywhere is popular and simple.
Part of this challenge is for you to make that decision. What possibilities can you think of?
If you haven’t built anything yet, I would recommend going with an API that allows https requests (to avoid cors-anywhere). I believe Wunderground allows this.
and THIS is where I’m going nuts …
everyone and their friends are stating a boatload of ways to program this app all in contradiction of the instructions … use this api or that api, use ajax, no use JSON no use JSONP, change the http(s) don’t worry about it just use whatever
The problem is that in Chrome you need to serve your page over https for the geolocation to work. And if you use https for your main page, it is required to use https for API requests as well. Since Openweathermap does not support https requests, I would suggest using an API that does allow https or, as @PortableStick suggested, to use cors-anywhere to overcome these http/https problems.
I believe the instructions were made before Chrome stopped geolocation access from http and haven’t been changed since. Now, you can still use Openweatermap in combinationo with cors-anywhere, but it is a less ideal solution. That is why I suggest using a different API (if you haven’t started yet).
Many people are struggling with this project and it will be removed from the new curriculum. (Or added as bonus project).
You are going to be totally fine if you follow the instructions. But you will have to use something like cors-anywhere (something the instructions don’t mention).
not sure if I got this right using the native geolocation. I should now be able to use the returned lat/long for building the OWM API query???
/* get users lat/long */
var getPosition = {
enableHighAccuracy: false,
timeout: 7000,
maximumAge: 0
};
function success(gotPosition) {
var uLat = gotPosition.coords;
var uLon = gotPosition.coords;
console.log(`Latitude : ${uLat.latitude}`);
console.log(`Longitude: ${uLon.longitude}`);
$('#uLat').html(uLat);
$('#uLon').html(uLon);
};
function error(err) {
console.warn(`ERROR(${err.code}): ${err.message}`);
};
navigator.geolocation.getCurrentPosition(success, error, getPosition);
A couple of those lines won’t work.
$('#uLat').html(uLat); // uLat and uLon are objects and can't be passed as HTML
$('#uLon').html(uLon); // You'll probably see something like [object OBJECT] instead of numbers
I would change the variable assignment a bit to fix this.
var uLat = gotPosition.coords.latitude;
var uLon = gotPosition.coords.longitude;
I remember how confusing this all was when I was learning it. There’s a lot to sift through. @BenGitter’s advice is solid - a securely hosted service should always be preferred and will often mean fewer headaches. Though, as I myself recently learned, HTTPS isn’t always enough to guarantee you’ll be able to use the data from your AJAX call. A lot of these services don’t want you to make AJAX requests from the browser and are meant to be accessed by your own sever code, then sent to your client. A CORS proxy smoothes this over for you, so I’ve taken to it as the safest recommendation is the widest range of cases. You’ll have much more control when you can write server-side apps.
I pulled all that out and did change the vars to what you mentioned.