Local Weather plzzz help

Hi,
nothing is appearing on the screen and I dont know why. the only thing that is appearing on the screen is my h1

what am i doing wrong ?

<script>

$(document).ready(function(){
 var lat;
 var long;
 var api ="https://fcc-weather-api.glitch.me/api/current?";
 var fTemp;
 var cTemp;
 var kTemp;
 var tempSwap=true;
 var weatherType=data.weather[0].description;
  $.getJASON("http://ip-api.com/json",function(data2){
    lat=data2.lat;
    long=data2.lon;
    
      
      $.getJASON(api,function(data){
        kTemp = data.main.temp;
        var windSpeed=data.wind.speed;
        var city = data.name;
        fTemp = (kTemp*(9/5)-459.67).toFix(1);
        cTemp = (kTemp - 273).toFix(1);
        var tempSwap=true;
        console.log(city);
        $("#city").html(city);
        $("#weatherType").html(weatherType);
        $("#fTemp").html(fTemp + " &#8457;");
        $("#fTemp").click(function(){
          
          if(tempSwap===fales){
            $("#fTemp").html(cTemp + " &#8451;");
            tempSwap=true;
          }
          else{
            $("#fTemp").html(fTemp +" &#8457;");
            tempSwap=false;
          }
      
        });
        windSpeed = (2.237*(windSpeed)).toFix(1);
        $("#windSpeed").html(windSpeed + "  MPH");
        
  });
});
       
     
      });
 
       
     </scripy>

HTML

<div class="text-center">
  <h1>The Weather</h1>
<ul class="list-unstyled" >
  <li calss="btn btn-default" id ="city"></li>
  <li calss="btn btn-default" id="weatherType"></li>
  <li calss="btn btn-default" id= "fTemp"></li>
  <li calss="btn btn-default" id = "windSpeed"></li>
  <li></li>
</ul>
</div>

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

You have a couple of typos.

$.getJASON => $.getJSON
</scripy> => </script>

thank you for that
this is the first time I post any thing .
Thanks man

still doesn’t work

$(document).ready(function(){
var lat;
var long;
var api ="https://fcc-weather-api.glitch.me/api/current?";
var fTemp;
var cTemp;
var kTemp;
var tempSwap=true;
var weatherType=data.weather[0].description;
$.getJSON(“http://ip-api.com/json”,function(data2){
lat=data2.lat;
long=data2.lon;

  $.getJSON(api,function(data){
    kTemp = data.main.temp;
    var windSpeed=data.wind.speed;
    var city = data.name;
    fTemp = (kTemp*(9/5)-459.67).toFix(1);
    cTemp = (kTemp - 273).toFix(1);
    var tempSwap=true;
    console.log(city);
    $("#city").html(city);
    $("#weatherType").html(weatherType);
    $("#fTemp").html(fTemp + " &#8457;");
    $("#fTemp").click(function(){
      
      if(tempSwap===fales){
        $("#fTemp").html(cTemp + " &#8451;");
        tempSwap=true;
      }
      else{
        $("#fTemp").html(fTemp +" &#8457;");
        tempSwap=false;
      }
  
    });
    windSpeed = (2.237*(windSpeed)).toFix(1);
    $("#windSpeed").html(windSpeed + "  MPH");

});
});

Check your browser’s console ( Ctrl+Shft+J in Chrome) for any errors.

when I do Ctrl+Shft+J in Chrome i get

Please post a link to your Codepen. It’s not easy to see problems from screenshots and copied text.

Your first AJAX call is breaking because you’re mixing HTTP with HTTPS. The URL "http://ip-api.com/json" is not secure, so you the browser prevents the request from going out. This means you don’t have the coordinates for the second API call. Use the native geolocation API instead.

Adding to what @PortableStick said, the following line does not even allow your $.getJSON part to execute.

var weatherType=data.weather[0].description;

You have referenced a data object here that does not exist outside the $.getJSON callback function.

The error message you were receiving was telling you exactly where this error was ocurring and why.

Thank you for your response.
I dont understand
if you dont mind showing me an example that would be much appreciated.

You should probably review the FCC challenge on getting Geolocation Data (see link below).

https://www.freecodecamp.org/challenges/get-geolocation-data

1 Like