Description • Data • Icons • Gradients • Acknowledgments
A project built with React to implement a simple weather app. The app displays the high and low temperatures for five days, the current weather condition, the time, a dynamic weather icon and a gradient background.
To obtain the data, an API call is made. Then, the data is broken down into five dictionaries for five days. Each dictionary contains the forecast for that day in intervals of 3 hours. There are other interesting features of the data that were not used.
To present the forecast to the visitor, an icon is displayed for each 3 hour interval. Not only does the icon change but its description is updated. Also, icons for day and night exist based on the same conditions. This was possible by manipulating the state of the components and timing the changes correctly.
To further improve the experience of the visitor, gradient colors are added to the backgrounds of each day. The gradients slowly change the color from night to day. The gradient is also subject to the 3 hour intervals.
- Special thanks to web developer Ichwan Palongengi - ipalongengi for his time and advice.
- Data is provided by OpenWeatherMap(https://openweathermap.org/).
- Those amazing icons come from WeatherIcons(https://erikflowers.github.io/weather-icons/).
- Gradients were created by Peter Bork(https://codepen.io/bork/).