Open Weather Map widget

So to continue with the whole RESTful API theme. I’ve been working on creating a weather app with the next 5 days worth of forecast info.  I’m using because they have a very nice API with a lot of info, and of course more importantly its free.

The main functionality is more or less done, but I definitely need to style it properly…or maybe I won’t and just call it “minimalist”. If you want it to work on your end you need to “Allow Location” so that it can get your current lat and long based on your IP.

EDIT: So initially I resolved to use the API but after closer investigation of the JSON response that you get from the free 5 day forecast I saw a huge problem.

  1. There 5 day forecast sends the weather for the next 5 days in 3 hour increments.
  2. Although you can get the current temperature from this response the Max and Min temps of the day don’t come through. You only get the max and min temps for the 3 hour increment.
  3. Even though each day is split into 8 3-hr increments there is an issue with the increments of the current day. The increments that have gone are removed from the JSON array, so the number of index positions held by the current day changes as the day goes by, so the current day can have from 1 to 8 indexes of data.
  4. With the above problem with the inability to determine the end point of the current day in the JSON array it becomes difficult to determine the start and end of the subsequent days.
  5. It might be possible to determine proper max mins for the day and find the proper range of indexes for the days using a search and locate index function, but that seems like trying to kill a mosquito with a cannon.
  6. Having encountered these nonsensical problems, I’ve just resolved to use another different API which has the info more readily available in the response. BTW, the paid 10 day forecast from has the info in a more friendly, but I’m not gonna shell out any number of bucks for a simple portfolio piece.
  7. The has a much better set of icons as well I think, although ultimately I will replace the icons with better vector sets as I style it more.

Here’s a link to the CodePen: