A simple and modern weather app that displays weather forecasts, including current weather conditions, temperature, humidity, wind speed, and more. The app uses wttr.in to fetch weather data and shows it in a user-friendly interface. It also dynamically changes the background based on the weather condition for a more immersive experience.
- Weather Display: Shows the current weather forecast for any city, including temperature, wind speed, humidity, pressure, visibility, and precipitation.
- Hourly Forecast: Displays weather information for morning, noon, evening, and night, with icons representing different weather conditions.
- Dynamic Background: Changes the background image based on the current weather condition (e.g., sunny, cloudy, rainy, snowy).
- Search for City: Allows users to search for weather data by entering a city name. Press Enter after typing the city name to trigger the search.
- Weather Icons: Uses weather icons to visually represent the weather conditions (sunny, cloudy, rain, etc.).
- User-Friendly Interface: Displays weather data in a structured, easy-to-read layout with sections for different times of day.
To run this project locally:
-
Clone the repository:
git clone https://github.com/or1z/Weather-App.git
-
Navigate into the project directory:
cd Weather-App -
Open the
index.htmlfile in your web browser: Double-click theindex.htmlfile or open it through your preferred browser.
- Search for Weather: Type the name of a city into the search bar and press Enter or click the Search button.
- View the Forecast: The weather details for the city will be displayed, showing the current weather conditions, as well as hourly forecasts for morning, noon, evening, and night.
- Background Changes: The background of the website will automatically change to reflect the current weather condition of the city you're viewing.
- HTML: For structuring the content.
- CSS: For styling the app and ensuring responsiveness.
- JavaScript: For fetching weather data, dynamically updating the UI, and handling user interactions.
- API: Uses the wttr.in API to fetch weather data in JSON format.
- Geolocation: Automatically fetch weather data based on the user’s current location.
This project is licensed under the MIT License - see the LICENSE file for details.
- wttr.in: For providing the weather data via a simple API.
- Weather Icons: Used for weather condition representations.
- Free Images: Background images for different weather conditions (e.g., sunny, cloudy, rainy).
