Project Documentation

1. Introduction

This Weather Forecast App is a user-friendly web application designed to provide real-time weather information for any city around the world. The primary goal of this project is to demonstrate modern web development skills, including fetching data from a third-party API, dynamically updating the UI, and creating a clean, multi-page, responsive user experience.

2. Key Features

• Current Weather Data: Instantly get the current temperature, weather description, humidity, wind speed, "feels like" temperature, and visibility.
• 7-Day Forecast: View a summarized weather forecast for the upcoming week.
• Dynamic Backgrounds: The application's background image changes dynamically based on the current weather condition (e.g., sunny, cloudy, rainy).
• Search Functionality: Users can search for any city, and the app will fetch and display its weather data.
• Responsive Design: The layout is fully responsive and works seamlessly on desktops, tablets, and mobile devices.
• Multi-Page Structure: The application is organized into multiple pages (Home, About, Contact, Documentation) for a complete web experience.

3. How to Use the App

Using the application is simple and straightforward:

1. Open the Home Page: When the app loads, it automatically shows the weather for a default city (e.g., Karachi).
2. Search for a City: Go to the search bar at the top, type the name of any city you want to check, and press the 'Enter' key.
3. View Weather Details: The app will instantly update the screen with the current weather and the 7-day forecast for the searched city.
4. Navigate Pages: Use the navigation bar at the top to visit the 'About', 'Contact', or 'Documentation' pages.

4. Technology Stack

This project was built using core web technologies:

• HTML5: For creating the structure and content of the web pages.
• CSS3: For styling the application, including the responsive layout, glassmorphism effects, and modern design.
• JavaScript (ES6): For handling user interactions, fetching data from the API, and dynamically updating the page content.
• OpenWeatherMap API: Used as the third-party service to source live weather data from across the globe.