Welcome to the Weather Dashboard Project! This web application allows users to search for a location and retrieve the current weather conditions and forecast for a specific location. The dashboard provides real-time weather information using the OpenWeather API, ensuring you stay informed about the atmospheric conditions when you plan a trip.
To use the weather dashboard, simply visit the Weather Dashboard Page. Enter the desired location in the search bar and press the search button to retrieve the weather data.
The weather Dashboard for a city display the following information:
-
Current Weather
- City
- Date
- Icon Representation of Weather Conditions
- Temperature
- Wind Speed
- Humidity
-
5-Day Forecast
- Date
- Icon Representation of Weather Conditions
- Temperature
- Wind Speed
- Humidity
The application keeps a record of your search history, allowing you to quickly revisit weather information for previously searched locations.
Explore the inner workings of the Password Generator by checking out the source code on GitHub. Feel free to contribute and enhance the project!
Enter the desired location City name, state code and country code in the search bar to retrieve weather information.
View real-time weather information, including weather-icon conditions, temperature, wind speed, and humidity.
Check the 5-day forecast to plan ahead.
To use the OpenWeather API to fetch weather data for a location, follow these steps:
You'll need an API key from OpenWeather to access their API. You can sign up for a free API key on the OpenWeather website.
Once you have your API key, you should include it in your JavaScript code where you make API requests. You can store it as a constant or in a configuration file for security.
const apiKey = 'YOUR_API_KEY';a. Geocoding API
To retrieve the current location latitude and longitude, you can make a GET request to the following API endpoint:
http://api.openweathermap.org/geo/1.0/direct?q={city name},{state code},{country code}&limit={limit}&appid={API key}
Replace {city name},{state code},{country code} with the name of the city, state code, country code or location you want to get the weather data for, {limit} with the number of the locations in the API response and {apiKey} with your OpenWeather API key.
b. Current and 5-Day Weather Forecast
To retrieve the current and 5-day weather forecast for a location, you can make a GET request to the following API endpoint:
api.openweathermap.org/data/2.5/forecast?lat={lat}&lon={lon}&appid={API key}
Replace {lat}, {lon} with the latitude and longitude of the city or location you want to get the weather data for, and {apiKey} with your OpenWeather API key.
Here's an example using JavaScript and the Fetch API:
const apiUrl = `https://api.openweathermap.org/data/2.5/forecast?lat=45.272812&lon=-66.063026&appid={API key}`;
fetch(apiUrl)
.then(response => response.json())
.then(data => {
// Handle the 5-day weather forecast data here
console.log(data);
})
You'll need to parse the JSON data returned by the API and extract the relevant information to display it on your Weather Dashboard.
That's it! You can now use the OpenWeather API to retrieve the city geolocation, the current and 5-day weather forecasts for any location of your choice in your Weather Dashboard project.
Make sure to replace 'YOUR_API_KEY' in the code examples with your actual OpenWeather API key. Users of your Weather Dashboard project will need to follow these steps to set up their own API keys and make API requests to retrieve weather data.
For a visual representation of the sequence of actions involved in the weather dashboard, refer to the State Flow Diagram provided in the project documentation.
Feel free to reach out, contribute, or provide feedback to make the Password Generator Project even more robust and user-friendly!
This project is licensed under the MIT License. See the LICENSE file for details.