A weather application is currently in progress, but I am encountering issues with the display of temperature, country, and current weather description. It seems that the problem emerges after the HTML geolocation function. I suspect that the function is having difficulty parsing through the data provided by the weather API.
Below is my code:
$( document ).ready(function(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
function showPosition(position) {
var lat = "lat= " + position.coords.latitude;
var lon = "lon= " + position.coords.longitude;
getWeather(lat,lon);
}
function getWeather(lat,lon){
var urlstring = "https://fcc-weather-api.glitch.me/api/current?" + lat + "&" + lon;
$.ajax({
url : urlstring,
dataType : "jsonP",
success : function(data){
var temp = data.main.temp;
var desc = data.weather[0].description;
var country = data.sys.country;
$("#desc").html(desc);
$("#temp").html(temp);
}
})
}
var ctof = $("#c/f").click(function(){
var cel = Math.round((temp - 32) * 5 / 9);
var faren = Math.round((temp * 9 / 5) + 32);
if(ctof == true){
$("#temp").html(faren);
}
else{
$("#temp").html(cel);
}
})
});
The following is the accompanying HTML code for reference purposes:
<!DOCTYPE html>
<html>
<head><title>Web App</title></head>
<body>
<div class="container">
<div class="row">
<header class="col-xs-12 text-center">
<h1>Free Code Camp </h1>
<h1>Weather App</h1>
</header>
<div class="col-xs-8 col-xs-offset-2">
<div class="text-center status">
<p><span id="city"></span> <span id="country"></span></p>
<p><span id="temp"><button id="#c/f">C/F</button></span></p>
<p id="desc"></p>
</div>
<div class ="info">
<div class="develop">Developed by = Shumaila Bi Shaikh</div>
<div class="langs">Created by: HTML,CSS,ANGULARJS</div>
</div>
<script src="Weather.js"></script>