Multi-API Comparison Dashboard - Activity 06 - Discovery Challenge

Master parallel API requests by building a dynamic comparison dashboard that fetches and analyzes data from multiple APIs simultaneously using Promise.all().

🎯 Learning Objectives

By completing this activity, you will:

• Master parallel API requests using Promise.all() for concurrent fetching
• Handle multiple API response formats and data structures
• Build dynamic comparison interfaces with real-time analytics
• Implement performance testing and data visualization
• Create interactive battle/comparison modes
• Optimize API calls with caching and error recovery

🚀 Getting Started

⚡ Quick Start (See Results in 30 Seconds!)

IMPORTANT: This template includes WORKING COMPARISON FEATURES! Test them immediately:

1. Navigate to this folder in your terminal/command prompt
2. Start a local server (choose one):
   bash

   # Mac/Linux:
   python3 -m http.server 8001
   
   # Windows:
   python -m http.server 8001
   
   # Alternative using Node.js:
   npx http-server -p 8001
   

3. Open your browser to: http://localhost:8001
4. Try the working features:
   • Select "Pokemon Battle Stats" comparison type
   • Click "Quick Start: Fire Starters" to load 3 Pokemon instantly
   • See side-by-side stat comparisons appear
   • Click "Battle Mode" to see head-to-head comparisons

🎯 What's Already Working

65% of the code is implemented for you:

✅ Fully Working Features:

• Pokemon Comparison - Complete battle stats comparison (attack, defense, speed, HP)
• Star Wars Characters - Physical stats and character showdowns
• Parallel Fetching - Promise.all() implementation for concurrent API calls
• Quick Start Buttons - Pre-loaded examples for instant testing
• Responsive Grid Layout - Auto-adjusting card display
• Loading States - Animated spinners during API requests

⚠️ TODO Features (Your Tasks):

• Weather Comparison - Real-time city weather data comparison (TODO 1)
• Country Comparison - Population and geographic data analysis (TODO 2)
• Performance Analytics - API response time tracking (TODO 3)
• Export Functionality - Save comparison data as JSON (TODO 4)
• Advanced Battle Mode - Weighted scoring algorithms (Extension)

📝 Your Learning Path

1. First: Test the working Pokemon/Star Wars comparisons to understand the pattern
2. Then: Complete TODO 1 & 2 to add Weather and Country comparison types
3. Next: Implement TODO 3 & 4 for performance tracking and data export
4. Finally: Explore extension challenges for advanced features

🎮 Comparison Types Available

🔴 Pokemon Battle Stats (Working)

• Attack, Defense, Speed, HP - Core battle stats visualization
• Type Effectiveness - Pokemon type combinations
• Battle Mode - Head-to-head stat comparisons

⭐ Star Wars Characters (Working)

• Physical Stats - Height, mass, appearance
• Character Info - Birth year, homeworld, species
• Character Showdown - Physical superiority battles

🌍 Weather Comparison (TODO 1)

• Temperature - Current and "feels like" comparisons
• Weather Conditions - Sky conditions, visibility
• Environmental Data - Humidity, pressure, wind speed

🗺️ Country Facts (TODO 2)

• Population Data - Current population statistics
• Geographic Info - Area, capital cities, regions
• Cultural Facts - Languages, currencies, time zones

📋 Tasks to Complete

TODO 1: Weather Comparison Implementation (Medium)

Complete the Weather API integration to compare real-time weather across cities.

API Endpoint: https://api.openweathermap.org/data/2.5/weather?q={city}&appid={API_KEY}&units=metric

Requirements:

• Fetch weather data for multiple cities in parallel
• Display temperature, conditions, humidity, and wind speed
• Show "feels like" temperature comparison
• Handle cities not found with helpful error messages

Success Criteria:

• Weather cards display temperature and conditions
• Parallel fetching works for 3+ cities
• Quick start buttons load example cities (London, Paris, Tokyo)
• Analytics show hottest/coldest city

Learning Focus: Working with API keys and query parameters

TODO 2: Country Comparison Implementation (Medium)

Complete the REST Countries API integration to compare country data.

API Endpoint: https://restcountries.com/v3.1/name/{country}

Requirements:

• Fetch country data including population, area, capital
• Display flags, languages, and currencies
• Calculate population density
• Show geographic comparisons

Success Criteria:

• Country cards show population and area
• Flags display correctly from API
• Quick start buttons load example countries (USA, Japan, Brazil)
• Analytics show largest/smallest by population and area

Learning Focus: Handling array responses and nested data structures

TODO 3: Performance Analytics (Challenge)

Implement API response time tracking and comparison analytics.

Requirements:

• Track fetch start/end times using performance.now()
• Display response times for each API call
• Calculate average, min, and max response times
• Show performance comparison graph/visualization

Success Criteria:

• Response times display in milliseconds
• Performance stats panel shows timing analytics
• Fastest/slowest API calls are highlighted
• Timing data exports with comparison results

Learning Focus: Performance monitoring and optimization techniques

TODO 4: Export Comparison Data (Easy)

Implement JSON export functionality for comparison results.

Requirements:

• Create export button that generates JSON download
• Include all comparison data and analytics
• Format JSON with proper indentation
• Generate descriptive filename with timestamp

Success Criteria:

• Export button downloads JSON file
• JSON includes all comparison items and stats
• Filename includes comparison type and date
• JSON is properly formatted and readable

Learning Focus: Data serialization and file downloads with JavaScript

💻 Code Examples & Patterns

Parallel API Requests Pattern

async function getMultipleItems(itemNames) {
  try {
    console.log(`🔥 Fetching ${itemNames.length} items simultaneously...`);

    // Create array of fetch promises
    const fetchPromises = itemNames.map(name =>
      fetch(`${API_BASE}/${name.toLowerCase()}`)
        .then(response => {
          if (!response.ok) throw new Error(`${name} not found`);
          return response.json();
        })
    );

    // Wait for all promises to complete - THIS IS THE KEY!
    const itemData = await Promise.all(fetchPromises);

    console.log('✅ All items loaded successfully!');
    return itemData;

  } catch (error) {
    console.error('❌ Failed to fetch items:', error);
    throw error;
  }
}

Performance Timing Pattern

async function fetchWithTiming(url) {
  const startTime = performance.now();

  const response = await fetch(url);
  const data = await response.json();

  const endTime = performance.now();
  const duration = endTime - startTime;

  console.log(`⏱️ Request took ${duration.toFixed(2)}ms`);

  return { data, duration };
}

Dynamic Comparison Analytics

function analyzeComparison(items) {
  const stats = {
    count: items.length,
    categories: {}
  };

  // Find strongest in each category
  if (comparisonType === 'pokemon') {
    const attacks = items.map(p => getStatValue(p, 'attack'));
    const defenses = items.map(p => getStatValue(p, 'defense'));

    stats.strongest = {
      attacker: items[attacks.indexOf(Math.max(...attacks))],
      defender: items[defenses.indexOf(Math.max(...defenses))]
    };
  }

  // Calculate averages and insights
  stats.averages = calculateAverages(items);
  return stats;
}

🛠 API Reference

PokéAPI (No Authentication Required) ✅ Working

• Base URL: https://pokeapi.co/api/v2
• Endpoints:
  • GET /pokemon/{name} - Get Pokemon stats and info
• Features: Complete Pokemon database with stats, types, abilities
• Rate Limit: No official limit (be respectful with requests)
• CORS: Enabled for browser requests
• Documentation: pokeapi.co/docs

Example Response:

{
  "name": "pikachu",
  "stats": [
    { "stat": { "name": "hp" }, "base_stat": 35 },
    { "stat": { "name": "attack" }, "base_stat": 55 }
  ],
  "types": [{ "type": { "name": "electric" } }]
}

SWAPI - Star Wars API (No Authentication Required) ✅ Working

• Base URL: https://swapi.tech/api (Updated: Original swapi.dev is no longer available)
• Endpoints:
  • GET /people/{id}/ - Get character information
• Features: Characters, vehicles, planets from Star Wars universe
• Rate Limit: No official limit
• CORS: Enabled for browser requests
• Documentation: swapi.tech

Example Response:

{
  "name": "Luke Skywalker",
  "height": "172",
  "mass": "77",
  "birth_year": "19BBY",
  "homeworld": "https://swapi.dev/api/planets/1/"
}

OpenWeatherMap API (Free API Key Required) ⚠️ TODO 1

• Base URL: https://api.openweathermap.org/data/2.5
• Endpoints:
  • GET /weather?q={city}&appid={API_KEY}&units=metric
• Features: Real-time weather data for cities worldwide
• Rate Limit: 1000 calls/day (free tier)
• CORS: Enabled
• Get API Key: Sign up here (free)
• Documentation: openweathermap.org/api

Example Response:

{
  "main": {
    "temp": 15.5,
    "feels_like": 14.2,
    "humidity": 72
  },
  "weather": [{ "description": "light rain" }],
  "wind": { "speed": 4.5 }
}

REST Countries (No Authentication Required) ⚠️ TODO 2

• Base URL: https://restcountries.com/v3.1
• Endpoints:
  • GET /name/{country} - Search by country name
• Features: Comprehensive country data including demographics
• Rate Limit: No official limit
• CORS: Enabled for browser requests
• Documentation: restcountries.com

Example Response:

[{
  "name": { "common": "Japan" },
  "population": 125584838,
  "area": 377930,
  "capital": ["Tokyo"],
  "flags": { "png": "https://..." }
}]

🧪 Testing Your Work

Manual Testing Checklist

Working Features (Test These First):

• Pokemon comparison loads 3 fire starters (Charmander, Charmeleon, Charizard)
• Star Wars comparison loads 3 characters (Luke, Leia, Han)
• Side-by-side cards display with stats
• Battle mode selects two items for head-to-head comparison
• Remove button deletes items from comparison
• Loading spinners appear during API calls

TODO Features (Test After Implementation):

• Weather comparison loads and displays city data
• Country comparison shows population and area
• Performance timing displays for each API call
• Export button downloads JSON with timestamp
• Analytics panel shows min/max/average stats
• Responsive design works on mobile devices

Performance Testing Scenarios

Test One: Parallel Loading Speed

1. Select Pokemon comparison
2. Click "Quick Start: Fire Starters"
3. Open DevTools Network tab
4. Verify all 3 requests start simultaneously (not sequential)
5. Check total time is ~1 API call, not 3x

Test 2: Error Handling

1. Try fetching non-existent Pokemon ("asdfghjkl")
2. Verify error message displays clearly
3. Other comparison items should remain intact
4. Application should not crash

Test 3: API Response Time Comparison (after TODO 3)

1. Load Pokemon (fast API)
2. Load Weather data (medium speed API)
3. Compare response times in performance panel
4. Verify timing accuracy within 50ms

Debugging Tips

Using Browser DevTools:

1. Console Tab - View API calls and timing logs
2. Network Tab - Inspect API requests/responses
3. Elements Tab - Check DOM updates and styling
4. Performance Tab - Monitor fetch timing and rendering

Common Issues & Solutions:

Issue: Promise.all() fails if one item is invalid Solution: Use Promise.allSettled() instead to handle partial failures

Issue: Weather API returns 401 Unauthorized Solution: Check API key is correctly set in script.js

Issue: Country API returns array, not object Solution: Access first element with data[0] for country data

Issue: Performance timing shows NaN Solution: Ensure performance.now() is called before and after fetch

🎓 Extension Challenges

Beginner Extensions (Build on Working Code)

One. Add More Quick Start Options

• Create additional quick start button sets
• Pokemon: Water starters (Squirtle, Wartortle, Blastoise)
• Star Wars: Droids (R2-D2, C-3PO, BB-8)
• Success Criteria: Buttons load 3 items in parallel

2. Favorite Comparison Items

• Add star icon to each comparison card
• Save favorites to localStorage
• Display favorites list in sidebar
• Success Criteria: Favorites persist across page refreshes

3. Comparison History Tracking

• Log each comparison to localStorage
• Show "Recent Comparisons" section
• One-click reload of previous comparisons
• Success Criteria: Last 5 comparisons saved and retrievable

Intermediate Extensions (Enhance Existing Features)

One. Data Visualization Charts

• Add Chart.js library for visualizations
• Create bar chart comparing numeric stats
• Radar chart for multi-dimensional comparisons
• Success Criteria: Charts update dynamically as items added/removed

2. Advanced Battle Scoring

• Implement weighted scoring algorithm
• User-configurable stat weights (attack 40%, defense 30%, etc.)
• Show breakdown of score calculation
• Success Criteria: Battle winner changes based on weight adjustments

3. Multi-API Mashups

• Combine Pokemon + Weather: "Best weather for Pokemon type"
• Combine Countries + Star Wars: "Which character's homeworld matches this country?"
• Success Criteria: Creative data relationships displayed meaningfully

4. Caching & Offline Support

• Implement localStorage cache for API responses
• Cache timeout of 5 minutes
• Offline mode with cached data
• Success Criteria: Second load of same item is instant (cached)

Advanced Extensions (New Functionality)

One. Real-Time Collaborative Comparisons

• Use Firebase Realtime Database
• Share comparison room with unique URL
• Multiple users add items simultaneously
• Success Criteria: Changes visible across all connected clients

2. API Rate Limiting & Queue Management

• Implement request queue for rate-limited APIs
• Show queue position and estimated wait time
• Throttle requests to stay under limits
• Success Criteria: Never exceed API rate limits, graceful queuing

3. Machine Learning Predictions

• Use TensorFlow.js for battle outcome predictions
• Train model on historical battle data
• Show confidence percentage for predictions
• Success Criteria: Prediction ``accuracy > 70``% after training

4. Custom API Integration

• Add configuration panel for custom APIs
• User inputs: API URL, response mapping, display fields
• Save custom configurations to localStorage
• Success Criteria: User can add their own API without coding

📚 Additional Resources

Key JavaScript Concepts

• Promise.all() - MDN Documentation
• Fetch API - Complete Guide
• Async/Await - Best Practices
• Performance API - Timing Measurements

API Integration Learning

• RESTful API Design Principles
• HTTP Status Codes Reference
• API Rate Limiting Strategies
• JSON Data Formats

Advanced Topics

• Caching Strategies - localStorage, sessionStorage, Cache API
• Error Recovery - Retry logic, fallback data, graceful degradation
• Data Visualization - Chart.js, D3.js for graphs
• Performance Optimization - Debouncing, throttling, lazy loading

🏆 Success Criteria

Your project is complete when:

• ✅ All 4 TODO functions are implemented
• ✅ Pokemon and Star Wars comparisons work perfectly
• ✅ Weather and Country APIs fetch and display correctly
• ✅ Performance timing tracks all API calls accurately
• ✅ Export functionality generates valid JSON downloads
• ✅ Battle mode works across all comparison types
• ✅ Loading states and error handling are graceful
• ✅ Project works on both desktop and mobile
• ✅ Code is clean with proper comments
• ✅ All manual tests pass successfully

🎉 Congratulations!

Once you complete this project, you'll have mastered:

• Parallel API Requests with Promise.all() for optimal performance
• Multiple API Integration handling diverse response formats
• Performance Monitoring tracking and optimizing API call timing
• Data Comparison Logic building analytics and battle systems
• Error Handling managing failures across concurrent requests
• Data Export serializing and downloading JSON data

This advanced activity showcases your ability to work with multiple APIs simultaneously-a critical skill for building modern web applications that aggregate data from various sources.

📁 File Structure

activity-06-comparison/
├── index.html          # Main comparison dashboard interface
├── styles.css          # Responsive grid layouts and animations
├── script.js           # Parallel API fetching and comparison logic
├── sample-data.json    # Fallback data for offline testing
└── README.md           # This comprehensive documentation

Need Help?

• Check the browser console for API call logs and timing data
• Review the TODO comments in script.js for implementation guidance
• Test working features (Pokemon, Star Wars) to understand patterns
• Use Network tab to inspect API requests/responses
• Verify API keys are correctly configured (Weather API)
• Compare your implementation with working comparison types

Happy coding! Build amazing comparison dashboards! 🎉✨