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.