Weather App
Project Overview
This Weather App is a dynamic web application that provides real-time weather forecasts for locations worldwide. Built with JavaScript, HTML, and CSS, the app integrates with multiple APIs to fetch current weather data, forecast information, and location-based images. The app demonstrates modern web development practices including API integration, asynchronous JavaScript, and responsive design.
Interactive Demo
Try out a simplified version of the weather app below. Enter a city name to see what weather information would be displayed.
Enter a city name and click "Get Weather" to see the forecast.
Features Showcase
The app comes with a clean, intuitive interface where users can search for any city and instantly get detailed weather information.
Weather Details
When a user searches for a city, the app provides comprehensive weather information including current conditions, temperature, humidity, wind speed, and pressure. The background dynamically changes to reflect the current weather at the searched location.
Key Features
- Real-time Weather Data: Fetches up-to-date weather information from OpenWeatherMap API.
- 5-day Forecast: Provides a detailed 5-day weather forecast, helping users plan ahead.
- Dynamic Background Images: Backgrounds change based on both the searched location and current weather conditions using Unsplash API.
- Weather Icons: Visual weather representations using the Weather Icons library for quick comprehension.
- Responsive Design: Optimized for all device sizes from mobile phones to desktop computers.
- Error Handling: Robust error handling for invalid searches or API failures.
Weather Icons
The app uses a comprehensive set of weather icons to visually represent different weather conditions:
Technical Details
API Integration
The app integrates with multiple external APIs:
- OpenWeatherMap API: Provides current weather data and forecasts.
- Unsplash API: Supplies high-quality images related to the searched location.
JavaScript Implementation
The core functionality is implemented in JavaScript:
- Asynchronous Fetching: Uses Fetch API and Promises to handle asynchronous API requests.
- Dynamic DOM Updates: Manipulates the DOM to display weather data and update the UI.
- Weather Mapping: Maps weather conditions to appropriate icons and background images.
- Error Handling: Implements comprehensive error handling for API failures and invalid user inputs.
How to Use
- Open the application in your web browser.
- Enter a city name in the search field.
- Click the "Get Weather" button.
- View the current weather conditions and 5-day forecast for your selected location.
- Enjoy the dynamic background that changes based on the city and weather conditions.