Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/haminimi/weather-app

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.
https://github.com/haminimi/weather-app

api async-await asynchronous asynchronous-programming javascript promises theodinproject weather weather-app webpack

Last synced: about 1 month ago
JSON representation

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.

Awesome Lists containing this project

README 

        
# Weather App ⛅

![Screenshot of the Weather App.](/screenshot.png)

## Description

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](https://www.theodinproject.com/lessons/node-path-javascript-weather-app) is a part of [The Odin Project](https://www.theodinproject.com/dashboard)'s curriculum. The Odin Project provides a high quality web development education maintained by an open source community.

## [Live Preview](https://haminimi.github.io/weather-app/)

## Main Features

- **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**

## Tech

**The project is built with:**

- HTML

- Vanilla JavaScript

- Vanilla CSS



**Tools**

- Visual Studio Code

- Git

- Webpack

## Covered Topics

**This section mentions the main topics covered during project work and prior lessons**

- Asynchronous code

- Callbacks 

- Promises

- Async/Await

- APIs

- JSON

- Transpiling / Babel

## Reflection

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](https://www.weatherapi.com/) and [AccuWeather API](https://developer.accuweather.com/). 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](https://www.theodinproject.com/dashboard), 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.

## Credits

**Stickers and Icons**

- Icon used for the favicon image is one of the [Weather icons created by Freepik - Flaticon](https://www.flaticon.com/free-icons/weather).

- Stickers used in the header are [Cloudy stickers created by bukeicon - Flaticon](https://www.flaticon.com/free-stickers/cloudy).



**Background Images**

- Photo by [Daniele Colucci](https://unsplash.com/@daniele71043?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) on [Unsplash](https://unsplash.com/photos/green-grass-field-under-blue-sky-during-daytime-dSBsCzzlqTU?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash).

- Photo by [Matthieu Joannon](https://unsplash.com/@matt_j?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) on [Unsplash](https://unsplash.com/photos/photography-of-stars-sgIfSl30YbE?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash). 



**APIs**

- [Weather API](https://www.weatherapi.com/)

- [AccuWeather API](https://developer.accuweather.com/)

## Happy coding!