Need help progressing on weather app

I am wondering what the next steps are? I keep getting the error"$" is not defined when the parser hits the Ajax call.

How can I test the API call?

Why isn’t the Ajax call working?

Where can I find this information?

What am I doing wrong?

/* Find User Current Location */

function geoLocation () {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success, error);
    }else {
        alert("Geolocation is not supported by this broweser");
    }
}
function error(){
    alert("Where the ?#!! are you?")
}
/* Retrieve info from the API */

function success(position) {
    var x = position.coords.latitude;
    var y = position.coords.longitude;
    var weather = 'https://fcc-weather-api.glitch.me/api/current?lat=' + x + '&lon=' + y;
     $.ajax({
        url : weather,
        dataType: "jsonp",
        success : function(data) {
            var location = data['location']['city'];
            console.log(location);
}
     });
        };

    

    
    




geoLocation();

I tried following along with this tutorial http://www.developerdrive.com/2014/09/how-to-build-a-weather-app-with-html5s-geolocation-api/
I can’t seem to display anything in my console. I am now looking at a video on youtube to help me understand the difference between Ajax and JSON.
I rearranged my code a bit to see if I can display anything in the console but nothing pops up.

the tutorial I am watching on youtube is https://www.youtube.com/watch?v=rJesac0_Ftw

I believe the “$” symbol can mean different things depending on how it is used.
Here is my new edited code



if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(success,error)
}

function error(){
    alert("Thats's weird! We can find you!")
}

function success(position){
  var  x = position.coords.latitude;
   var y = position.coords.longitude;
    var weather = 'https://fcc-weather-api.glitch.me/api/current?lat=' + x + '&lon=' + y;
    var ourRequest = new XMLHttpRequest();
    
     ourRequest.open('GET',weather)
    ourRequest.onload = function() {
    console.log(ourRequest.responseText);
};
    
}


Really solid information. Thank you!.
I added the Jquery library and everything worked great!

I am encountering the issue of actulaing loading up the image from the api call.

Would it go something along the lines of this.–>
$(".icon").html("<img src='https://freecodecamp.org/" + data.weather[0].icon + ".png' alt='Icon depicting current weather.'>")

?

woahhhhhhhhh I did it !!

 $.ajax({
    url : weather,
    dataType: "jsonp",
    success : function(data) {
        console.log(data);
        //var iconCode = .data.weather[0].icon;
            var cityName = data.name;
            var temp = data.main.temp * 1.8+32;
        $('#location').html('City: ' + cityName);
        $("#temp").html("Temp: " + Math.round(temp));
        var iconCode = data.weather[0].icon;
        var iconUrl = '' + weather + iconCode + '.png'   

$(".icon").html("<img src='" + iconCode + "'>")

     }
 });

}

Okay facing a new issue lol. Every time I resize the window white space is created in the bottom window. I have checked stackoverflow for answers but no such luck. Any idea what might be the problem?
Here is the code to my css


.floating-box {
    position:absolute;
    width: 550px;
    height: 500px;
    margin: 10px;
    border: 3px solid #1e2443;
    top:0;
    bottom:0;
    left:0;
    right: 0;
    margin: auto; 
   background:rgba(255,255,255,0.7);
    text-align: center;
    padding: 80px;
       
}
/*Background Image*/
.back {
    background-image: url("http://wallpapercave.com/wp/wc1801711.jpg");
    background-repeat: no-repeat; 
    background-size: 100%; 
    
 

}

.color {
    color:blue;
}

#location {
    font-size: 25px;
}

#temp {
    font-size: 25px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding:0;
    overflow:hidden;
    background-color:#333
}

img{
    height:100px;
}
.description {
    font-size: 20px;
}

Here is the code to my html

<!DOCTYPE html>
<html>
<head>
    <title>Weather App</title>
    <link rel="stylesheet" type="text/css" href="weather.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="weather.js" type="text/javascript"></script>
</head>
   
    <body class="back">

        
       
    <div class="floating-box">
        <h1> WEATHER APP</h1>
        <div id="location">Give me sec to locate where you're at!</div>
        <div id="temp"></div>
        <div class = "icon"> </div>
        <dic class = "description"></dic>
        
        </div>
    
    </div>
    </body>
    
</html>

I kinda figured it out by deleting the background repeat: no repeat on the "back class. I have no idea why it worked but it worked.