The Weather Application

Project Overview

This weather application provides users with accurate, real-time weather information for a selected location. Users can view the current weather conditions, including temperature, wind speed, and precipitation. Additionally, the application displays a background image of the city entered by the user. Users can toggle between metric and imperial units for temperature and wind speed.

Furthermore, the app includes hourly forecasts, allowing users to see detailed weather information for the upcoming hours. This feature provides insights into temperature changes and weather conditions throughout the day.

Project Requirements

1. Responsiveness: The application should be responsive and usable on various devices.
2. Single Page Application: The application is a single-page application, meaning only one index.html file is used, and JavaScript updates the HTML using DOM manipulation.
3. API Interaction: The application interacts with an API to fetch weather data and background images.
4. Loading/Error Handling: The application handles loading states and errors gracefully, displaying appropriate messages to the user.
5. User Interaction: The application allows users to fetch different data from the API based on their input.

Features of the Application

• Current Weather Conditions: Displays real-time temperature, wind speed, and precipitation for the user's selected location.
• Background Image: Shows a photo of the city typed in the search bar as the background.
• Toggle Feature: Allows users to switch between metric and imperial units for temperature and wind speed.
• Hourly and Daily Forecasts: Provide detailed forecasts for the upcoming hours and days.

Public APIs in Use

• Weather Information: OpenWeatherMap API
• Background Images: Unsplash API or any other suitable image API.

Application Screenshots

Technologies Used

• Structure of the web page.
• Styling and layout.
• Dynamic content and interactions.
• Icon library for UI elements.
• Media queries for mobile-friendly layout.

Installation and Setup

1. Clone the repository:

   git clone https://github.com/yourusername/weather-app.git

2. Navigate to the project directory:

   cd weather-app

3. Open index.html in your browser.

Usage

1. Enter a city name in the search bar and click the search button.
2. View the current weather conditions and background image for the city.
3. Use the toggle button to switch between Celsius and Fahrenheit.

Contact Information

For any inquiries or feedback, please contact:

Burhan Elaldi