This Web App fetches the current weather data for a city specified by the user. A background image of the corresponding city is also fetched and placed behind the weather data.
The app makes calls to two separate REST APIs, the first of which is the OpenWeatherMaps Current Weather Data API. This is used to get the current weather information for the specified city, as well as an icon corresponding to those weather conditions.
The second API used in this app is Flickr's flickr.photos.search API. This is used to fetch a background image corresponding to the name of the city entered by the user. The large range of arguments supported by this API allowed me to filter out indoor photos and sort them by relevance. These arguments were the reason I chose it over something like Google's Place Photos API, which was my initial choice because I have worked with their APIs in the past.
- Download or clone the repository
- Navigate to the repository folder in terminal
- Make sure NodeJS is installed, available here
- Install node modules by entering
npm installin the terminal - Install bootstrap by entering
npm i -s bootstrapin the terminal - Install axios by entering
npm install axiosin the terminal - Launch the project by entering
npm startin the terminal
This is the home page. The user is prompted to enter the name of their chosen city.
After the user enters 'Auckland' and presses enter, the current weather information for Auckland is shown over a background of Auckland City.
Entering 'Amsterdam' and pressing enter will update the weather information to that of Amsterdam, and the background image will switch to a photo of Amsterdam with a fade transition.
If a city corresponding to the user's input cannot be found, an error message is shown and the background image is removed.
