Location and API not printing to console - Show the Local Weather App

Hello fellow campers!

This is my first post, so hopefully it’s in the right place. I’m currently working on building a weather app for the Show the Local Weather project with some help from YouTube, but having a bit of trouble simply getting the API (with the coordinates of my current location) and the city location to print in the console. I know the API and key work because I’m able to display my coordinates using HTML. Any help would be appreciated! The code (API key edited out):

$(document).ready(function() {
  var longitude = "";
  var latitude = "";
  var farenheit = "";
  var celsius = "";
  var city = "";
  var weatherType = "";
  var kelvin = "";
  
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(posit) {
      $("#data").html("latitude: " + posit.coords.latitude + "longitude: " + posit.coords.longitude);
      
      longitude = posit.coords.longitude;
      latitude = posit.coords.latitude;
      
      
      var weatherAPI = 
'api.openweathermap.org/data/2.5/weather?lat='+latitude+'&lon='+longitude+'&APPID=#####';
      
      $.getJSON(weatherAPI, function(data) {
      //JSON call
      weatherType = data.weather[0].description;
      kelvin = data.main.temp;
      city = data.name;
      
      console.log(weatherAPI);
      console.log(city);
        
      //Kelvin to farenheit and celsius
      farenheit = (kelvin) * (9/5) - 459.67;
      celsius = kelvin - 273.15;
      });
    });
  }

});

Does anything output to the console at all? You could also add an error handler to see if that catches anything.

$.getJSON(weatherAPI, function(data) {
      //JSON call
      weatherType = data.weather[0].description;
      kelvin = data.main.temp;
      city = data.name;
      
      console.log(weatherAPI);
      console.log(city);
        
      //Kelvin to farenheit and celsius
      farenheit = (kelvin) * (9/5) - 459.67;
      celsius = kelvin - 273.15;
      }, function(error) { // < second function passed to $.getJSON
          console.error(error);
      });

There’s no output to the console at all. Should be noted that I’m working on Codepen, if that makes any difference.

Could you please post your Codepen link here? You don’t need to format it in any way, just drop the link in a reply and it will load the project right here on the page.

Thanks for the clarification. I’m getting a “failed to load resource: the server responded with a status of 404 ()” message.

Here you go: https://codepen.io/beboptank/pen/gojpeK

Thanks for taking the time to look it over.

@PortableStick @camperextraordinaire Looks like I found the answer to my own question. Codepen needs https:// for API calls and Open Weather Map only supports https:// for premium plans. I replaced it with the freeCodeCamp API and everything seems to be good now.

Thanks again for taking the time to help! :grinning: