Display top 10 countries from API data

by dshilkret

HTML

<h3>Top 10 Countries (from RESTCountries API)</h3>
<div id="output">Loading...</div>

JavaScript

async function getCountries() {
  try {
    const res = await fetch('https://restcountries.com/v3.1/all?fields=name,region,population');
    if (!res.ok) throw new Error('Failed to fetch countries');
    
    const countries = await res.json();
    renderCountries(countries);
  } catch (err) {
    document.getElementById('output').innerText = 'Error: ' + err.message;
  }
}

function renderCountries(data) {
  const output = document.getElementById('output');
  output.innerHTML = '';

  data.slice(0, 10).forEach((country, index) => {
    const div = document.createElement('div');
    div.innerHTML = `
      <strong>${index + 1}. ${country.name.common}</strong> – 
      Region: ${country.region}, Population: ${country.population.toLocaleString()}
    `;
    output.appendChild(div);
  });
}

getCountries();