Local Weather App - Dark Sky API & HTTPS Request / Feedback

I just Build my Local Weather App. It was funny. During the process I still reinforcing my knowledge on AJAX calls specially with JSOn format. Please let me know what you think & if there is something that could improve this project. Regards to everyone ! :slight_smile:

My project: https://codepen.io/techednelson/full/XRwgRB/

@techednelson

Great job! I like how you used case for obtaining the pictures. Out of curiosity, why did you offset the location with variable x and y?

I love how you created the links on the bottom!

Some tips:

  1. I saw nothing when I waited for almost 5 seconds. It would be wise to put a placeholder in HTML for someone like me to see that it is in process of getting geolocation OR waiting for JSON to be returned. This now brings up another issue…

  2. What if getJSON fails? What if geolocation fails? There is no error handling in this case. That is one of the most important skill to develop when you work on these AJAX requests. At this point, you did great. One visual gaff is that I can see the line moves when I change the temp. Perhaps set a fixed width for that part?

However, I think you did a great job, so pat yourself on back! I am duly impressed.

1 Like

Thanks dr.shreeman for your feedback. I took into account everyone of your tips so I made changes. Maybe you would like to check it again & tell me what you think.

Regarding your curiosity of x & y, it was just to avoid making the API key too much visible.

Kind regards!

@techednelson,

It looks fabulous! I look forward seeing your next projects!

1 Like

dr.shreeman,

Thanks a lot for your positive comments, if you have projects, I would be glad to comment.

Kind Regards,

@techednelson

Certainly! I am currently working on my personal profile/portfolio. https://pkshreeman.github.io/Experimental/

Right now, my objective is to fix the buttons so that it both collapse/expand and link to the elements. Right now it just collapses/expands the elements, but doesn’t move it into view.

Hello dr.shreeman,

I saw your portfolio, I liked the timeline, I think it’s a great idea, regarding what you would like to do with the buttons, I am not sure if I understood correct what you want to accomplish, but maybe a Lightbox could help you out. it is mainly for photo albums, but maybe this could give you portfolio a nice taste.

http://lokeshdhakar.com/projects/lightbox2/

Let mw know if this can help you.

Regards,

@techednelson

Hey, @techednelson!

Thanks for the recommendation. It looks like a really nice modal upgrade! I fixed the button issue. As you looked at the portfolio, was it obvious that you could click on the buttons to open and close sections, and that there were some closed sections that you have not seen?

For now, I am moving my focus on react projects. Not sure what I need to do next to get a job…

Hi, I can’t seem to get past the https issue. none of the code here are loading on my laptop… Does anyone has this issue? I am now beginning to see why my random quote API didn’t work either…

Help please.

Thanks,
Jasmine

Hello Jasmine,

do you have any Pen project opened with the project so I can see what you have coded in order to find a possible error in context?

Regards,

Hi Nelson,
I haven’t even started. I was looking at the challenge and trying out this example code from FCC http://codepen.io/FreeCodeCamp/full/bELRjV and it doesn’t show anything.

This is when I suspected something wasn’t right. And with hindsight, this could be the reason why my call to API is not working, hence i hard coded the quotes in the end.

I read something about Https and http and my browser keeps changing the browser setting to https even after i have removed the ‘s’.

Jasmine

Hi again,

Now I understand, this is a normal behaviour the explanation is in the Weather App challenge Requirements.

Note: Many internet browsers now require an HTTP Secure (https://) connection to obtain a user’s locale via HTML5 Geolocation. For this reason, you will need to choose one of two paths to complete this project:

Use HTML5 Geolocation to get user location and then use the Dark Sky API which uses an HTTP Secure connection for the weather. Also, be sure to connect to CodePen.io via https://.

Or:

Use an Internet Protocol API to get user location (ex. IP-API) and then use the OpenWeatherMap API for the weather. Be sure to connect to CodePen.io via http://.

Either weather API service will require creating a free API key. Normally you want to avoid exposing API keys on CodePen, but we haven’t been able to find a keyless API for weather.

Conclusion:

You need to sign up for a free API key, I personally recommend you Dark Sky API, because it works with HTTPS and nowadays, code pen works only with HTTPS. Besides you can call the API 1000 times a day for free, more than enough to complete the challenge. You can find all the information how to use this API in the following link https://darksky.net/dev/docs

You can see my Pen working with this API https://codepen.io/techednelson/full/XRwgRB/, you can check some helpful links I leave in the menu bar. I hope this can help you to keep on. If you need any help please do not hesitate to assist from camper to camper.

Happy coding!

Nelson

1 Like

I signed up for an API key with Dark Sky and I’m using https:// but I’ve run into this error when I try to $.getJSON

“XMLHttpRequest cannot load https://api.darksky.net/forecast/*Edit(hiddenApiKey)/37.5429695,-77.46996159999999. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://s.codepen.io’ is therefore not allowed access.”

Did you run into that issue as well? I haven’t looked at your codepen yet because I didn’t want it to be a spoiler since you’ve already completed the project.

-Todd

Hello Todd,

Yeah I had the same issue but you can solve it adding https://crossorigin.me/ before the API HTTPS request. The reason of this, it is because you are trying to get access to the API from a website you does not own.(codePen), you can read further about it in the following link https://crossorigin.me/ .

By the way you can access to my Weather App project from next link as a full page, so you will not see the code.

Happy Coding Tod!

1 Like

Sorry I typed wrong your name

Regards Tod

1 Like

Thank you so much for the help Nelson! Now it makes so much more sense to me now. You project looks great! Will give me a great goal to strive for :smile:
-Todd

Your’re welcome Tod. At the end of the day the important thing is too learn how to perform API calls & manipulate the DOM with the response. The design of HTML & CSS is up to you. You can work with libraries like Bootstrap to focus on js.

Regards,