AngularJS Weather App Using OpenWeatherMap API

Github Repo


  • Have the functionality that is similar to the example given by FreeCodeCamp. (Example:
  • Be able to view the weather for your current location.
  • You can toggle the weather temperatures to view them in Fahrenheit or Celsius. 
  • The icon and/or the background for the app changes depending on the weather.

This weather app was created to complete the requirements for the FreeCodeCamp Front-End Development Certificate. The weather app uses the OpenWeatherMap API to retrieve a JSON request for the user’s location and weather conditions. It also uses AngularJS 1.5.8 for the front-end of the app, Bootstrap 3 for the styling, the Weather Icons theme and CSS to display the current weather, and the imported Google Font called Abel.


This project was challenging since this is my first AngularJS app that I’ve made without following a tutorial. I had just finished the Udemy class Learn and Understand AngularJS and had some trouble creating the weather app using their methods since it was using a different version of AngularJS as well as a deprecated version of the OpenWeatherMap API. While researching how to complete the weather app in AngularJS I came across the YouTube tutorial by CodingTutorials360 that went over how to complete the tutorial using a more recent version of AngularJS. I did make some more progress after viewing the tutorial on YouTube, but I still ran into the API not connecting correctly. After some researching and reading of the AngularJS documentation, I was able to get the HTTP request to retrieve the JSON result from OpenWeatherMap. I then used a combination of what I learned from both tutorials to complete the application. I then used a combination of what I learned from both tutorials and the layout and styling cues cues from the blog post by William Ghelfi to successfully complete the front-end design and functionality of the app.

Initial Sketches

After working through the weather app section of my Udemy class, I sketched out some ideas for what I wanted to have my weather app look like.



I then took these ideas and created two mockups in Balsmiq so I could have a better idea of what the app would look like once it was finished.


Let the Coding Begin!

After making these, I set up my laptop workspace and got to started.


Final Thoughts

Overall, it took me about a week to complete the app from start to finish. As I mentioned before, this project was very challenging. I had to figure out how to get things working correctly once I had exhausted the directions from both tutorials. I also needed to figure out how to get the app working with a newer version of AngularJS and the OpenWeatherMap API since both tutorials were using older versions of both. I’m very happy with how the app ended up and will make sure it is maintained so it continues to work correctly.