Untitled 1886

Guest

May 11th, 2026

Never

Not a member of GistPad yet? Sign Up, it unlocks many cool features!

None 4.20 KB | None | 0 0

copy raw download clone embed print report

let url = "https://apis.ccbp.in/countries-data";
let searchInput = document.getElementById('searchInput')
let resultCountries = document.getElementById('resultCountries')
const spinner = document.getElementById('spinner');
let options = {
method: 'GET'
}
let allCountries = []
function fetchCountries() {
spinner.classList.remove('hidden');
fetch('https://apis.ccbp.in/countries-data')
.then(function(response) {
return response.json()
})
.then(function(data) {
allCountries = data
renderCountries(allCountries)
spinner.classList.add('hidden')
})
}
function renderCountries(countries) {
resultCountries.innerHTML = ''
countries.forEach(function(country) {
const card = document.createElement('div');
card.className = 'border rounded-lg p-4 mb-3 flex items-center gap-4';
card.innerHTML = `
<img src="${country.flag}" class="w-12 h-8 object-cover rounded">
<div>
<p class="font-bold text-lg">${country.name}</p>
<p class="text-gray-600">Population: ${country.population.toLocaleString()}</p>
</div>
`;
resultCountries.appendChild(card);
});
}
searchInput.addEventListener('input', function(e) {
const term = e.target.value.toLowerCase();
const filtered = allCountries.filter(function(country) {
return country.name.toLowerCase().includes(term);
});
renderCountries(filtered);
});
// Start: Fetch when page loads
fetchCountries();

RAW Paste Data Copied

let url = "https://apis.ccbp.in/countries-data"

let searchInput = document.getElementById('searchInput')
let resultCountries = document.getElementById('resultCountries')
const spinner = document.getElementById('spinner');
let options = {
    method: 'GET'
}
let allCountries = []

function fetchCountries() {
    spinner.classList.remove('hidden');

fetch('https://apis.ccbp.in/countries-data')
        .then(function(response) {
            return response.json()
        })
        .then(function(data) {
            allCountries = data
            renderCountries(allCountries)
            spinner.classList.add('hidden')
        })
}

function renderCountries(countries) {
    resultCountries.innerHTML = ''

countries.forEach(function(country) {
        const card = document.createElement('div');
        card.className = 'border rounded-lg p-4 mb-3 flex items-center gap-4';

card.innerHTML = `
        <img src="${country.flag}" class="w-12 h-8 object-cover rounded">
        <div>
          <p class="font-bold text-lg">${country.name}</p>
          <p class="text-gray-600">Population: ${country.population.toLocaleString()}</p>
        </div>
      `;

resultCountries.appendChild(card);
    });
}
searchInput.addEventListener('input', function(e) {
    const term = e.target.value.toLowerCase();

const filtered = allCountries.filter(function(country) {
        return country.name.toLowerCase().includes(term);
    });

renderCountries(filtered);
});

// Start: Fetch when page loads
fetchCountries();