Find the accurate weather data for any city in the world, view current weather conditions, and have a peek at the forecast for the next three days. The project is a part of The Odin Project's curriculum. The Odin Project provides a high quality web development education maintained by an open source community.
- Current Weather and Forecast: Find the accurate weather data for any city in the world, view current weather conditions, and have a peek at the forecast for the next three days.
- Responsive Design: The app provides a consistent user experience and a user-friendly interface across various screen sizes.
To Do:
- Save Favorite Locations
- Add Imperial Units
The project is built with:
- HTML
- Vanilla JavaScript
- Vanilla CSS
Tools
- Visual Studio Code
- Git
- Webpack
This section mentions the main topics covered during project work and prior lessons
- Asynchronous code
- Callbacks
- Promises
- Async/Await
- APIs
- JSON
- Transpiling / Babel
Working with APIs is great fun, and I look forward to exploring and using more APIs in my projects. In this project, I have used the Weather API and AccuWeather API. I started project using the Weather API alone, but I didn't like the provided icons and the limited forecast data in the free tier, which covers only the next two days. Consequently, I switched to the AccuWeather API. This change brought another tradeoff - the number of API calls allowed per free API key is only 50 per day. Although, for the case of this project, that is sufficient. I like the look of the provided icons, but the resolution is kind of poor. Free packages of these APIs are adequate for projects like this one, but in real apps, paid packages become necessary.
In the past few lessons at The Odin Project, we have covered the transformation from callbacks to promises and async/await. I am happy that we can now avoid trapping ourselves in callback hells and write cleaner and more readable asynchronous code.
Stickers and Icons
- Icon used for the favicon image is one of the Weather icons created by Freepik - Flaticon.
- Stickers used in the header are Cloudy stickers created by bukeicon - Flaticon.
Background Images
- Photo by Daniele Colucci on Unsplash.
- Photo by Matthieu Joannon on Unsplash.
APIs