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 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¤t_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`); Recipe Details
Difficulty Intermediate
Time 4-5 hours
APIs Used 3
Related Recipes
Related Tutorials
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.