Weather forecast Dashboard

Table of contents

• About the project
  • User Story
  • Screenshot
  • Links
• My process
  • Built with
  • Useful resources
• Author
• License
• Contributing

About the project

This app is a Weather Dashboard with search by city input, that uses the OpenWeather API to retrieve current weather and 5-day forecast data, and uses localStorage to store persistent data.

Functionality:

• When a user searches for a city they are presented with current and future conditions for that city and that city is added to the search history bar.
• If the city is not found, show an alert message to the user.
• When a user views the current weather conditions for that city they are presented with:
  • The city name and the date
  • An icon representation and background image of weather conditions
  • The temperature and Feels like
  • The humidity
  • The wind speed
• When a user views future weather conditions for that city they are presented with a 5-day forecast that displays:
  • The date
  • An icon representation of weather conditions
  • The min and max temperatures
  • The wind speed
  • The humidity
• When a user clicks on a city in the search history bar they are again presented with current and future conditions for that city

User Story

AS A traveler,
I WANT to see the weather outlook for multiple cities,
SO THAT I can plan a trip accordingly.

Screenshot

The following image shows the web application's appearance and functionality:

Links

• Repository URL: https://github.com/berta-rf/forecast-dashboard
• Live Site URL: https://berta-rf.github.io/forecast-dashboard

My process

Built with

• OpenWeather API
• jQuery
• Luxon
• JavaScript
• HTML
• CSS
• Bootstrap

Useful resources

• How to Handle Unsuccessful Fetch API Calls in JavaScript
• MDN docs on statements throw & catch
• Luxon API docs
• Article on localStorage
• OpenWeather API docs
• Unsplash (weather conditions images)

Author

• Berta Romano Fernandez bertaromanofernandez@gmail.com
• GitHub berta-rf
• LinkedIn Berta Romano Fernandez
• Frontend Mentor @berta-rf

License

Distributed under the MIT license. See LICENSE for more information.

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request