Weather App

This page provides thorough documentation for the client-side Weather App, its frontend architecture, asynchronous data flow, and DOM manipulation logic.

Project Overview

This is a frontend web application that fetches and displays real-time weather data for any city. The project is built entirely with client-side technologies (HTML, CSS, and Vanilla JavaScript) and interacts with the external OpenWeatherMap API to retrieve data.

Key features include dynamic content rendering, user-friendly error handling, loading state indicators, and a responsive design with a background that changes based on the current weather.

Frontend Architecture

The application follows a classic separation of concerns for frontend development, ensuring that structure, style, and logic are kept in distinct, manageable files:

• index.html: The structural foundation. It defines the layout of the user interface, including the search input, button, and all the container elements where weather data will be dynamically inserted.
• style.css: The visual layer. It handles all styling, from colors and fonts to the responsive grid layout for weather details. It also contains classes that are dynamically applied by JavaScript to change the page's background image.
• script.js: This file contains all the interactive logic: handling user input, making API calls, processing data, updating the HTML, and managing UI states like loading and error messages.

How the API is Used (Fetch API)

This project relies on the browser's built-in Fetch API to communicate with the remote OpenWeatherMap server. This modern JavaScript feature allows us to make network requests asynchronously, meaning the user interface remains responsive while the app waits for data.

For example, this JavaScript code in script.js initiates the entire data retrieval process:

async function fetchWeatherData(cityName) {
const requestUrl = `${apiBaseUrl}?q=${cityName}&appid=${apiKey}&units=metric`;
try {
    const response = await fetch(requestUrl);
    if (!response.ok) {
        throw new Error('API Error');
    }
    const weatherData = await response.json();
    displayWeather(weatherData);
} catch (error) {
    // ... error handling
}
}

This approach provides two major benefits:

1. Non-Blocking Operations: Using async/await prevents the browser from freezing. The user can still interact with the page while the weather data is being fetched in the background.
2. Clean & Readable Code: It allows us to write asynchronous code that reads like synchronous, sequential steps, making the logic easier to follow and maintain compared to older callback-based methods.

The Data Journey: From User Input to Weather Display

Here is a step-by-step breakdown of what happens when a user searches for a city's weather:

1. User Interaction: A user types a city name into the input field and clicks the "Search" button or presses Enter.
2. Event Handling: A JavaScript event listener in script.js detects this action and calls the handleSearch() function.
3. API Request Initiation: The handleSearch() function triggers fetchWeatherData(), which constructs the full API request URL containing the city name and the API key.
4. HTTP Request: The browser's fetch() API sends an asynchronous GET request over the internet to the OpenWeatherMap server.
5. API Server Response: The OpenWeatherMap server finds the weather data for the requested city and sends it back to the browser in JSON format.
6. Data Parsing: The await response.json() method in our script parses the JSON text response into a usable JavaScript object.
7. DOM Manipulation: The displayWeather(data) function is called. It takes the JavaScript object and systematically updates the content of the HTML elements on the page (e.g., setting the `textContent` of the temperature `div` and the `src` of the weather icon `img`).
8. Visual Update: The browser immediately re-renders the page, and the user sees the fetched weather information appear on the screen.

Architecture & Data Flow Visualization

This diagram illustrates the complete client-side request-response cycle described above.

How to Run Locally

To run this project on your local machine, download or clone the repository and follow these steps:

1. Get an API Key:
   • Go to OpenWeatherMap and sign up for a free account.
   • Navigate to your account's "API keys" section and copy your default key.
2. Configure the Project:
   • Open the script.js file in a text editor.
   • Find the line: const apiKey = "YOUR_API_KEY_PLACEHOLDER";
   • Replace "YOUR_API_KEY_PLACEHOLDER" with your actual API key.
3. Open in Browser:
   • Find the index.html file in the project folder.
   • Double-click it or right-click and choose "Open with" your favorite web browser. The app is now running locally.

Screenshot