Weather App Dashboard
By Melanie E Magdalena Tagged: api, design, challenge 3 min read
For UpLabs weather app challenge, I designed a dashboard with simpleWeather.js that told the week's forecast.
The challenge: make a weather app dashboard. My goal: make a weather app dashboard that actually tells me the weather.
Update (2019-01-07): It would appear that the original Codepen no longer works due to Yahoo! retiring their API. I'm leaving this post up since you can still see how the dashboard code was written.
For the past several months, I’ve been learning the ins and outs of how to build relational records in Airtable and extract the data with a custom plugin for a messaging system. Based on criteria that matches in a message, the plugin finds the related data in Airtable and shows it to you in a streamlined format.
Using this knowledge, I started the UpLabs weather app dashboard challenge with the desire to have real data feeding into my design. In my opinion, drawing something pretty is not the hard part. I wanted this mini web app to be clean, crisp, materialized, and tell me the real-time weather for wherever I happen to be. Also, I wouldn’t need to start from scratch in Airtable since weather feeds are fairly common. I just had to find one I could use.
I jumped right in to researching the best option for real-time weather data. I landed on Yahoo! Weather since it seemed pretty straight forward and, just in case my design went viral or something, it wouldn’t hit a rate limit cap rendering the whole thing useless. Continuing down this rabbit hole of about 50 tabs I now had open, I found simpleWeather.js by James Fleeting. It looked like he’d already done most of the heavy lifting with his jQuery-driven library and the challenge had a rapidly approaching deadline. I found the CDN (and all the dependencies) and got to work mapping out the data I wanted in the app.
Reminder: simpleWeather.js was retired on 2019-01-04 after weather.yahooapis.com and query.yahooapis.com for Yahoo Weather API were retired. [source]
A couple hours later the weather app now had a default location, the current temperature (I prefer metric, so in Celsius), the weather code described as text (i.e. “cloudy”), wind direction and speed, the time for sunrise and sunset, and a 10 day forecast for high and low. My primary objective was complete: data!
Secondary data objective: use my location. I’m in Albuquerque, NM, but if I go off somewhere I’d like to still use my app. Using browser checking for geolocation, there’s an option to allow your browser to use your current location. The app then updates based on the approximate latitude and longitude of the IP Address to the closest feed.
Now I needed icons. Ideally the icons would update auto-magically based on the temperature and weather code. Yahoo! Weather has a specific set of codes used to determine if it is sunny, cloudy, raining, etc. Several tabs later (and increasingly sluggish Chrome), I stumbled into Weather Icons by Erik Flowers. Not only are these icons gorgeous, but they came with weather code mapping for Yahoo! Weather. Victory!
.lowerCase() fixed the problem and now the compass arrow will always point in the right direction. Victory once more!
You’ll notice the live version has a 5-day forecast though I mentioned it had 10 when I began. For me, the weather 10 days from now is pointless. Weather is variable and changes frequently. I opted to hide everything beyond 5 days for simplicity and better accuracy.
The final “design” touches were flexbox, Material Palette colors, good ol’ Lato with Material Icon support, and responsiveness.
Until the next experiment, I hope this post-build brain dump was mildly entertaining and/or educational if you decide to build a weather app.
Thanks for reading! If this helped or you learned something, Buy Me A Coffee.