Reputation: 19
How's it going I'm trying to change this web app that i built from a tutorial from Fahrenheit to celsius probably very easy but I'm a noob when it comes to coding so be nice with me :).
I've searched high and low and a few sites I've come across said change the query in the API url and thats worked fro them. This is taken from the API documentation itself (The API request may optionally be modified through the use of query parameters. It will respond to the following) by adding this ?units=si to the url query it should work but it doesn't work for me I've tried to do it so many different ways so I'm lost to be honest any help would be great to try and figure this out thank you.
<title> Good Weather</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="themes/myTheme.css" />
<script src="jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<script type="text/javascript">
var icons = {"clear-day" : "B",
"clear-night" : "C",
"rain" : "R",
"snow" : "G",
"sleet" : "X",
"wind" : "S",
"fog" : "N",
"cloudy" : "Y",
"partly-cloudy-day" : "H",
"partly-cloudy-night" : "I"
};
var cities={
"new york" : {coords: {latitude: 40.672060, longitude:-73.983898}},
"los angeles" : {coords: {latitude: 34.101422, longitude:-118.341224}},
"chicago" : {coords: {latitude: 41.879003, longitude:-87.63675}},
"san francisco" : {coords: {latitude: 37.788531, longitude:-122.407237}},
"miami" : {coords: {latitude: 25.790176, longitude:-80.140133}},
"dublin" : {coords: {latitude: 53.344104, longitude:-6.2674937}},
"cork" : {coords: {latitude: 51.8978719, longitude:-8.4710874}},
"galway" : {coords: {latitude: 53.2737969, longitude:-9.0517799}},
"current location" : ""
};
function loadWeather(cityCoords){
console.log(cityCoords);
var latlng = cityCoords.coords.latitude + "," + cityCoords.coords.longitude;
var forecastURL = "https://api.forecast.io/forecast/APIKEY/"+ latlng;
$.ajax({
url: forecastURL,
jsonpCallback: 'jsonCallback',
contentType: "application/json",
dataType: "jsonp",
success: function(json){
console.log(json);
$("#current_temp").html(Math.round(json.currently.temperature)+"°F");
$("#current_temp1").html(Math.round(json.currently.temperature)+"℃");
$("#current_summary").html(json.currently.summary);
$("#current_temp").attr("data-icon",icons[json.currently.icon]);
},
error: function(e){
console.log(e.message);
}
});
}
function loadCity(city){
$("#location").html(city);
if(city.toLowerCase()== "current location"){
if(navigator.geolocation)
navigator.geolocation.getCurrentPosition(loadWeather, loadDefault);
else{
loadDefaultCity();
}
}else{
loadWeather(cities[city.toLowerCase()]);
}
}
function loadDefaultCity(){
loadCity("Dublin");
}
$(document).ready(function(){
loadCity("Dublin");
$("a.city").bind("click",function(){
loadCity($(this).html());
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="panel" id="left-panel" data-theme="d">
<ul data-role="listview" data-theme="d">
<li data-icon="delete"><a href="#" data-rel="close">close</a></li>
<li data-role="list-divider">Select a City</li>
<li ><a href="#" class="city" data-rel="close">Current Location</a></li>
<li ><a href="#" class="city" data-rel="close">Cork</a></li>
<li ><a href="#" class="city" data-rel="close">Chicago</a></li>
<li ><a href="#" class="city" data-rel="close">Dublin</a></li>
<li ><a href="#" class="city" data-rel="close">Galway</a></li>
<li ><a href="#" class="city" data-rel="close">Los Angeles</a></li>
<li ><a href="#" class="city" data-rel="close">Miami</a></li>
<li ><a href="#" class="city" data-rel="close">New York</a></li>
<li ><a href="#" class="city" data-rel="close">San Francisco</a></li>
</ul>
<!-- panel content goes here -->
</div><!-- /panel -->
<div data-role="header" data-position="fixed" data-theme="d">
<h1>Weather</h1>
<a href="#left-panel" data-icon="bars" data-role="button" data-iconpos="notext">Close</a>
</div>
<div data-role="content" class="content">
<h1 id="current_temp" class="icon" data-icon="B">65°F</h1>
<h1 id="current_temp1" class="icon" data-icon="B">65℃</h1>
<p id="current_summary">Partly Cloudy</p>
<p id="location">Current Location</p>
</div>
</body>
Upvotes: 0
Views: 386
Reputation: 21575
There is no need to use any API queries or keys for this problem, you can simply convert fahrenheit to cesius by using a mathematical equation:
fahrenheit = cesius * 1.8 + 32
So in your success:
function simply do the conversion:
success: function(json) {
json.currently.temperature = json.currently.temperature * 1.8 + 32;
...
}
Upvotes: 1