Emoji-прапорці країн на JavaScript

Привіт:) У цій короткій замітці покажу як за допомогою JavaScript вивести Emoji прапорці потрібної країни.

Нехай є список:

<ul>
  <li id="ukraine"></li>
  <li id="usa"></li>
  <li id="hungary"></li>
</ul>

У кожному елементі <li> потрібно відобразити прапорець відповідної країни:

<ul>
  <li id="ukraine">зображення_прапора_України</li>
  <li id="usa">зображення_прапора_США</li>
  <li id="hungary">зображення_прапора_Німеччини</li>
</ul>

По-перше, необхідно прибрати маркери списку для елементів:

ul {
  list-style-type: none;
}

Далі за допомогою JavaScript отримати прапорці вказаних у списку країн та кожен із них вивести у відповідному елементі списку:

function getFlagEmoji (countryCode) {
	let codePoints = countryCode.toUpperCase().split('').map(char =>  127397 + char.charCodeAt());
	return String.fromCodePoint(...codePoints);
}

let countryUa = document.getElementById("ukraine");
let countryUs = document.getElementById("usa");
let countryDe = document.getElementById("hungary");

let countryFlagUa = getFlagEmoji('ua');
let countryFlagUs = getFlagEmoji('us');
let countryFlagDe = getFlagEmoji('de');

countryUa.insertAdjacentText("beforeend", countryFlagUa);
countryUs.insertAdjacentText("beforeend", countryFlagUs);
countryDe.insertAdjacentText("beforeend", countryFlagDe);

Також код можна переписати на наступний:

<span data-flag="UA"></span>
<span data-flag="US"></span>
<span data-flag="DE"></span>

const getFlagEmoji = (countryCode) => countryCode.toUpperCase().replace(/./g,
  char => String.fromCodePoint(127397 + char.charCodeAt())
);

const flagReplace = document.querySelectorAll('[data-flag]');
flagReplace.forEach(s => s.innerHTML = getFlagEmoji(s.dataset.flag));

Джерело: https://dev.to/jorik/country-code-to-flag-emoji-a21