Case Study: React Weather App

Built with HTML, CSS, and OpenWeather API

Vanilla Weather App

Using Vanilla Javascript, I built this weather app fully-functioning weather app, gaining skills in Bootstrap, API’s, real-life development workflow, hosting, and advanced JavaScript. My end goal of this project was to create a fully functional worldwide weather checker that allows users to search a city and see the weather in real-time as well as the upcoming 5-day forecast.

I divided this project in two phases. The first phase was creating the weather search by integrating the API and returning the real-time, current weather of a chosen city, displaying the weather description, humidity, and wind speed. The main challenge of this phase was deconstructing the application into functions and understanding the possibilities of my chosen API, OpenWeatherMap.

The second phase was dedicated to creating the 5-day forecast by building the layout, styling the feature, and using a more complex API integration to include the data of the 5-day forecast. The first challenge of this section was deciding where to call the One Call API because this could only be done once the coordinates of the city were established, so I had to find the right place to get the forecast results, only after the first API call. The second challenge was building the string to inject within the html for each day of the forecast prediction. In order to do this, I had to concatenate a larger string and then add each day, one at a time for the forecast.

I am happy with the appearance and functionaly of the application, however I would improve it by adding in a temperature conversion, so that the user can choose whether they'd like to see the weather in ºC or ºF.