Using Vanilla JavaScript to connect to Weather Underground API

综合技术 Medium

Create a Simple Weather Application with Vanilla JavaScript

When I initially went through the coding bootcamp at The Iron Yard, Durham, I would always hear about these fun projects to work on and try out, but never had time to tackle. However, it’s amazing how much free time you have when you are unemployed, and I’ve taken some of that extra time to do some of the fun projects I never had time for before. This one is a simple weather application. To see what the finished site might look like, here’s what I did:

In a recent post, I talked about how to refine user input to create a better user experience, but I won’t cover that here. Most weather apps are going to be basically the same = Current Weather, Temperature, Forecast, Location. That’s basically it. And how the information is retrieved and what information you have access to is completely dependent on which API you use. And for weather, there are a crap-ton of API’s to choose from.

I ended up using the API from the Weather Underground, mainly because it had fantastic documentation, was easy to use, and had some cool features, like webcams. The drawback to the Weather Underground API for me though, was that it’s live Radar wasn’t that easy to use. They do provide a map, but the map wasn’t very detailed. The other big drawback, is that the icons they provide for weather conditions were fairly grainy and pixelated. Other than those few minor things, I thought it was pretty great.

Because of the unappealing icons available, I ended up not using them very much. Instead, I created a database in Node, using MongoDB, where I stored high resolution images of different weather conditions. Then, for my 3 day forecast detail, I loop through the weather description for that day and look for conditions like “cloudy”, “sunny” or “windy”. Then, I loop through my high res images, which I have tagged according to temperature, time of day and weather condition. Once a match is found, I push it into an array and then pick a random image to use for the background of that forecast day, that matches the time (day or night) the weather condition and the temperature. That was the most time consuming part of the project, and I’ll admit, was completely unnecessary, but it does make the site more visually appealing than a bah-humbug type of weather app.

If you have any questions, feel free to reach out to me. If you’re looking to do your own, I’d say the total time was about 12 hours or less, but that includes all the extra database and image mining. My only other recommendation would be to thoroughly examine the APIs of each weather app before you start, so you can be sure the one you’re using provides the data you want. Some of the APIs are quite limited, and others are incredible.

Medium稿源:Medium (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 综合技术 » Using Vanilla JavaScript to connect to Weather Underground API

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录