Need help progressing on weather app

Need help progressing on weather app
0

#1

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

#2

I am going to help you with a slightly different approach, so bare with me.

My first question for you is what does the $ symbol in front of the .ajax mean to you?

Did you copy any of the code in your success function from anywhere or did you come up with it all on you own?

Answer these two questions and all post your complete solution so far (either Codepen or JSFiddle), so I can help you more. My goal is to help you to understand on your own why your code is not working through a series of questions for you to digest. I am 99% sure what the problem is even though I have not seen your complete solution.


#3

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



#4

What I was trying to get you to understand about the using $.ajax in your code is that is a JQuery function, so you must link to JQuery in your JS settings (if using Codepen or JSFiddle). I will let you figure that part out on your own.

Once you add the JQuery library, that error message will go away, but you will have a new error message. Below, I took your original code and added a console.log(data) to it and commented out two lines (one was causing the new error), so you could see what data you are getting back via the console.

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) {
           console.log(data)   //  this is what I added to see what is returns from $.ajax call

           // var location = data['location']['city']; 
           // console.log(location);
         }
     });
}

Let us know if you have any more questions.


#5

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.'>")

?


#6

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 + "'>")

     }
 });

}


#7

Good job and getting it figured out!


#8

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>


#9

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.