Weather Machine API--Nothing comes out


#1

Hello everyone. I have been recently tackling the weather machine front-end challenge. At the moment, my api key doesn’t seem to be working.or there’s something wrong with my code

Any help would be greatly appreciated.

Here’s my codepen: https://codepen.io/baquino1994/full/ayJOod/


#2

looking at the top portion of your code:
starting with Geolocation.getCurrentPosition() you give it a success call back function, however you are not providing it with an error function ,but you are passing one as a parameter, either give it an error function or delete it from the parameter list as it is optional. It may still also not work from here but it is a good start.

Let me also suggest that you utilize the console.log for tracking down JS errors.


#3

Everything @Dereje1 said is correct. Also, a call to the API with your key results in Error 403: Forbidden. This could be due to you exceeding your daily quota. You should log into your API account to see how many requests you have used today.


#4

I organized your code by putting all functions at the top of each local scope. You had your:

$(document).ready(function() {

right in the middle of your weather function which was causing a problem. Based on how you wrote your code, below is how you would use the above function:

$(document).ready(function() {
  weather();
});

Below is the corrected version of what you were attempting to do. I have hidden the code, so only click on the spoiler code below if you want to see what is should look like:

function weather() {
  function success(position) {
    latitude = position.coords.latitude;
    longitude = position.coords.longitude;
    location.innerHTML = "Latitude is " + latitude + "° Longitude is " + longitude + "°";
    var theUrl = url + apiKey + "/" + latitude + "," + longitude + "?callback=?";
    console.log(theUrl);
    $.getJSON(theUrl , function(data) {
        console.log('Success!!!');
        $("#temp").html(data, currently.temperature + "° F");
        $("#minutely").html(data.minutely.summary);
      }
    )
    .fail(function( jqxhr, textStatus, error ) {
      var err = textStatus + ", " + error;
      console.log( "Request Failed: " + err );
    });
  }
  function error() {
    location.innerHTML = "Can't find your location";
  }
  
  var location = document.getElementById("location");
  var apiKey = "9d69f0fe6fc1a706d95383f9c4e90ed5";
  var url = "https://api.forecast.io/forecast/";

  navigator.geolocation.getCurrentPosition(success, error);
  location.innerHTML = "Locating...";
}

$(document).ready(function() {
  weather();
});