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: https://ethans-cute-weather-app.herokuapp.com/
If you happen to click on the link, you will need to search for a location to view weather. Since I’m using a developer package for the API, I’m limited in the number of API calls I can make each day. So if you don’t see weather, it’s because the daily limit has been exceeded.
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. Another small annoyance is that the API only allows 10 API calls per minute, and 500 API calls per day. If you exceed either, you will be disabled for the remainder of the day. This is one of those things that you really have to weigh your options when creating a weather app. If you are going to go the free route, and want an API with lots of features, you’ll often be similarly limited in the number of API calls you can make. Your other alternatives are to go with a paid plan on the API, or to go with an API that isn’t as feature-rich, and doesn’t limit your API calls for the free version. 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.
