script.js

const countriesContainer = document.querySelector('.countries-container')
const filterByRegion = document.querySelector('.filter-by-region')
const searchcontainer = document.querySelector('.search-container input')
const themechanger = document.querySelector('.theme-changer')


let allCountriesData


fetch('https://restcountries.com/v3.1/all')
 .then((res) => res.json())
 .then((data) => {
   renderCountries(data)
   allCountriesData = data
 })


 filterByRegion.addEventListener('change', (e) => {
    fetch(`https://restcountries.com/v3.1/region/${filterByRegion.value}`)
    .then((res) => res.json())
    .then(renderCountries)
 })



 function renderCountries(data){
    countriesContainer.innerHTML = '' 
    data.forEach((country) => {
        const countryCard = document.createElement('a') 
        countryCard.classList.add('country-card')
        countryCard.href =  `/country.html?name=${country.name.common}`
        countryCard.innerHTML = `
             <img src="${country.flags.svg}" alt="${country.name.common}">
             <div class="card-text">
             <h3 class="card-title">${country.name.common}</h3>
             <p><b>Population: </b>${country.population.toLocaleString('en-IN')}</p>
             <p><b>Region: </b>${country.region}</p>
             <p><b>Capital: </b>${country.capital?.[0]}</p>
            </div>
            `
countriesContainer.append(countryCard)
    })
 }

 searchcontainer.addEventListener('input', (e) => {
   const filterall = allCountriesData.filter((country) => country.name.common.toLowerCase().includes(e.target.value.toLowerCase()));
   renderCountries(filterall)
 })


 themechanger.addEventListener('click', () => {
   document.body.classList.toggle('dark')
 })