Weather Forecasting Web Application

Overview

This web application provides users with weather forecasts for a specified location. Users can search for a city, and the application will display the current weather conditions, a map showing the searched location, and a 5-day weather forecast. The application utilizes HTML, CSS, and JavaScript, and it fetches data from the OpenWeatherMap API.

Features

• Current Weather: Displays current weather conditions, including temperature, wind speed, cloud cover, sunrise, and sunset times.
• Location Map: Shows the searched location on an embedded Google Map.
• 5-Day Forecast: Provides a forecast for the next 5 days, including date, weather icon, temperature, and description.

Usage

1. Search for a City: Enter the name of the city you want to check the weather for in the search bar.
2. View Current Weather: The current weather conditions for the specified city will be displayed.
3. Explore Location Map: An embedded Google Map will show the location of the searched city.
4. Check 5-Day Forecast: Scroll down to view the 5-day weather forecast, including date, weather icon, temperature, and description.

Technologies Used

• HTML: Markup language for creating the structure of the web page.
• CSS: Styling language used for designing the appearance of the web page.
• JavaScript: Programming language used for dynamic behavior and fetching data from the API.
• OpenWeatherMap API: Provides weather data used in the application.
• Google Maps API: Embeds a map to display the searched location.

Setup

1. Clone the repository to your local machine.
2. Open the index.html file in a web browser.
3. Ensure you have an active internet connection to fetch weather data from the OpenWeatherMap API.
4. Start searching for weather forecasts by entering city names in the search bar.

Experience

Deployed the application on Netlify. You can access it 🔗Weather App.

Credits

• OpenWeatherMap: Weather data API.