I’ve completed my Local Weather App challenge and would love to get feedback from my fellow campers! One note is that the GIF dynamically changes based on the current weather condition. However, due to the large number of possible conditions I’ve implemented this as a very broad range. For example, there’s only one GIF that maps to all of the 2XX condition id’s.
Thanks in advance for your suggestions.
It works here 
I noticed that it takes some time to convert from Fahrenheit to Celsius. Are you making a new API call over there?
Yes, I am making a new API call to convert between temperature units. I haven’t noticed the lag to be bad, but let me know if it’s too long.
Thanks for the feedback.
Doesn’t work in Chrome 53.
In Firefox works, but delay between API calls is noticeable. The test.png image is delaying the request sometimes even 3 seconds (looks like from giphy.com, but I’m not familiar with Firefox dev tools, so I’m not sure).
Thanks jenovs. I’ll test in Chrome to see if I can find out what’s going on. I may also convert the temperature unit conversion in the client to eliminate an API call.
The issue with Chrome is that Google no longer supports sites designated as being an “insecure origin”. I’ve only skimmed the documentation (see https://goo.gl/Y0ZkNV), but it seems that the root cause is because OpenWeatherMaps is accessed via HTTP rather than HTTPS. I need to look deeper to see if there’s a solution.
Thanks for catching this @jenovs. The lesson for me is to test on multiple browsers in the future.
If I don’t share my location when the browser asks, nothing happens. This is a problem with the project specifications rather than your code.
One way to avoid this is to get the location via the users IP address.
Also, on a full screen, the content is over to the left of the webpage. I would prefer it if you used the space.
Actually, when I reduce the size of the browser webpage, it expands to fill what’s there.
It takes ~2-5 seconds to convert for me. I don’t know if that’s considered too long.
This very problem is actually good practice for error handling.
I used error handling to fall back onto ip address in my weather app.
theres plenty of tutorials around. Check out w3c school geolocation and MDN geolocation.
Mark
Very true @MARKJ78! This has been a very instructive exercise. I’m looking at adding error detection and recovery as you describe above. The other interesting thing I’m becoming aware of is that making an API call for the weather and pulling the GIF from Giphy is adding a bit of latency. If it weren’t for the copyrights I’d add the GIF’s as server-side assets to eliminate the overhead.
Thanks to all who provided feedback. This has been very helpful and I’ve made a number of changes to improve the resiliency of this application. It now falls back to wifi-based location detection if there’s no support for geolocation. I also added more error detection code.
All in all I learned quite a bit! Great exercise.
I mentioned that you are only using a third of the page space. At least center the content.
It then fills the page if I reduce the browsers width. Responsive design!
I’ll think about this @JohnnyBizzel. This was a design choice and it renders fine on my phone. The same is true for Offsetting the gif from the left and having its shadow bleed off the right side of the panel. Ultimately, I’d like to increase the width of the gif and have it extend a bit more off the right, as well as filling the right hand pane with a location map.
With bootstrap you should be able to achieve layouts for each device screen size easily.
