Bike Weather

Open Weather API allows you to get the current weather data, hourly or daily forecast and more. With this API, I created a simple weather app. It gets the current temperature, daily forecast (highs and lows) and weather conditions. Then, it tells you if the weather is perfect for riding a bike.

The Process

I sketched out the design for the app using a paper prototype.

Bike Weather Sketch — Prototype of Bike Weather

I started to build the app using the design. As I developed it, I made some changes from the original design to make it more responsive.

Open Weather provides documentation about using their API. It include examples using different programming languages like JavaScript. On their examples' page, I found Weather.js. Weather.js fetches data from Open Weather for you. It makes it easy to get weather information from Open Weather. Open Weather has weather icons. Weather.js doesn't use those icons. I looked at the JavaScript and modified the code to get the icons.

Bike Weather Original — First Version of Bike Weather

In the second version of Bike Weather, I decided to add the location of the user. To get the location of the user, I used Navigator Geolocation property and Reverse Geocoding from Open Weather.

The following skills and technologies I used to build this site:

HTML and CSS
UI/UX
Bootstrap
FlexBox
JavaScript
Open Weather API
Open Weather Reverse Geocoding Lookup

The Result

A simple web app that displays the weather forecast.

Website: Bike Weather