/weather-dashboard

An app that allows users to see the weather forecast for 5 cities of their choice.

Primary LanguageJavaScriptMIT LicenseMIT

Weather Dashboard App

The Weather Dashboard App is a web-based weather forecast application that allows users to retrieve current and future weather information for multiple cities. Users can plan their trips and outdoor activities by checking the weather conditions for different locations. This application uses the OpenWeatherMap API to fetch weather data and displays it in a user-friendly interface.

Features of the App

  • Users can search for a city to view the current weather conditions and a 5-day forecast.
  • The application displays the city name, date, weather icon, temperature, humidity, and wind speed for the current weather.
  • The 5-day forecast includes the date, weather icon, temperature, and humidity for each day.
  • Search history is saved, allowing users to quickly access weather information for previously searched cities.
  • The application uses localStorage to persist search history data even after refreshing the page.

Resources and Tools

HTML and CSS to define the structure and style, while JavaScript and jQuery provide the app's functionality, and moment.js helps manage date and time-related operations.

  • VScode
  • GitHub
  • Google Search
  • Bootstrap for CSS
  • jQuery
  • moment.js
  • OpenWeatherMap API

Usabilty

  1. On the Weather Dashboard homepage, enter the name of a city in the search input field.
  2. Click the "Search" button or press Enter to retrieve weather information for the specified city.
  3. The current weather conditions for the city will be displayed, including the city name, date, weather icon, temperature, humidity, and wind speed.
  4. Scroll down to view the 5-day forecast for the city, which includes the date, weather icon, temperature, and humidity for each day.
  5. The search history will be saved on the left side of the page, allowing to quickly access weather information for previously searched cities. Click on a city in the search history to view its weather details.

Acknowledgments

Thanks to Drew and my classmates, for their support, enlightenment and collaboration throughout the project. Google search and documents on W3 school helped to make this project possible.

Challenges Faced

Building the Weather Dashboard App posed several challenges, primarily centered around the integration of jQuery with the OpenWeatherMap API, as handling other simultaneous requests and data were challenging. Parsing and displaying complex API data required and data extraction from console log, and achieving a visually appealing design across components was difficult. Implementing a working search history feature using local storage added another layer of complex to the project, ultimately all of these did enhance the JavaScript and jQuery skills and problem-solving abilities.

License

This project is licensed under the MIT License.

Deployment - Useful Links to facilitate viewing of project

  1. The URL of the GitHub repository: https://github.com/Jeshikha/weather-dashboard

  2. The URL of the functional, deployed application on GitHub Pages: https://jeshikha.github.io/weather-dashboard/

Screenshots of Deployed App

The following images show the web application's functionality:

  • Webpage opening - weather dashboard by Jess opening the code in the browser

  • Inspecting Local Storage Application Inspecting Local Storage Application