How do I make a colored border to the highest number of population in Javascript?

Hello Im doing a project for school in Javascript and restCountries API https://restcountries.com/#api-endpoints-v3-all. you can search on language and the countries that speaks its language shows in result. It also comes a errormessage if the language doesnt excist. To the country that speaks the language and has the highest population needs a border around it to stand out. How do I make a colored border around the div with the country that has the highest population? Thanks in Advance!

Script code;

const countries = document.querySelector('.countries')
const lang = document.getElementById('search').value
const btn = document.getElementById('btn')


async function getCountries(){
    countries.innerText = ''
    const search = document.querySelector('.search').value;
    const response = await fetch(`https://restcountries.com/v3.1/lang/${search}`,{
        method: "GET",
    });
    
    const data = await response.json();

    if(!response.ok){
        countries.innerText += 'Language doesnt excist. Search again!'
      
    }else {
        data.forEach(api=> {
            showCountry(api)
        })  
    }

    ??const maxPopulation = Math.max(data?.population)
    maxPopulation.forEach(pop =>{
        pop.style.border = 'green'
    })
    }
 

function showCountry(data){
    const country = document.createElement('div')
    country.classList.add('country')
    countries.classList.add('countriesClass')
    country.innerHTML =
    `<div class="country-img">
        <img src="${data?.flags?.png}" alt="">
    </div>
    <div class="country-details">
        <h5 class="countryName">${data?.name?.common}</h5>
        <p><strong>Population:</strong>${data?.population}</p>
        <p><strong>SubRegion:</strong>${data?.subregion}</p>
        <p><strong>Capital:</strong>${data?.capital}</p>
    </div>`
    
    countries.appendChild(country)
     
}

html code;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Countries</title>
</head>
<body>
    <div class="container">
        <h1>Search country by language!</h1>
    </div>
    <div class="container">
        <div class="controls">
            <i class="bx bx-search"></i>
            <input type="text" placeholder="search by language.." id="search" class="search">
        </div>
        <button id="btn" onclick="getCountries()">Search Country</button>
    </div>
    <div class="countries">
              
    </div>
    <script src="script.js"></script>
</body>
</html>

Solution

You are very close, however your maxPopulation is not working as you think it would.

In order to get the maxPopulation of all the countries you need to map all the data.

You could do this by const allPopulations = data.map(country => country.population)

In order to get the max value from allPopulations you can put this in the Math.max method you used as well.

const maxPopulation = Math.max(...allPupulations)

Notice how we spread the allPopulations in the Math.max method, this is because allPopulations is an array or numbers while the Math.max expects just a list of numbers like Math.max(1,2,3,4)

A working example can be found at https://codesandbox.io/s/interesting-hawking-hlmfn2?file=/src/index.js

Good luck with the rest of your project!