Updated on January 31, 2025
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.
Why update?
The version of Bootstrap was old. I wanted to add a feature to get the visitor’s location and display where they are from. It would get the weather forecast for their location. Instead of getting the weather for Milwaukee, WI.
Changes to Bootstrap
The previous version had a feature called Jumbotron. Bootstrap 5 has dropped this component. You can use Bootstrap’s utilities to recreate the look. The layout is a bit different from the original.
To display the forecast, I used Bootstrap cards. Then, I used FlexBox to make the cards the same height. Bootstrap has a helper to create a sticky footer.
Reverse Geocoding
One option to get your local weather is to use the City and State. In the first version, I hardcoded it. Open Weather has another API for getting your browser’s location. You can do a reverse geocode lookup. HTML has a utility for getting the users location.
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
const longitude = position.coords.longitude;
const latitude = position.coords.latitude;
const geoURL = "http://api.openweathermap.org/geo/1.0/reverse?lat=" + latitude + "&lon=" + longitude + "&limit=1&appid=" + Weather.APIKEY;
fetch(geoURL)
.then(response => response.json())
.then(data => {
let cityName = data.map(a => a.name);
let state = data.map(a => a.state);
document.getElementById("location").innerHTML = cityName + ", " + state;
console.log(data);
})
.catch(error => {
console.error('Error fetching data:', error);
document.getElementById("location").innerHTML = "Milwaukee, Wisconsin";
});
})
} else {
document.getElementById("location").innerHTML = "Milwaukee, Wisconsin";
}
}
By getting the location and doing a reverse lookup, I was able to modify the code. It now gets the forecast based on the user’s location. In web development, updating the code to a new version helps you to develop better solutions. Sometimes updating the CSS framework helps you to build a better user experience.
