Local Weather plzzz help

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.

markdown_Forums

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

});
});

7

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

Untitled%203
Untitled%2031991Ă—935 85.2 KB

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.

13

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