As part of a side-project I’m working on, I’ve been trying to build an informative weather widget that gives current and forecasted stats for the next few hours.

I’m using the card component from Bootstrap to structure the widget. The card component is excellent for this, as it allows me to structure the widget but will enable it to have different styles for different websites. I’m surprised by just how much I’ve been using the card component, as it’s quite versatile.

Dark Sky provides all the weather stats that I need. I have a background worker that fetches the stats from the Dark Sky API and saves it to the database. I can then query the database for the stats as well as cache the widget for a short period.

The Dark Sky API is excellent as the forecast request gives you minute by minute forecasted weather for the hour, as well as hourly and daily forecasts for the next seven days.

The Dark Sky API also includes descriptions for icons that you can use. These standard descriptions can then be used to map to whatever icon you want. I’m using Font Awesome for my weather widget’s icons. I have a helper method in my application that maps the icon description from the Dark Sky API to the correct Font Awesome icon.

So far I’m pretty happy with the results.