Weather app - anyone else feels completely lost?

1

I’ve tried coming up with my own solution for this but I don’t feel I got enough instruction from FCC and the documentation alone. Anyone else feels the same? How are we supposed to do it without looking at the code?
I’ve tried jQuery and fetch so far, keep getting CORS error or 404 errors.
Any advice on other things to try before checking the code would be appreciated!

2

Can you share your codepen link so we can take a look at your code so far?

3

Yes. This is what it looks like at the moment:

Bear in mind I’ve started over like 5 times.
This is a previous version with jQuery:

$(document).ready (function() {
  var lon;
  var lat;
  var url;
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position){
    lon = position.coords.longitude;
    lat = position.coords.latitude;
    url = 'https://fcc-weather-api.glitch.me/api/current?lon=' + lon + '&lat=' + lat;
  });
}
$.getJSON(url, function(data) {
  alert(data.coord.lat);
}


)

})//end of document ready

I feel like I have zero idea what I’m doing and that I should spend way more time reading abut APIs and related subjects, I’ve watched some videos and read all the documentation and still can’t figure it out.

4

First get the location, then call the API this is what i did:

function getWeather() {
  
        if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
 /*  $("#po").html("longitude: " + position.coords.longitude + "latitude: " + position.coords.latitude*/
 
  
  $.ajax({
    url: "https://fcc-weather-api.glitch.me/api/current?lon=" + position.coords.longitude + "&lat="+ position.coords.latitude,
    success: function(data) {
      if(typeof data === "string") {
        data = JSON.parse(data); //converts a string into an JS object
    }
});
5

Just uncoment the getweather function call in nnavigator function then delete the variable declarations in getweather function. No need to redeclare as you pass the lat and lon to it

6

In codepen->settings javascript part quick add and select jquery lib and it shoul work

7

Sorry I am on mobile. Switch also in navigator when calling getwather function lat with long. First lat then long so they correspond to the parameters accepted by the getweather function

8

try this

i think you may need to wait until geolocation actually locates

also you should be mindful of indents, makes it a tad easier to follow

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    getWeather(position.coords.latitude, position.coords.longitude);
  });
} else {
   alert("Your browser doesn't support geolocation");
}

function getWeather(lat, long){
  var url = `https://fcc-weather-api.glitch.me/api/current?lat=${lat}&lon=${long}`; // template string
  fetch (url)
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    console.log("This is the geolocated data", data); 
  });
}

another thing: sometimes it’ll return Shuzenji, JP weather. it’s a bug in the API

1 Like
9

Omg it worked! Thank you so much!

10

I wondered why that was. I’m nowhere near Japan :joy:

11

Its an api known issue