Local Weather plzzz help

Local Weather plzzz help
0

#1

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>

#2

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.


#3

You have a couple of typos.

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


#4

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


#5

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");

});
});


#6

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


#7

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


#9

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


#10

#11

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.


#12

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.


#13

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


#14

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