Show local weather - open weather API wont run in codepen

1

Hello,

beginner here trying to complete the above challenge. Here is the issue I found.

Open Weather API use HTTP, the following wont work in codepen using HTTPS
$.getJSON(“http://ip-api.com/json”, function(data) {});

My search found suggestions like Weather Underground API - but its api documentation say it is using HTTP only. The other suggestion is darksky.net which I am not quite sure how to use - the java script API points gitHub which seems to require installing the API. I can’t find any example weather app code using either of the API.

I can change my codepen to http for Open Weather API to work but wont this mean when codepen enforces HTTPS in Jun, my code wont work anymore ? Please help.

Thanks!

2

Well, it sounds like you at least have a grasp on what the problem is.

Yes, I think that that means that your http call won’t work in June - I don’t have all the details, but that’s how I’ve read it.

Dark Sky looks easy. It took me less than a minute to sign up and get a key and then the API format was just:

https://api.darksky.net/forecast/[key]/[latitude],[longitude]

Seems pretty straight forward. Just type that in and send the data packet to the console so you can see what you’re getting.

https://darksky.net/dev/docs/forecast

3

Thank you. Dark Sky site has terms & conditions for use, e.g.

  1. key can’t be embedded it in JavaScript source code that you transmit to clients,
  2. no CORS
  3. attribution

How do I conceal the key in my JS code on codepen given the code will be visible (I only have a public codepen account) ?

won’t no CORS means my code in codepen won’t be able to make API call to their server ?

attribution - how do I download their logo to include in the attribution, through the png link visible in ‘view source’ (pardon this stupid Q, I am an absolute beginner) ?

Seems like condition #1 & #2 are natural barriers to use their API for this code challenge. Your thought ?

4

They are indeed. Truth be told, these projects are much, much harder to finish now because services like DarkSky don’t want you to access them from clients. It’s intended that you write server side or compiled application code that makes the request. Try using a CORS proxy, as that can sometimes (depending on how the proxy works) strip the response of the headers that prevent it from working.

https://crossorigin.me/https://api.darksky.net/forecast/[key]/[latitude],[longitude]
5

Thanks. But DarkSky bans the use of crossorigin.me and prohibits disclosure of API key in plain sight. So DarkSky is a no go here then.

6

Hello, I settled on changing my codepen to http in order to use Open Weather API to complete the challenge. Open Weather API has this restriction on calling their API :

“Free and Startup accounts have limitation of capacity and data availability. If you do not get respond from server do not try to repeat your request immediately, but only after 10 min. Also we recommend to store your previous request data.” + “If account exceeds the limits, then a notification about limits exceeding is sent. If it repeats again, then the account is blocked for an hour. Therefore, the lock period is increased by one hour until 4 hours block sets. When blocking repeats the fifth time, then the lock period lasts 24 hours. This rule is cycled. Please be carefull with the number of API calls you complete.”

My question: for this coding challenge, is there a way to store the API result without using a database ?

7

I saw that too, but I think that is for people who are running apps or programs to refresh the weather info constantly, like Ive heard of some refreshing every second. The most action our APIs will ever get are during development and testing… we wont reach anywhere near the limit so its nothing to worry about.

8

Thanks. To play safe, I did mostly stick to the 10 minutes interval in my development/testing. On one occasion though, I hit the run button twice within a 10 minutes interval, and the 2nd query did not get a response from the server (though I did not receive any notification on the limit). To not risk my free account being locked up, I waited more than 10 minutes before continuing with my testing.

Hence the question on “if I can store Open Weather API query result without using a database” in this code challenge. I don’t think it is possible, but hoping some expert coders on here may have magic I can learn from.

9

When I did this challenge back in early May, I resorted to use HTTP in codepen for Open Weather API to work. On May 30, I found my local weather app stopped working as codepen automatically switches HTTP to HTTPS.

I was going to try https://crossorigin.me/http://api.weather but since crossorigin.me sometime does not work, I settled on https://cors-anywhere.herokuapp.com/http://api.weather

That works but then I notice my local weather app is showing weather of Ashburn Virginia and not that of my location like before. I am guessing Ashburn Virginia must be where https://cors-anywhere.herokuapp.com is located. The app now no longer works as intended. To make it usable, it will be necessary to alter the app to accept user input of a location and then fetch weather data for that location.

Is there a workaround that let the app works as before and won’t require swapping out Open Weather API ?

10

I’m having the same frustrations. I was able to get through the last challenge, but with this weather one, I’m just about ready to embed my data simply because I’m not having success finding somewhere to pull in realtime data.

I just gave up on OpenWeatherMap after days of work. I tried a couple proxies, tried testing using Edge (didn’t realize until just now it falls back to HTTPS too)… I tried using another API before; I forget why I switched, but I’ll try another one more time before hacking something together.

It would be nice if FCC could come up with some limited API’s for us to use in our challenges (or CodePen). You know, stuff that works just like the real thing, but is just a bit less “secure”, and not really usable in “real life”…

11

Well, I am happy I found this discussion before really going down the rabbithole of finding out why these APIs don’t work. I’ll be on the lookout for some others out there, and keeping an eye out for this thread for a solution.

12

I’ve settled on wunderground.com. They have a free developer API, and support HTTPS. They don’t appear to support selecting data by coordinates, unfortunately.

I was able to change my code and get up and running with Wunderground in under an hour.

13

Oh, when I say they don’t support selecting by coords, I mean that you must use city/state, so it’ll be an extra step of using a separate API to translate that…

14

yep i also encountered this problem while were trying to build my weather app with vuejs. So i decided to wrote proxy-server that

makes calls to dark sky api behind the scenes

one can find it here
unfortunately this means that one need to develop weather app locally which is supposed to be not easy task for begginers to handle.

15

Hi @dagman

Step 7 (deploy proxy server to Heroku) of your how-to-use instruction in GitHub is a little advanced for my beginner level comprehension. Would you care to add a few more details to this step or point me to where I can read up on how to do that please ?

Thanks!

16

I meant to come back to update this thread about the changes I made to ‘resuscitate’ my weather app after codepen enforced HTTPS. Here goes

  1. For long & lat of current location, I replaced http://ipinfo.io/json with https://ipapi.co/json
  2. Prepend Open Weather API HTTP url with https://cors-anywhere.herokuapp.com, like so - https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/
  3. Change weather condition icon HTTP URL to HTTPS, e.g. https://openweathermap.org/img/w/01d.png

Note : the HTTPS URL of weather condition icons may return 404 from time to time. Open Weather Map customer support’s recommendation is to download the icons once and handle the display locally in front-end code rather than querying the icon URL every time to display the icons.

2 Likes
17

Don’t know if this is a related problem, but I can’t get my JSON call to work in codepen: https://codepen.io/martincarls/pen/objOyE

I tried different weather API’s and use https for both codepen and weather API. When I paste the call directly into browser it works fine, but my getJSON call in codepen doesnt work. I must be missing something but I cant figure out what?

18

Please open up your browser console (ctrl-sft-i, or something similar). This is an incredibly valuable tool. Seriously, it is one of the most important tools you have for coding JS.

I see an error:

pen.js:21 Uncaught TypeError: $(…).getJSON is not a function
at VM116 pen.js:21

Line 21 is:

    $("#data").getJSON(weatherURL, function(json) {

and it should be:

    $.getJSON(weatherURL, function(json) {
19

Haha, too easy. Thanks for the advice, I’ll start using the browser console.

20

Hi. I am having some issues over here.

$(document).ready(function () {
	function getData(){
		var lon;
		var lat;
		var url;
			
    if (navigator.geolocation) {
			  navigator.geolocation.getCurrentPosition(function(position) {
          lon =position.coords.longitude;
          lat = position.coords.latitude;
          url=("https://fcc-weather-api.glitch.me/api/current?lat=" + lat +"&lon=" + lon);
			  });
			}
//Upto this point code works.
			$.ajax({
				url:url,
        dataType:'json',
				success: function(result){

					$("#place").text(result.name);
					$("#country").text(result.sys.country);
					$("#weatherMain").text(result.weather[0].main);
					$("#weatherDescription").text(result.weather[0].description);
					//Resim
					$("#weatherIcon").html("<img src= url(" + weatherIcon + ")>");
					$("#temperature").text(result.main.temp);
					$("#tempMin").text(result.main.temp_min);
					$("#tempMax").text(result.main.temp_max);
					$("#humidity").text(result.main.humidity);
					$("#windSpeed").text(result.wind.speed);
				}
			});
	}
	getData();
})

I can print out url and url goes to true data set but i cant print them to the screen. Has anybody have idea why?

Here is Codepen.io link: Codepen.io Link