How do you get the weather? You could use an app or create your own. First, you need a way to get weather data. You can use an Application Programming Interface to get the data that you need.

Where can you find APIs to use in your projects? Try ProgrammableWeb. It is an API directory that lets you find the right API for your project. I found a weather API called Open Weather. Open Weather allows you to get the current weather data, hourly or daily forecast and more.

With Open Weather, 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 was right for riding a bike.

Getting Started

Before writing any code, I looked at Open Weather’s documentation. It explains how to use their API. They include examples using different programming languages like JavaScript. These examples are helpful were helpful to learn what I could do with the API.

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.

Building the App

Before building the app, I researched other weather apps to get an idea of what I wanted mine to look like. Then, I sketched out an idea on paper.

I chose to use HTML, CSS and JavaScript. Since I am familiar with Bootstrap, I used it as well. I built my prototype with Bootstrap’s starter template. Then, I wrote my own JavaScript file to fetch data from Open Weather using Weather.js.

Open Weather has weather icons. Weather.js doesn’t use those icons. I looked at the JavaScript and wrote code to get the icons.

Weather.Current.prototype.icon = function () {
  return this.data.list[0].weather[0].icon;
}

Now, my app shows the current and forecast temperatures, weather icon and conditions.

What to do differently

Open Weather returns weather information for a specific location. Instead of hardcoding the location, I would use the location of the browser. Right now, I used Bootstrap for the UI. I would use a different tool for handling layout like FlexBox or CSS Grid.