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.


Draggable JS – a lightweight, responsive, modern d... Accessible Drag & drop accessibility is a delicate flower. While browsers continue to work on a reliable native solution, Draggable lends a ...
Blender’s Prehistory – Traces on Commodore Amiga (... Blender’s prehistory - Traces on Commodore Amiga (1987-1991) byPiotr Zgodziński, March 19th, 2018 The following article is a historical look at ...
AOP Libraries Javascript Which Javascript AOP library do you use, and what are its key features ? Here is what I found until now : dotvoid 's implementation, c...
码云周刊 | Web 开发时代,盘点 5 个前端 UI 优秀框架... 码云项目推荐 随着 Web 技术的不断发展,前端开发框架层出不穷,各有千秋,今天小编为大家奉上前端 UI 框架的开源项目,希望大家能够喜欢!如果大家有 UI 框架相关的开源项目,也可以托管到码云上,我们会及时给予推荐。最后,如果你很喜欢以下提到的项目,别忘了分享给其他人哦! 1、...
详解动态规划最少硬币找零问题–JavaScript实现... 硬币找零问题是动态规划的一个经典问题,其中最少硬币找零是一个变种,本篇将参照上一篇01背包问题的解题思路,来详细讲解一下最少硬币找零问题。如果你需要查看上一篇,可以点击下面链接: 详解动态规划01背包问题--JavaScript实现 下面让我们开始吧。 问题 给定4种面额的硬币...
Medium责编内容来自:Medium (源链) | 更多关于

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

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

使用声明 | 英豪名录