⚔️ Multi-Item Comparison Dashboard

Compare multiple items side-by-side using real API data

Choose Your Comparison Adventure

🔴

Pokemon Battle Stats

Compare Pokemon attack, defense, speed, and HP

Battle Statistics Type Effectiveness Team Building
⭐

Star Wars Characters

Compare characters from the Star Wars universe

Physical Stats Character Info Galactic Origins
🌍

Weather Comparison

Compare weather across multiple cities

Temperature Weather Conditions Travel Planning
🗺️

Country Facts

Compare countries and their statistics

Population Data Geographic Info Cultural Facts

🎓 How to Use the Comparison Dashboard

1

Choose Comparison Type

Select what you want to compare: Pokemon, Star Wars characters, weather, or countries

2

Add Items to Compare

Use the input field to add items, or try the quick start examples and random buttons

3

Analyze Comparisons

View side-by-side comparisons, statistics, and use battle mode for head-to-head matchups

4

Export Your Results

Save your comparison data and share your findings with others

🔗 APIs Used

PokéAPI

Comprehensive Pokemon data including stats, types, and abilities

Learn More

SWAPI

Star Wars API with character information from the entire saga

Learn More

OpenWeatherMap

Real-time weather data for cities worldwide

Learn More

REST Countries

Detailed information about countries, including demographics and geography

Learn More

💻 Implementation Examples

Fetching Multiple Items with Promise.all()

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
    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;
  }
}

Comparison Analytics Functions

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
  stats.averages = calculateAverages(items);

  return stats;
}

function generateInsights(stats) {
  const insights = [];

  if (stats.strongest) {
    insights.push(`💪 Strongest attacker: ${stats.strongest.attacker.name}`);
    insights.push(`🛡️ Best defender: ${stats.strongest.defender.name}`);
  }

  return insights;
}

Dynamic Grid Layout

function renderComparisonGrid(items) {
  const grid = document.getElementById('comparisonGrid');

  // Create responsive grid
  grid.style.gridTemplateColumns =
    `repeat(auto-fit, minmax(300px, 1fr))`;

  grid.innerHTML = items.map((item, index) => `
    <div class="comparison-card" data-index="${index}">
      <div class="card-header">
        <h3>${item.name}</h3>
        <button onclick="removeItem(${index})" class="remove-btn">×</button>
      </div>

      <div class="card-content">
        ${generateCardContent(item)}
      </div>

      <div class="card-actions">
        <button onclick="selectForBattle(${index})">Select for Battle</button>
      </div>
    </div>
  `).join('');

  // Add animation
  animateCards();
}