How do I change units from Celsius to Fahrenheit in my weather app using javascript?

Question

I've been trying to make a website which shows the user's local weather. everything works fine, exept the fact that, if you want to swich units, the browser asks you again to share your location and I think that somebody could find that anoying. How can I fix that? Here's the code:

var la;
var lg;
var celsius=1;
var tempChange;

function getLocation() {
 if (navigator.geolocation)
   navigator.geolocation.getCurrentPosition(showPosition); 
}

function showPosition(position) {
 la = position.coords.latitude;
 lg = position.coords.longitude;

 var url="https://fcc-weather-api.glitch.me/api/current?lat=" + la + "&lon=" + lg;

 fetch(url)
  .then((resp) => resp.json())
  .then(function(data) {
    if(celsius===1)
     document.getElementById("temper").innerHTML="Temperature:" + data.main.temp + " °C";
    else
     document.getElementById("temper").innerHTML="Temperature:" + (data.main.temp * 1.8 + 32) + " °F";
    document.getElementById("image").src=data.weather[0].icon;
   })
  .catch(function(error) {
    console.log("error: " + error);
   });
}

getLocation();

function change() {
  if(celsius===0)
   celsius=1;
  else
   celsius=0;
  getLocation();
}

Here's a jsfiddle with the full HTML and CSS code, but somehow the switch button doesn't work: https://jsfiddle.net/1pvjrw3n/ . Normally, the browser would ask again for your location, then change the displayed temperature. This happens everytime you want to switch units.

just remeber the position and reuse it. Where do you struggle? — Joshua K, Aug 31 '17 at 12:47
refer this https://stackoverflow.com/questions/9114747/onclick-event-not-firing-on-jsfiddle-net. issue is about 'onclick()' is does not support in fiddler. — RaJesh RiJo, Aug 31 '17 at 12:49
Your title is misleading. Your question isn't really about changing from Celsius to Fahrenheit, it's about how not to ask location more than once? — Teepeemm, Aug 31 '17 at 12:49
you have to reuse the position data and only ask for them if they are not saved earlier. I updated your fiddle: https://jsfiddle.net/1pvjrw3n/2/ — Joshua K, Aug 31 '17 at 12:54
Here I created fiddle check if you find anything important. https://jsfiddle.net/Harsh80016/rtp3tqpw/ — Harsh Patel, Aug 31 '17 at 12:55
Updated your fiddle : https://jsfiddle.net/1pvjrw3n/3/ looks like the `function change` isn't in the window scope on fiddle, which is why it's not available directly to the onclick event. — DesTroy, Aug 31 '17 at 12:58
@RaJeshRiJo infiddle onclick will work , you just need to set `LOAD TYPE No wrap - in ` in javascript section. — Durga, Aug 31 '17 at 13:29

score 0 · Accepted Answer · answered Aug 31 '17 at 13:21

Just reuse the position data and only ask for it if it's not saved earlier. You can achieve this if you change your code at two small points

First

function showPosition(position) {
  if(!position && (!la || !lg)) getLocation();
  if(position) {
    la = position.coords.latitude;
    lg = position.coords.longitude;
  }

  var url="https://fcc-weather-api.glitch.me/api/current?lat=" + la + "&lon=" + lg;
...

If there is no position data as first argument and la or lg is not set get the location from the browser api. If position data is set, save this data in la and lg for the future.

and second:

function change() {
  if(celsius===0)
    celsius=1;
  else
    celsius=0;
  showPosition(); // instead of getLocation
}

you call showPosition everytime instead of getLocation directly. showPosition take a look at the position data and decides if it is necessary to call getLocation.

Here's the working fiddle

score -1 · Answer 2 · answered Aug 31 '17 at 12:48

-1

Instead of placing your onclick inside your Html.

The best place would be inside your javascript, as it might be a module. etc.

So remove the onclick from your HTML, and put this in your javascript..

document.querySelector('#button').onclick = change;

answered Aug 31 '17 at 12:48

Keith

22,005
2
27
44

but his question was "How can I get it work, that the browser is not asking the position everytime I click the switch button" – Joshua K Aug 31 '17 at 12:51
@JoshuaK Subject = `How do I change units from Celsius to Fahrenheit in my weather app using javascript?` If the OP has another question, best to post another question, that's SO policy. – Keith Aug 31 '17 at 12:56
please read the question and not only the title... check the fiddle here: https://jsfiddle.net/1pvjrw3n/4/ (i fixed the onclick="change()" error and you see his original question – Joshua K Aug 31 '17 at 12:57
@JoshuaK He has multiple questions / issues. He needs to post multiple / questions in SO. I don't need to read the rest of the questions, as I'm only meant to answer one of them. That I did..!!.. If the OP has another question on how he can persist this data, I may well answer that too. – Keith Aug 31 '17 at 12:58
bad behavior in my opinion. If you want to help... read the question. If you don't want to do this, don't answer. he says clearly: "How can I fix this?" about the problem with the multiple browser requests for the location. later he says "here is the fiddle, but the button is not working in this code". That's no question. He just points out that the snippet is broken, but he wants to show us his code anyway, so we can see where the issue is with his problem of multiple location requests. So your answer is no answer to the question. It's a comment to make his fiddle work. – Joshua K Aug 31 '17 at 13:16
@JoshuaK I'll repeat `How do I change units from Celsius to Fahrenheit in my weather app using javascript?` as you seem to be totally missing this part. There are lots of questions on SO, I've answered plenty, if clarification from the OPs is sometimes required, that's fine too. So please don't do the -> `If you want to help` as that's now just becoming rude. – Keith Aug 31 '17 at 13:22
Ok. Let's agree on: The questioner was not clear about his real question, deal? I don't want to be rude but the statement "I don't need to read the rest of the questions, as I'm only meant to answer one of them." is a big nogo for me and made me a bit angry. In my opnion the whole question is important if I want to write a good answer. Shouldn't be rude. mea culpa. – Joshua K Aug 31 '17 at 13:26
1

@JoshuaK `as I'm only meant to answer one of them.` That was meant in conjunction with SO's policy of one question one answer. Bit more details here -> https://meta.stackexchange.com/questions/222735/can-i-ask-only-one-question-per-post I'll agree on the question not totally clear and precise, or we wouldn't be having this conversation. – Keith Aug 31 '17 at 13:32

How do I change units from Celsius to Fahrenheit in my weather app using javascript?

2 Answers2