Logo
Project

Weather Forecast App

Getting weather forecast information should be easy and straightforward, but sometimes that’s not the case with some user interfaces. In this app, users can get the gist of today’s and next week’s weather at a glance. I believe it meets most users' needs.

In this project, I utilised the OpenWeatherMap API to retrieve the latest weather data and the Google Maps API to access geographic data. London is set as the default city, but users can change this to any city they prefer by clicking the edit button and entering their chosen location. The app will display the most recently selected city when reopened.

Used technologies:

  • HTML
  • CSS
  • JavaScript
  • Git

Used resource:

  • GoogleMap
  • OpenWeatherMap
  • Npm packages

Purpose and Goal

The purpose of this project was to use third-party APIs to build a useful web application. I combined the capabilities of the two APIs to enhance the user experience. My goal was to gain a better understanding of how to utilise third-party APIs effectively.

Challenges and My Approach

To use the functionality of the APIs, I applied for my own API keys and included them in the code. Determining where to place these API keys and how to do so securely was a new topic for me. It also required a method to display third-party data in the app after fetching it through the APIs.

What I’ve learnt

This project helped to solidify my knowledge of utilising third-party APIs, including how to fetch data from them and how to display that data in my app. To secure my OpenWeatherMap API key, I placed it on the server so that no one else has access to it.