Enter a city and find out its current temperature. This was made using the Open Weather Map API (Application Programming Interface) which provided data in the JSON format.
Special thanks to bloggers Omar for helping me get started with this API and Prashanth for helping me make sense of the JSON.
I feel great about getting started with this API. I feel like I have cracked open the door to the wide world of APIs, and I am excited about the future of learning, playing, and exploring even more…
Great that you got started with APIs 😀
Suggestions:
1) When I search for a city again, the new results are appended after the existing results. Ideally, it should replace the old results.
2) Typing in a city is so 2003..Why not get the user’s location automatically? 😛 You can use HTML5 geolocation which is accurate to 5-20 meters but requires a modern browser and permission from the user. Or you can use an IP address API like http://www.telize.com/ whose accuracy depends on the users’s ISP and network configuration but works in all browsers without permissions. I used HTML5 geolocation, because the results I was getting from another IP API were too inaccurate. I didn’t know about Tellize’s API then, but it seems pretty accurate.
If you’re going to use the IP API, you could still keep your city name input as a fallback, in case the user is behind a proxy/vpn.
3) Not everyone uses Fahrenheit haha. You could make a button that toggles between Celsius and Fahrenheit. Better yet, once you have geolocation working, you could automatically set the default units according to the user’s country code. From my experience, only 6 countries use Fahrenheit officially, so you can display F for those countries, C to everyone else.
These ideas mostly came from http://www.freecodecamp.com/challenges/zipline-show-the-local-weather
My demo is here http://codepen.io/prashcr/full/oXzZaG/
LikeLike
Thanks for API address idea, I never knew about that.
I guess you can tell I’m from the US because of the Fahrenheit ha
I like how your code changes images based on the weather conditions, that’s a nice touch!
LikeLike