External API Integration

Objective

Build a lightweight web interface capable of retrieving real-time weather conditions for any city through an external REST API, reinforcing concepts of API authentication, asynchronous fetch, and JSON parsing.

Key Features

• City Search: user-entered city name triggers live API call.
• Real-Time Data: displays temperature, humidity, and conditions.
• Error Handling: graceful alerts for invalid or empty input.
• Responsive UI: updates dynamically without page reload.

Technologies Used

• HTML / CSS: structure and glassmorphic styling.
• JavaScript (ES6): async / await for non-blocking API calls.
• OpenWeatherMap API: REST endpoint delivering JSON payloads.
• Fetch API: native browser method for secure HTTPS requests.

Implementation Steps

1. Register & Obtain API Key: create account at OpenWeatherMap.
2. Set Up JavaScript Logic:

   
   async function getWeather() {
     const apiKey = 'YOUR_API_KEY';
     const city = document.getElementById('city-input').value;
     const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
   
     try {
       const response = await fetch(url);
       if (!response.ok) throw new Error('City not found');
       const data = await response.json();
       displayWeather(data);
     } catch (err) {
       alert('Error fetching weather data. Check city name.');
     }
   }
             

3. Display Data:

   
   function displayWeather(data) {
     document.getElementById('city-name').textContent = data.name;
     document.getElementById('temperature').textContent = `Temperature: ${data.main.temp}°C`;
     document.getElementById('description').textContent = data.weather[0].description;
   }
             

4. Link Script & Test: ensure script tag is included and test multiple cities.

Outcome

The Weather App validates how external data sources can be consumed securely and efficiently from the browser. It establishes groundwork for more advanced integrations such as payment gateways, mapping services, or cloud APIs.