https://github.com/jwilferd10/forecastfinder
A Weather Dashboard app utilizing OpenWeather API for current and five-day conditions. Previous searches are added to a list for quick retrieval of weather data. App is mobile friendly!
https://github.com/jwilferd10/forecastfinder
api bootstrap css dashboard frontend html javascript mobile-friendly openweathermap openweathermap-api responsive weather weather-app weather-forecast weatherdata web-app web-application web-development
Last synced: 3 months ago
JSON representation
A Weather Dashboard app utilizing OpenWeather API for current and five-day conditions. Previous searches are added to a list for quick retrieval of weather data. App is mobile friendly!
- Host: GitHub
- URL: https://github.com/jwilferd10/forecastfinder
- Owner: jwilferd10
- Created: 2020-11-15T20:13:31.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-10-26T03:35:42.000Z (over 2 years ago)
- Last Synced: 2025-03-21T19:49:22.544Z (over 1 year ago)
- Topics: api, bootstrap, css, dashboard, frontend, html, javascript, mobile-friendly, openweathermap, openweathermap-api, responsive, weather, weather-app, weather-forecast, weatherdata, web-app, web-application, web-development
- Language: JavaScript
- Homepage: https://jwilferd10.github.io/ForecastFinder/
- Size: 50.2 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ⛅ 🌦️ ForecastFinder ☁️🌫️
## Your Weather Planning Companion!
:computer: **Live Deployment**: https://jwilferd10.github.io/ForecastFinder/
:computer: **Github Repository**: https://github.com/jwilferd10/ForecastFinder
## :open_file_folder: Table of Contents:
- [Preview](#camera-preview)
- [Demo](#movie_camera-demo)
- [Description](#wave-description)
- [User Story](#book-user-story)
- [Resources Used](#floppy_disk-resources-used)
- [Getting Started](#minidisc-getting-started)
- [Contact Information](#e-mail-contact-information)
## :camera: Preview:
## :wave: Description:
ForecastFinder is a weather dashboard app that allows users to search for weather information for a specific location using the OpenWeather API. With ForecastFinder, users can quickly and easily find the current weather conditions, as well as a five-day forecast, for any city around the world.
### 🚀 Features
- **Weather Search** : Users can search for weather information by city name or zip code. The app automatically detects if the input is a zip code and formats the API request accordingly.
- **Current Weather Display**: The app displays the current weather conditions for the searched location, including temperature, weather description, humidity, and wind speed.
- **Five-day Forecast**: ForecastFinder provides a five-day forecast that includes temperature, weather description, and weather icon for each day.
- **Previous Searches**: The app keeps track of previous searches made by the user, allowing them to easily access the weather information for previously searched cities.
- **User Notifications**: ForecastFinder provides user notifications for successful searches and error handling for invalid inputs or API errors.
- **Responsive Design**: The app is responsive and can be accessed on different devices, including desktops, tablets, and mobile devices.
### 💭 Developer Notes:
ForecastFinder was originally a generic Weather-Dashboard that I created during my cohort in the UCLA Coding Bootcamp. Driven by a commitment to demonstrating my capability to see projects through to completion, ForecastFinder has undergone a transformation into a more customized and refined Weather Dashboard. Noteworthy additions encompass the integration of color-coded user notifications and the implementation of an instructional modal, both of which enhance the application's functionality and user experience.
### 🙏 Thank you
So much for checking out ForecastFinder, this has been an educational boon for me and I appreciate any interest in checking the app out. I devoted time into ensuring the code is modularized and potentially useful. It's my hope that this application helps YOU out in anyway possible. Feel free to take a look through the files, Happy Coding!
## :book: User Story:
**AS A busy traveler**
- I WANT to see the current weather of a city
- SO THAT I can plan for the day
- I WANT a five day forecast
- SO THAT I can plan out my week
- I WANT a list of previously searched locations
- SO THAT I know the weather for each destination
**GIVEN a weather dashboard with form inputs**
- WHEN I search for a city
- THEN I am presented with current and future conditions for that city
- THEN I am presented with the five day forecast
- THEN I am presented a list of all previously searched locations
## :floppy_disk: Resources Used:
- HTML
- CSS
- JavaScript
- OpenWeather API
## :minidisc: Getting Started:
- Enter a city name or zip code in the search input field.
- Press Enter or click the Search button to retrieve the weather information for the entered location.
- View the current weather conditions and the five-day forecast on the app.
- Access previous search results by clicking on the search history buttons.
## :e-mail: Contact Information:
- ### [jwilferd10](https://github.com/jwilferd10)