Local Weather ...Heeeelp

Local Weather ...Heeeelp
0.0 0

#1

whats wrong?
l`

Weather

Celsius Fahrenheit

`

if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){

var latitude = position.coords.latitude
var longitude = position.coords.longitude

$.getJSON(“http://api.openweathermap.org/data/2.5/forecast?id=524901&appid=ee555f92f17b9257de43ba89944abd5c”, function (data) {

       var cel = Math.round(data.main.temp - 273);
$("#location").html(data.name + "," + data.sys.country);
$("#weather").html('<img src =' + "http://openweathermap.org/img/w/" + data.weather[0].icon + ".png"+ '>' + data.weather [0].description);
$("#temp").html(cel);
$("#mic").html("Humidity" + data.main.humidity +"%");

$("#fh").click(function() {
$("#cl").removeClass("cf");
$(this).addClass("cf");
$("#temp").html(Math.round(cel*1.8+32));
})
 
   $("#cl").click(function() {
   $("#fh").removeClass ("cf");
   $(this).addClass("cf");
   $("#temp").html(cel);  
   })
});

var current = $.now();
var maxDate = new Date(current);
var currenDate = maxDate.toString();
$("#date").html(currenDate);
});
}


#2

If you are working in codepen, you will not be able to use openweather API. Codepen recently went HTTPS only and openweather is HTTP.

If you open the console on your page, you will see the following error :

jquery.min.js:4 Mixed Content: The page at ‘https://codepen.io/paulinafischer/full/PjGZgO/’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘http://api.openweathermap.org/data/2.5/forecast?id=524901&appid=ee555f92f17b9257de43ba89944abd5c’. This request has been blocked; the content must be served over HTTPS.

You need to use an API that works over HTTPS. Dark Sky API does.

Edit :

You could also use a proxy as a work-around.
This url would allow you to send the request to a https proxy then get the data from openweather app

https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/forecast?id=524901&appid=ee555f92f17b9257de43ba89944abd5c

You can then use console.log the see the format in which you receive the data. You will run into issues at
var cel = Math.round(data.main.temp - 273);

data.main.temp is not a valid path. Console.log will help you find the right path.


#3

ok I will check it out, thanks :slight_smile:


#4

can i use ip-api?
http://ip-api.com/json/?callback=yourfunction - using your current IP address

http://ip-api.com/json/208.80.152.201?callback=yourfunction

Which option is better?

Here is my pen https://codepen.io/paulinafischer/pen/PjGZgO

I’m very confused please help me!


#5

Use the first link. It will auto fetch the user’s url. Otherwise, it will always show the info for wikimedia company regardless of user’s IP.

Also a few problems with you code that prevents it from running completely :

  • Line 1: Your if statement is not closed. You need a closing curly bracket at the end of your code.
  • Line 3 : Your function is not closed either at the end of your code, above the curly bracket you just added, you need to close the function
  • Line 8 : You created a variable for you ajax call url. You called it “url” but use “api” in you ajax call. “api” is undefined. You need to change it for “url”
  • Line 15 : data.time.minutely is not the right path to the data you want to access. You put a console.log(data) in your code. That’s good, use it to find the right path.
  • Line 41 : variable “cel” reads “undefined”. This is because you closed your getJSON function before you intended. variable “cel” is declared within your getJSON function and is thus out of scope and undefined outside of the function. Check where your getJSON is closed and move the closing bracket accordingly.
  • library : you added both bootstrap v4 and bootstrap v3.

Correcting these will allow your code to run completely. This is the first step you need to follow before writing further code.

Your html also has issues. You have an unclosed tag, a duplicate id…
You can use https://validator.w3.org/#validate_by_input to validate your html errors. You will need to add <!DOCTYPE html> as the first line of code so the validator knows it’s html5. (doctype declaration is unnecessary in codepen but required elsewhere).

Start with this and then we can see what other issues need to be addressed.


#6

Thanks so much you are an excellent teacher :slight_smile: I have other questions. Why I can not see the image of my icon? and how I can use the icons of this website? https://darkskyapp.github.io/skycons/ and why doesn´t works my buttons for celsius and fahrenheit?


#7

Note: you don’t need <body> tags on codepen. They are added for you.

I recommend an IP address look-up API to get the location.


#8

You need to add canvas to display icon
<p id = "icon"><canvas id="iconW" width="64" height="64"></canvas></p>

Then you need to include library skykons in JS module (where you include bootstrap.js and jquery.min.js)
https://darkskyapp.github.io/skycons/skycons.js

then instead your code for icon write this
var skycons = new Skycons({"color" : "black"}); var icon = data.currently.icon.toUpperCase().replace(/-/g, "_"); skycons.set("iconW", Skycons[icon]); skycons.play();

you have the same id for different elements
<p id = "fh"></p> <button id = "fh" type="button" class="btn btn-info">Fahrenheit</button>

Change this on
<button id = "fhBtn" type="button" class="btn btn-info">Fahrenheit</button>

And remove you clik function inside getJSON
` $(’#fhBtn’).click(function() {
var cel = data.currently.temperature;
$("#temp").html(Math.round(cel*1.8+32));
});

$(’#cl’).click(function() {
var cel = data.currently.temperature;
$("#temp").html(cel);
});`
it should help


#9

Perfect! Thank you very much sibkedr55 :slight_smile: