Weather Forecast is a web-based application that provides users with up-to-date weather information for their current location and for locations around the world. This README provides an overview of the project, its features, and how to set it up for development or use.
Default Location
- By default, the app attempts to fetch the user's current location (with permission granted) and displays the current temperature and weather conditions.
Hourly Weather Forecast
- The app provides an hourly weather forecast for the next 10 hours, based on the local time of the selected location.
3-Day Weather Forecast
- Users can view a 3-day weather forecast for the selected location.
Location Search
- The app includes a search bar with autocomplete functionality, allowing users to search for weather information in different places.
Dynamic Background
- The background of the app changes according to the weather conditions of the selected location.
- For sunny weather, it displays a bright and warm background.
- For clear/night weather, it uses a blue-themed background.
- Rain is accompanied by a rain animation.
- Snowfall is accompanied by a snow animation.
- Mist/fog results in a greyish, blurred background.
Styling with CSS
- All styling for the app is done using pure CSS.
The Weather Forecast App project is built using the following technologies:
- HTML
- CSS
- JavaScript
- Autocomplete API (for location search)
- Weather API (for weather data)
The project utilizes two API keys:
-
Autocomplete API Key: You will need an API key for the autocomplete feature to enable location search.
-
Weather API Key: You will also require an API key for the weather data, to fetch current weather, hourly forecasts, and 3-day forecasts.
To set up the project for local development or use, follow these steps:
Clone the Repository
- Clone this GitHub repository to your local machine.
Configure API Keys
- Ensure you have obtained the required API keys for the autocomplete and weather data APIs. Insert these keys in the appropriate places in your code.
Launch the App
- Access the project via your local web server's URL.
Default Location
- By default, the app attempts to fetch the user's current location (if permission is granted) and displays the current temperature and weather conditions.
Location Search
- Use the search bar to search for different locations.
- The autocomplete feature will assist you in finding the desired location.
- Select a location from the search results to see its weather information.
Dynamic Background
- Observe the background changing according to the weather conditions of the selected location.
