Intermediate 4-5 hours · 3 APIs

Build a Multi-Source Weather Dashboard

Compare weather data from three different providers side by side. See how forecasts differ and find the most accurate predictions.

APIs Used

Data Flow

USER User enters a city name API Fetch weather from OpenWeatherMap via OpenWeatherMap API Fetch weather from WeatherAPI via WeatherAPI API Fetch weather from Open-Meteo via Open-Meteo PROCESS Normalize data and calculate averages OUTPUT Display comparison table
User Action
API Call
Transform
Output

How It Works

1

User enters a city name to get weather information

2

Fetch current weather from all three APIs in parallel

3

Normalize the data into a common format (temp, humidity, wind)

4

Display a comparison table showing differences between providers

Code Outline

Pseudocode / JavaScript
// 1. Fetch from all three sources in parallel
const city = 'Tokyo';
const [owm, wapi, meteo] = await Promise.all([
  fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=YOUR_KEY`)
    .then(r => r.json()),
  fetch(`https://api.weatherapi.com/v1/current.json?key=YOUR_KEY&q=${city}`)
    .then(r => r.json()),
  fetch(`https://api.open-meteo.com/v1/forecast?latitude=35.68&longitude=139.69&current_weather=true`)
    .then(r => r.json())
]);

// 2. Normalize data
const comparison = {
  OpenWeatherMap: { temp: owm.main.temp, humidity: owm.main.humidity },
  WeatherAPI: { temp: wapi.current.temp_c, humidity: wapi.current.humidity },
  'Open-Meteo': { temp: meteo.current_weather.temperature, humidity: 'N/A' }
};

// 3. Display comparison
console.log('Weather Comparison for ' + city);
Object.entries(comparison).forEach(([source, data]) => {
  console.log(`${source}: ${data.temp} C, Humidity: ${data.humidity}%`);
});

// 4. Calculate average
const temps = [owm.main.temp, wapi.current.temp_c, meteo.current_weather.temperature];
console.log(`Average: ${(temps.reduce((a, b) => a + b) / 3).toFixed(1)} C`);

Note: These recipes are AI-generated suggestions based on API capabilities. Actual implementation may vary. Always refer to official API documentation for the latest specifications.